TW-1205: Accounts dropdown UI/UX improvements

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 oder wiederherstellen"
+    "message": "Konto erstellen"
   },
   "importAccount": {
     "message": "Konto importieren"
@@ -1455,8 +1455,13 @@
   "searchAssets": {
     "message": "Vermögenswerte suchen..."
   },
-  "searchByName": {
-    "message": "Nach Name suchen..."
+  "searchAccount": {
+    "message": "Suchen$hotkey$",
+    "placeholders": {
+      "hotkey": {
+        "content": "$1"
+      }
+    }
   },
   "deployNew": {
     "message": "Neu bereitstellen"

public/_locales/en/messages.json

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

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 or Restore account"
+    "message": "Create account"
   },
   "totalEquityValue": {
     "message": "Total Equity Value"

public/_locales/fr/messages.json

@@ -12,7 +12,7 @@
     "message": "Importer un compte"
   },
   "createAccount": {
-    "message": "Créer ou restaurer un compte"
+    "message": "Créer un compte"
   },
   "faucetFileTitle": {
     "message": "Fichier Faucet"

public/_locales/ja/messages.json

@@ -12,7 +12,7 @@
     "message": "アカウントをインポート"
   },
   "createAccount": {
-    "message": "アカウントを作成または復元する"
+    "message": "アカウントを作成"
   },
   "faucetFileTitle": {
     "message": "フォーセットファイル"

public/_locales/ko/messages.json

@@ -12,7 +12,7 @@
     "message": "계정 불러오기"
   },
   "createAccount": {
-    "message": "계정 생성 또는 복원"
+    "message": "계정 만들기"
   },
   "faucetFileTitle": {
     "message": "수도꼭지 파일"

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 ou restaurar conta"
+    "message": "Criar conta"
   },
   "importAccount": {
     "message": "Importar conta"
@@ -1455,8 +1455,13 @@
   "searchAssets": {
     "message": "Procurar ativos..."
   },
-  "searchByName": {
-    "message": "Procurar por nome..."
+  "searchAccount": {
+    "message": "Procurar$hotkey$",
+    "placeholders": {
+      "hotkey": {
+        "content": "$1"
+      }
+    }
   },
   "deployNew": {
     "message": "Implantar novo"

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": "Hesap Oluştur veya Geri Yükle"
+    "message": "Bir hesap oluşturun"
   },
   "importAccount": {
     "message": "Hesabı içe aktar"
@@ -1455,8 +1455,13 @@
   "searchAssets": {
     "message": "Varlıkları ara..."
   },
-  "searchByName": {
-    "message": "Ada göre ara..."
+  "searchAccount": {
+    "message": "Aramak$hotkey$",
+    "placeholders": {
+      "hotkey": {
+        "content": "$1"
+      }
+    }
   },
   "deployNew": {
     "message": "Yeni dağıt"

public/_locales/uk/messages.json

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

public/_locales/zh_CN/messages.json

@@ -12,7 +12,7 @@
     "message": "导入账户"
   },
   "createAccount": {
-    "message": "创建或恢复帐户"
+    "message": "创建一个帐户"
   },
   "faucetFileTitle": {
     "message": "Faucet文件"

public/_locales/zh_TW/messages.json

@@ -12,7 +12,7 @@
     "message": "匯入帳戶"
   },
   "createAccount": {
-    "message": "創建或恢復帳戶"
+    "message": "建立一個帳戶"
   },
   "faucetFileTitle": {
     "message": "水龍頭檔案"

src/app/atoms/AccountTypeBadge.tsx

@@ -16,7 +16,7 @@ const AccountTypeBadge = memo<AccountTypeBadgeProps>(({ account, darkTheme = fal
   return title ? (
     <span
       className={clsx(
-        'rounded border border-opacity-25 px-1 py-px ml-2 leading-tight text-opacity-50',
+        'rounded border border-opacity-25 px-1 py-px ml-2 leading-tight font-medium text-opacity-50',
         darkTheme ? 'border-white text-white' : 'border-black text-black'
       )}
       style={{ fontSize: '0.6rem' }}

src/app/hooks/use-current-os.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+
+import browser from 'webextension-polyfill';
+
+export const useCurrentOs = () => {
+  const [currentOs, setCurrentOs] = useState('');
+
+  const getCurrentOs = async () => {
+    const { os } = await browser.runtime.getPlatformInfo();
+    setCurrentOs(os);
+  };
+
+  useEffect(() => {
+    getCurrentOs();
+  }, []);
+
+  return currentOs;
+};

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-white hover:bg-opacity-5',
+        selected ? 'bg-gray-700 bg-opacity-40' : 'hover:bg-gray-700 hover:bg-opacity-20',
         !selected && 'opacity-65 hover:opacity-100'
       ),
     [selected]

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-white hover:bg-opacity-10',
+      'hover:bg-gray-700 hover:bg-opacity-30',
       'transition ease-in-out duration-200'
     ),
     style: {
-      paddingTop: '0.375rem',
-      paddingBottom: '0.375rem'
+      paddingTop: '0.5rem',
+      paddingBottom: '0.5rem'
     },
     onClick,
     children: (
       <>
-        <div className="flex items-center w-8">
-          <Icon className="w-auto h-6 stroke-current" />
+        <div className="flex items-center w-6">
+          <Icon className="w-auto h-4 stroke-current" />
         </div>
 
         <T id={i18nKey} />

src/app/layouts/PageLayout/Header/AccountDropdown/index.tsx

@@ -5,12 +5,14 @@ import classNames from 'clsx';
 import { Button } from 'app/atoms/Button';
 import DropdownWrapper from 'app/atoms/DropdownWrapper';
 import { openInFullPage, useAppEnv } from 'app/env';
+import { useCurrentOs } from 'app/hooks/use-current-os';
 import { ReactComponent as AddIcon } from 'app/icons/add.svg';
 import { ReactComponent as DAppsIcon } from 'app/icons/apps-alt.svg';
 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';
@@ -22,6 +24,8 @@ import { AccountItem } from './AccountItem';
 import { ActionButtonProps, ActionButton } from './ActionButton';
 import { AccountDropdownSelectors } from './selectors';
 
+const COLOR_GRAY_600 = '#718096';
+
 type AccountDropdownProps = PopperRenderProps;
 
 interface TDropdownAction extends ActionButtonProps {
@@ -35,12 +39,11 @@ const AccountDropdown: FC<AccountDropdownProps> = ({ opened, setOpened }) => {
   const account = useAccount();
   const setAccountPkh = useSetAccountPkh();
   const { assetName: gasTokenName } = useGasToken();
+  const os = useCurrentOs();
 
   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;
@@ -134,9 +137,11 @@ const AccountDropdown: FC<AccountDropdownProps> = ({ opened, setOpened }) => {
     [appEnv.fullPage, closeDropdown, handleMaximiseViewClick]
   );
 
+  const searchHotkey = useMemo(() => ` (${os === 'mac' ? '⌘' : 'Ctrl + '}K)`, [os]);
+
   useEffect(() => {
     if (searchValue) setAttractSelectedAccount(false);
-    else if (opened === false) setAttractSelectedAccount(true);
+    else if (!opened) setAttractSelectedAccount(true);
   }, [opened, searchValue]);
 
   return (
@@ -158,11 +163,11 @@ const AccountDropdown: FC<AccountDropdownProps> = ({ opened, setOpened }) => {
 
         <Button
           className={classNames(
-            'px-2 py-1',
+            'px-2 py-0.5',
             'rounded-md',
-            'border border-gray-700',
+            'border border-gray-200',
             'flex items-center',
-            'text-white text-shadow-black',
+            'text-gray-200',
             'text-sm',
             'transition duration-300 ease-in-out',
             'opacity-20',
@@ -177,39 +182,32 @@ const AccountDropdown: FC<AccountDropdownProps> = ({ opened, setOpened }) => {
       </div>
 
       <div className="my-2">
-        {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
+        <SearchField
+          value={searchValue}
           className={classNames(
-            'overflow-y-auto rounded border border-gray-700 shadow-inner',
-            isShowSearch && 'border-t-0 rounded-t-none'
+            'py-2 pl-8 pr-4',
+            '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'
           )}
-          style={{ maxHeight: isShowSearch ? '12rem' : '14.25rem' }}
-        >
+          placeholder={t('searchAccount', [searchHotkey])}
+          searchIconClassName="h-5 w-auto"
+          searchIconWrapperClassName="px-2"
+          cleanButtonStyle={{ backgroundColor: 'transparent', borderColor: COLOR_GRAY_600 }}
+          cleanButtonIconStyle={{ stroke: COLOR_GRAY_600 }}
+          searchIconStyle={{ stroke: COLOR_GRAY_600 }}
+          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">
           <div className="flex flex-col">
             {filteredAccounts.length === 0 ? (
-              <p className="text-center text-white text-sm p-10">
-                <T id="noResults" />
-              </p>
+              <div className="h-48 flex justify-center items-center">
+                <SadSearchIcon />
+              </div>
             ) : (
               filteredAccounts.map(acc => (
                 <AccountItem

src/app/templates/SearchField.tsx

@@ -11,6 +11,8 @@ export interface SearchFieldProps extends InputHTMLAttributes<HTMLInputElement>,
   containerClassName?: string;
   searchIconClassName?: string;
   searchIconWrapperClassName?: string;
+  cleanButtonClassName?: string;
+  searchIconStyle?: React.CSSProperties;
   cleanButtonStyle?: React.CSSProperties;
   cleanButtonIconStyle?: React.CSSProperties;
   value: string;
@@ -25,6 +27,8 @@ const SearchField: FC<SearchFieldProps> = ({
   onValueChange,
   searchIconClassName,
   searchIconWrapperClassName,
+  cleanButtonClassName,
+  searchIconStyle,
   cleanButtonStyle,
   cleanButtonIconStyle,
   testID,
@@ -61,12 +65,13 @@ const SearchField: FC<SearchFieldProps> = ({
             searchIconWrapperClassName
           )}
         >
-          <SearchIcon className={classNames('stroke-current', searchIconClassName)} />
+          <SearchIcon style={searchIconStyle} className={classNames('stroke-current', searchIconClassName)} />
         </div>
 
         {Boolean(value) && (
           <CleanButton
             bottomOffset={bottomOffset}
+            className={cleanButtonClassName}
             style={cleanButtonStyle}
             iconStyle={cleanButtonIconStyle}
             onClick={handleClean}

tailwind.config.js

@@ -650,7 +650,7 @@ module.exports = {
       inset: {
         '2px': '2px',
         '1/2': '50%',
-        18: '4.5rem',
+        18: '4.5rem'
       },
       space: (theme, { negative }) => ({
         ...theme('spacing'),