Auth: Polish UI, fix exception

src/components/auth/AuthCode.tsx

@@ -109,7 +109,7 @@ const AuthCode: FC<StateProps> = ({
           onInput={onCodeChange}
           value={code}
           error={authError && lang(authError)}
-          autoComplete="one-time-code"
+          autoComplete="off"
           inputMode="numeric"
         />
         {authIsLoading && <Loading />}

src/components/auth/CountryCodeInput.scss

@@ -63,7 +63,7 @@
 
   .country-flag {
     font-size: 2rem;
-    margin-right: 2rem;
+    margin-right: 1rem;
 
     .emoji {
       width: 2rem;
@@ -85,5 +85,6 @@
   .country-code {
     margin-left: auto;
     opacity: 0.5;
+    padding-right: 0.25rem;
   }
 }

src/components/auth/CountryCodeInput.tsx

@@ -136,13 +136,13 @@ const CountryCodeInput: FC<OwnProps & StateProps> = ({
       {filteredList
         .map((country: ApiCountryCode) => (
           <MenuItem
-            key={country.iso2}
+            key={`${country.iso2}-${country.countryCode}`}
             className={value && country.iso2 === value.iso2 ? 'selected' : ''}
             onClick={() => handleChange(country)}
           >
             <span className="country-flag">{renderText(isoToEmoji(country.iso2), ['hq_emoji'])}</span>
             <span className="country-name">{country.name || country.defaultName}</span>
-            <span className="country-code">{country.countryCode}</span>
+            <span className="country-code">+{country.countryCode}</span>
           </MenuItem>
         ))}
       {!filteredList.length && (