From 233979405a3aeabe5add0524a69a1d75bf353394 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Sat, 5 Mar 2022 18:06:20 +0100
Subject: [PATCH] Auth: Polish UI, fix exception

---
 src/components/auth/AuthCode.tsx          | 2 +-
 src/components/auth/CountryCodeInput.scss | 3 ++-
 src/components/auth/CountryCodeInput.tsx  | 4 ++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/auth/AuthCode.tsx b/src/components/auth/AuthCode.tsx
index 40421ef10..fc9fdfd2f 100644
--- a/src/components/auth/AuthCode.tsx
+++ b/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 />}
diff --git a/src/components/auth/CountryCodeInput.scss b/src/components/auth/CountryCodeInput.scss
index 538d8c08c..9fe859370 100644
--- a/src/components/auth/CountryCodeInput.scss
+++ b/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;
   }
 }
diff --git a/src/components/auth/CountryCodeInput.tsx b/src/components/auth/CountryCodeInput.tsx
index 8374d5665..5d59391fe 100644
--- a/src/components/auth/CountryCodeInput.tsx
+++ b/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 && (