Revert "TW-1205: Accounts dropdown UI/UX improvements (#1034)"

This reverts commit 935b0c6.
madfish-solutions · Dec 14, 2023 · 3f6e3c1 · 3f6e3c1
1 parent 935b0c6
commit 3f6e3c1
Show file tree

Hide file tree

Showing 22 changed files with 78 additions and 119 deletions.
diff --git a/public/_locales/de/messages.json b/public/_locales/de/messages.json
@@ -9,7 +9,7 @@
     "message": "Kryptowährungs-Wallet für Tezos-Blockchain als Web-Erweiterung für Ihren Browser."
   },
   "createAccount": {
-    "message": "Konto erstellen"
+    "message": "Konto erstellen oder wiederherstellen"
   },
   "importAccount": {
     "message": "Konto importieren"
@@ -1455,13 +1455,8 @@
   "searchAssets": {
     "message": "Vermögenswerte suchen..."
   },
-  "searchAccount": {
-    "message": "Suchen$hotkey$",
-    "placeholders": {
-      "hotkey": {
-        "content": "$1"
-      }
-    }
+  "searchByName": {
+    "message": "Nach Name suchen..."
   },
   "deployNew": {
     "message": "Neu bereitstellen"

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
@@ -9,7 +9,7 @@
     "message": "🔐💰Cryptocurrency wallet for Tezos blockchain as Web Extension for your Browser."
   },
   "createAccount": {
-    "message": "Create account"
+    "message": "Create or Restore account"
   },
   "importAccount": {
     "message": "Import account"
@@ -1744,13 +1744,8 @@
   "searchAssets": {
     "message": "Search assets..."
   },
-  "searchAccount": {
-    "message": "Search$hotkey$",
-    "placeholders": {
-      "hotkey": {
-        "content": "$1"
-      }
-    }
+  "searchByName": {
+    "message": "Search by name..."
   },
   "deployNew": {
     "message": "Deploy new"

diff --git a/public/_locales/en_GB/messages.json b/public/_locales/en_GB/messages.json
@@ -9,7 +9,7 @@
     "message": "🔐💰Cryptocurrency wallet for Tezos blockchain as Web Extension for your Browser."
   },
   "createAccount": {
-    "message": "Create account"
+    "message": "Create or Restore account"
   },
   "totalEquityValue": {
     "message": "Total Equity Value"

diff --git a/public/_locales/fr/messages.json b/public/_locales/fr/messages.json
@@ -12,7 +12,7 @@
     "message": "Importer un compte"
   },
   "createAccount": {
-    "message": "Créer un compte"
+    "message": "Créer ou restaurer un compte"
   },
   "faucetFileTitle": {
     "message": "Fichier Faucet"

diff --git a/public/_locales/ja/messages.json b/public/_locales/ja/messages.json
@@ -12,7 +12,7 @@
     "message": "アカウントをインポート"
   },
   "createAccount": {
-    "message": "アカウントを作成"
+    "message": "アカウントを作成または復元する"
   },
   "faucetFileTitle": {
     "message": "フォーセットファイル"

diff --git a/public/_locales/ko/messages.json b/public/_locales/ko/messages.json
@@ -12,7 +12,7 @@
     "message": "계정 불러오기"
   },
   "createAccount": {
-    "message": "계정 만들기"
+    "message": "계정 생성 또는 복원"
   },
   "faucetFileTitle": {
     "message": "수도꼭지 파일"

diff --git a/public/_locales/pt/messages.json b/public/_locales/pt/messages.json
@@ -9,7 +9,7 @@
     "message": "Carteira de criptomoedas para blocos em cadeia Tezos como extensão da Web para o seu Browser."
   },
   "createAccount": {
-    "message": "Criar conta"
+    "message": "Criar ou restaurar conta"
   },
   "importAccount": {
     "message": "Importar conta"
@@ -1455,13 +1455,8 @@
   "searchAssets": {
     "message": "Procurar ativos..."
   },
-  "searchAccount": {
-    "message": "Procurar$hotkey$",
-    "placeholders": {
-      "hotkey": {
-        "content": "$1"
-      }
-    }
+  "searchByName": {
+    "message": "Procurar por nome..."
   },
   "deployNew": {
     "message": "Implantar novo"

diff --git a/public/_locales/tr/messages.json b/public/_locales/tr/messages.json
@@ -9,7 +9,7 @@
     "message": "Tarayıcınızda Web Uzantısı olarak Tezos blokzinciri için kripto para cüzdanı."
   },
   "createAccount": {
-    "message": "Bir hesap oluşturun"
+    "message": "Hesap Oluştur veya Geri Yükle"
   },
   "importAccount": {
     "message": "Hesabı içe aktar"
@@ -1455,13 +1455,8 @@
   "searchAssets": {
     "message": "Varlıkları ara..."
   },
-  "searchAccount": {
-    "message": "Aramak$hotkey$",
-    "placeholders": {
-      "hotkey": {
-        "content": "$1"
-      }
-    }
+  "searchByName": {
+    "message": "Ada göre ara..."
   },
   "deployNew": {
     "message": "Yeni dağıt"

diff --git a/public/_locales/uk/messages.json b/public/_locales/uk/messages.json
@@ -9,7 +9,7 @@
     "message": "🔐💰Криптовалютний гаманець для блокчейну Тезос як Розширення для твого браузеру"
   },
   "createAccount": {
-    "message": "Створити аккаунт"
+    "message": "Створити або відновити аккаунт"
   },
   "importAccount": {
     "message": "Імпортувати аккаунт"

diff --git a/public/_locales/zh_CN/messages.json b/public/_locales/zh_CN/messages.json
@@ -12,7 +12,7 @@
     "message": "导入账户"
   },
   "createAccount": {
-    "message": "创建一个帐户"
+    "message": "创建或恢复帐户"
   },
   "faucetFileTitle": {
     "message": "Faucet文件"

diff --git a/public/_locales/zh_TW/messages.json b/public/_locales/zh_TW/messages.json
@@ -12,7 +12,7 @@
     "message": "匯入帳戶"
   },
   "createAccount": {
-    "message": "建立一個帳戶"
+    "message": "創建或恢復帳戶"
   },
   "faucetFileTitle": {
     "message": "水龍頭檔案"

diff --git a/src/app/atoms/AccountTypeBadge.tsx b/src/app/atoms/AccountTypeBadge.tsx
@@ -16,8 +16,8 @@ const AccountTypeBadge = memo<AccountTypeBadgeProps>(({ account, darkTheme = fal
   return title ? (
     <span
       className={clsx(
-        'rounded border px-1 py-px ml-2 leading-none text-xxxxs font-medium',
-        darkTheme ? 'border-gray-500 text-gray-500' : 'border-black text-black'
+        'rounded border border-opacity-25 px-1 py-px ml-2 leading-tight text-opacity-50',
+        darkTheme ? 'border-white text-white' : 'border-black text-black'
       )}
       style={{ fontSize: '0.6rem' }}
     >

diff --git a/src/app/atoms/CleanButton.tsx b/src/app/atoms/CleanButton.tsx
@@ -8,14 +8,12 @@ import useTippy from 'lib/ui/useTippy';
 
 type CleanButtonProps = HTMLAttributes<HTMLButtonElement> & {
   bottomOffset?: string;
-  iconClassName?: string;
   iconStyle?: React.CSSProperties;
 };
 
 const CleanButton: FC<CleanButtonProps> = ({
   bottomOffset = '0.4rem',
   className,
-  iconClassName,
   style = {},
   iconStyle = {},
   ...rest
@@ -50,7 +48,7 @@ const CleanButton: FC<CleanButtonProps> = ({
       tabIndex={-1}
       {...rest}
     >
-      <CloseIcon className={classNames('w-auto h-4 stroke-current', iconClassName)} style={iconStyle} />
+      <CloseIcon className="w-auto h-4 stroke-current" style={iconStyle} />
     </button>
   );
 };

diff --git a/src/app/icons/sad-search.svg b/src/app/icons/sad-search.svg
diff --git a/src/app/layouts/PageLayout/Header/AccountDropdown/AccountItem.tsx b/src/app/layouts/PageLayout/Header/AccountDropdown/AccountItem.tsx
@@ -31,7 +31,7 @@ export const AccountItem: React.FC<AccountItemProps> = ({ account, selected, gas
         'text-white text-shadow-black overflow-hidden',
         'transition ease-in-out duration-200',
         selected && 'shadow',
-        selected ? 'bg-gray-700 bg-opacity-40' : 'hover:bg-gray-700 hover:bg-opacity-20',
+        selected ? 'bg-gray-700 bg-opacity-40' : 'hover:bg-white hover:bg-opacity-5',
         !selected && 'opacity-65 hover:opacity-100'
       ),
     [selected]

diff --git a/src/app/layouts/PageLayout/Header/AccountDropdown/ActionButton.tsx b/src/app/layouts/PageLayout/Header/AccountDropdown/ActionButton.tsx
@@ -20,18 +20,18 @@ export const ActionButton: React.FC<ActionButtonProps> = ({ Icon, linkTo, onClic
     className: classNames(
       'block w-full flex items-center px-2 whitespace-nowrap overflow-hidden',
       'rounded text-white text-shadow-black text-sm',
-      'hover:bg-gray-700 hover:bg-opacity-30',
+      'hover:bg-white hover:bg-opacity-10',
       'transition ease-in-out duration-200'
     ),
     style: {
-      paddingTop: '0.5rem',
-      paddingBottom: '0.5rem'
+      paddingTop: '0.375rem',
+      paddingBottom: '0.375rem'
     },
     onClick,
     children: (
       <>
-        <div className="flex items-center w-6">
-          <Icon className="w-auto h-4 stroke-current" />
+        <div className="flex items-center w-8">
+          <Icon className="w-auto h-6 stroke-current" />
         </div>
 
         <T id={i18nKey} />

diff --git a/src/app/layouts/PageLayout/Header/AccountDropdown/index.tsx b/src/app/layouts/PageLayout/Header/AccountDropdown/index.tsx
@@ -11,22 +11,17 @@ import { ReactComponent as DownloadIcon } from 'app/icons/download.svg';
 import { ReactComponent as LinkIcon } from 'app/icons/link.svg';
 import { ReactComponent as LockIcon } from 'app/icons/lock.svg';
 import { ReactComponent as MaximiseIcon } from 'app/icons/maximise.svg';
-import { ReactComponent as SadSearchIcon } from 'app/icons/sad-search.svg';
 import { ReactComponent as SettingsIcon } from 'app/icons/settings.svg';
 import SearchField from 'app/templates/SearchField';
 import { T, t } from 'lib/i18n';
 import { useAccount, useRelevantAccounts, useSetAccountPkh, useTempleClient, useGasToken } from 'lib/temple/front';
 import { PopperRenderProps } from 'lib/ui/Popper';
-import { searchAndFilterItems } from 'lib/utils/search-items';
 import { HistoryAction, navigate } from 'lib/woozie';
 
 import { AccountItem } from './AccountItem';
 import { ActionButtonProps, ActionButton } from './ActionButton';
 import { AccountDropdownSelectors } from './selectors';
 
-const isMacOS = /Mac OS/.test(navigator.userAgent);
-const searchHotkey = ` (${isMacOS ? '⌘' : 'Ctrl + '}K)`;
-
 type AccountDropdownProps = PopperRenderProps;
 
 interface TDropdownAction extends ActionButtonProps {
@@ -44,15 +39,16 @@ const AccountDropdown: FC<AccountDropdownProps> = ({ opened, setOpened }) => {
   const [searchValue, setSearchValue] = useState('');
   const [attractSelectedAccount, setAttractSelectedAccount] = useState(true);
 
+  const isShowSearch = useMemo(() => allAccounts.length > 5, [allAccounts.length]);
+
   const filteredAccounts = useMemo(() => {
     if (searchValue.length === 0) {
       return allAccounts;
-    }
+    } else {
+      const lowerCaseSearchValue = searchValue.toLowerCase();
 
-    return searchAndFilterItems(allAccounts, searchValue.toLowerCase(), [
-      { name: 'name', weight: 0.5 },
-      { name: 'publicKeyHash', weight: 0.5 }
-    ]);
+      return allAccounts.filter(currentAccount => currentAccount.name.toLowerCase().includes(lowerCaseSearchValue));
+    }
   }, [searchValue, allAccounts]);
 
   const closeDropdown = useCallback(() => {
@@ -140,7 +136,7 @@ const AccountDropdown: FC<AccountDropdownProps> = ({ opened, setOpened }) => {
 
   useEffect(() => {
     if (searchValue) setAttractSelectedAccount(false);
-    else if (!opened) setAttractSelectedAccount(true);
+    else if (opened === false) setAttractSelectedAccount(true);
   }, [opened, searchValue]);
 
   return (
@@ -162,11 +158,11 @@ const AccountDropdown: FC<AccountDropdownProps> = ({ opened, setOpened }) => {
 
         <Button
           className={classNames(
-            'px-2 py-0.5',
+            'px-2 py-1',
             'rounded-md',
-            'border border-gray-200',
+            'border border-gray-700',
             'flex items-center',
-            'text-gray-200',
+            'text-white text-shadow-black',
             'text-sm',
             'transition duration-300 ease-in-out',
             'opacity-20',
@@ -181,32 +177,39 @@ const AccountDropdown: FC<AccountDropdownProps> = ({ opened, setOpened }) => {
       </div>
 
       <div className="my-2">
-        <SearchField
-          value={searchValue}
+        {isShowSearch && (
+          <SearchField
+            value={searchValue}
+            className={classNames(
+              'py-2 pl-8 pr-4',
+              'bg-transparent',
+              'border border-white border-opacity-10',
+              'focus:outline-none',
+              'transition ease-in-out duration-200',
+              'rounded-md rounded-b-none',
+              'text-white text-sm leading-tight'
+            )}
+            placeholder={t('searchByName')}
+            searchIconClassName="h-5 w-auto"
+            searchIconWrapperClassName="px-2 text-white opacity-75"
+            cleanButtonStyle={{ backgroundColor: 'transparent' }}
+            cleanButtonIconStyle={{ stroke: 'white' }}
+            onValueChange={setSearchValue}
+          />
+        )}
+
+        <div
           className={classNames(
-            'py-2 pl-8 pr-8',
-            'bg-transparent',
-            'border border-gray-200 border-opacity-20',
-            'focus:outline-none',
-            'transition ease-in-out duration-200',
-            'rounded-md rounded-b-none',
-            'text-gray-500 placeholder-gray-600 text-sm leading-tight'
+            'overflow-y-auto rounded border border-gray-700 shadow-inner',
+            isShowSearch && 'border-t-0 rounded-t-none'
           )}
-          placeholder={t('searchAccount', [searchHotkey])}
-          searchIconClassName="h-5 w-auto text-gray-600 stroke-current"
-          searchIconWrapperClassName="px-2"
-          cleanButtonClassName="border-gray-600"
-          cleanButtonIconClassName="text-gray-600 stroke-current"
-          cleanButtonStyle={{ backgroundColor: 'transparent' }}
-          onValueChange={setSearchValue}
-        />
-
-        <div className="overflow-y-auto rounded border border-gray-200 border-opacity-20 shadow-inner border-t-0 rounded-t-none h-48">
+          style={{ maxHeight: isShowSearch ? '12rem' : '14.25rem' }}
+        >
           <div className="flex flex-col">
             {filteredAccounts.length === 0 ? (
-              <div className="h-48 flex justify-center items-center">
-                <SadSearchIcon />
-              </div>
+              <p className="text-center text-white text-sm p-10">
+                <T id="noResults" />
+              </p>
             ) : (
               filteredAccounts.map(acc => (
                 <AccountItem

diff --git a/src/app/pages/CreateAccount/CreateAccount.tsx b/src/app/pages/CreateAccount/CreateAccount.tsx
@@ -105,7 +105,11 @@ const CreateAccount: FC = () => {
             testID={CreateAccountSelectors.accountNameInputField}
           />
 
-          <FormSubmitButton loading={submitting} testID={CreateAccountSelectors.createOrRestoreButton}>
+          <FormSubmitButton
+            className="capitalize"
+            loading={submitting}
+            testID={CreateAccountSelectors.createOrRestoreButton}
+          >
             <T id="createAccount" />
           </FormSubmitButton>
         </form>

diff --git a/src/app/templates/DAppsList.tsx b/src/app/templates/DAppsList.tsx
@@ -112,7 +112,6 @@ const DAppsList = () => {
           searchIconClassName="h-4 w-auto"
           searchIconWrapperClassName="px-2 text-gray-700"
           value={searchString}
-          isCleanButtonVisible={Boolean(searchString)}
           onValueChange={setSearchString}
         />
         <div className={classNames(popup ? 'mb-4' : 'mb-6', 'w-full flex justify-between')}>