Few extension UI tweaks (#654)

* feat: fixing import error when changing from 12 to 24 words * feat: tweaking import elements * feat: changing call to action from 'Close this page' to 'Finish Setup' * feat(extension): tweak to make index page with the same height than 'create new keys' page * feat: improving errors on confirm password input field * feat: word index should be dark gray
anoma · Mar 5, 2024 · d1d7139 · d1d7139
1 parent 9069245
commit d1d7139
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 12 deletions.
diff --git a/apps/extension/src/Setup/AccountCreation/SeedPhraseWarning.tsx b/apps/extension/src/Setup/AccountCreation/SeedPhraseWarning.tsx
@@ -26,7 +26,7 @@ export const SeedPhraseWarning = ({
 
   return (
     <>
-      <Stack className="mb-6" gap={7}>
+      <Stack className="mb-5" gap={5}>
         <aside className="flex items-center bg-black rounded-md justify-center py-10 w-full">
           <div className="flex justify-center mx-auto text-yellow text-[125px] leading-[1]">
             <GoAlertFill />

diff --git a/apps/extension/src/Setup/Common/Completion.tsx b/apps/extension/src/Setup/Common/Completion.tsx
@@ -151,7 +151,7 @@ export const Completion: React.FC<Props> = (props) => {
                 data-testid="setup-close-page-btn"
                 onClick={closeCurrentTab}
               >
-                Close this page
+                Finish Setup
               </ActionButton>
             }
           />

diff --git a/apps/extension/src/Setup/Common/Password.tsx b/apps/extension/src/Setup/Common/Password.tsx
@@ -95,7 +95,12 @@ export const Password = ({
           verifyPasswordMatch(event.target.value);
         }}
         onBlur={() => {
-          verifyPasswordMatch(password);
+          verifyPasswordMatch(passwordMatch);
+        }}
+        onFocus={() => {
+          if (passwordMatch) {
+            verifyPasswordMatch(passwordMatch);
+          }
         }}
       />
     </>

diff --git a/apps/extension/src/Setup/Common/SeedPhraseListItem.tsx b/apps/extension/src/Setup/Common/SeedPhraseListItem.tsx
@@ -34,7 +34,7 @@ export const SeedPhraseListItem = ({
           </i>
           <Input
             label=""
-            className="-mt-2"
+            className="-mt-2 ml-1"
             variant="PasswordOnBlur"
             hideIcon={true}
             onChange={(e) => onChange(idx, e.target.value)}
@@ -44,11 +44,10 @@ export const SeedPhraseListItem = ({
         </span>
       ) : (
         <span
-          className={clsx(
-            "absolute text-white font-light left-2.5 top-[1em] select-none"
-          )}
+          className={clsx("absolute font-light left-2.5 top-[1em] select-none")}
         >
-          {idx + 1} <span className="font-bold">{word}</span>
+          <i className="not-italic">{idx + 1} </i>
+          <span className="text-white font-bold ml-1">{word}</span>
         </span>
       )}
     </li>

diff --git a/apps/extension/src/Setup/ImportAccount/SeedPhraseImport.tsx b/apps/extension/src/Setup/ImportAccount/SeedPhraseImport.tsx
@@ -14,7 +14,7 @@ import { AccountSecret, ValidateMnemonicMsg } from "background/keyring";
 import { useRequester } from "hooks/useRequester";
 import { GoX } from "react-icons/go";
 import { Ports } from "router";
-import { filterPrivateKeyPrefix, validatePrivateKey } from "utils";
+import { fillArray, filterPrivateKeyPrefix, validatePrivateKey } from "utils";
 
 type Props = {
   onConfirm: (accountSecret: AccountSecret) => void;
@@ -212,7 +212,7 @@ export const SeedPhraseImport: React.FC<Props> = ({ onConfirm }) => {
             <SeedPhraseList
               sensitive={false}
               columns={mnemonicType === MnemonicTypes.TwentyFourWords ? 4 : 3}
-              words={mnemonics.slice(0, mnemonicType)}
+              words={fillArray(mnemonics.slice(0, mnemonicType), mnemonicType)}
               onChange={onInputChange}
               onPaste={onPaste}
             />

diff --git a/apps/extension/src/Setup/Ledger/LedgerConfirmation.tsx b/apps/extension/src/Setup/Ledger/LedgerConfirmation.tsx
@@ -24,7 +24,7 @@ export const LedgerConfirmation = (): JSX.Element => {
         transparentAccountAddress={account.address}
       />
       <ActionButton size="lg" onClick={closeCurrentTab}>
-        Close this page
+        Finish Setup
       </ActionButton>
     </Stack>
   );

diff --git a/apps/extension/src/utils/index.ts b/apps/extension/src/utils/index.ts
@@ -21,6 +21,10 @@ export const openSetupTab = (): void => {
   });
 };
 
+export const fillArray = (arr: string[], length: number): string[] => {
+  return arr.concat(Array(length - arr.length).fill("")).slice(0, length);
+};
+
 /**
  * Construct unique uuid (v5), passing in an arbitrary number of arguments.
  * This could be a unique parameter of the object receiving the id,

diff --git a/packages/components/src/FeedbackButton.tsx b/packages/components/src/FeedbackButton.tsx
@@ -51,7 +51,7 @@ export const FeedbackButton = ({
       <button
         onClick={onPerformClick}
         className={clsx(
-          "text-white font-medium underline text-xs",
+          "text-white font-medium underline text-xs hover:text-yellow",
           props.className
         )}
       >