Global Extension UI Review (anoma#645)

* feat: adding cheatsheet to Storybook and Panel component * feat: tweaking button sizes and spacements * feat: ui tweaks on setup Start page * feat: adding div props to alert component * feat: reviewing warning panel and start page * feat: creating badge and feedback button components * feat: reducing sizes for seed phrase list * feat: finalizing seed creation review * feat: completing account creation flow review * feat: truncating addresses on confirmation * feat: few components ui review * feat: rolling back bip39 password input * feat: fixing ledger import * feat: fixing ledger forms alignment * feat: opening setup tab if no password is defined * feat: improving connected sites ui * feat: improving approve connections ui * feat: better alignment on signature popups * feat: few more ui tweaks on extension * feat: refactoring the copyTextTo property to make it more generic * fix: removing package-lock.json * feat: renaming colour to color
seleniumforest · Apr 11, 2024 · 14535fe · 14535fe
1 parent 4163937
commit 14535fe
Show file tree

Hide file tree

Showing 65 changed files with 1,907 additions and 1,192 deletions.
diff --git a/apps/extension/src/App/Accounts/DeleteAccount.tsx b/apps/extension/src/App/Accounts/DeleteAccount.tsx
@@ -5,6 +5,7 @@ import {
   Alert,
   GapPatterns,
   Input,
+  LinkButton,
   Loading,
   Stack,
 } from "@namada/components";
@@ -84,21 +85,30 @@ export const DeleteAccount = (): JSX.Element => {
 
   return (
     <>
+      <PageHeader title="Delete Keys" />
       <Stack
         as="form"
         onSubmit={handleSubmit}
         gap={GapPatterns.TitleContent}
         full
       >
-        <Stack gap={GapPatterns.TitleContent} full>
+        <Stack className="flex-1 justify-center" gap={4} full>
           <Stack as="header" gap={4}>
-            <PageHeader title="Delete Keys" />
             <Alert type="warning" title="Alert!">
-              Make sure that you&apos;ve backed up your seed phrase and private
-              key.
+              <p className="mb-4">
+                Make sure that you&apos;ve backed up your seed phrase and
+                private key.
+              </p>
+              <LinkButton
+                color="primary"
+                className="font-bold mt-4 text-sm underline"
+                href={routes.viewAccountMnemonic(accountId)}
+              >
+                Back Up My Wallet
+              </LinkButton>
             </Alert>
           </Stack>
-          <p className="text-white leading-5 text-base font-medium">
+          <p className="text-white leading-5 text-sm px-2 font-medium mb-10">
             After deletion, you will be required to import your seed phrase to
             restore your access to it
           </p>
@@ -111,7 +121,7 @@ export const DeleteAccount = (): JSX.Element => {
             error={errorMessage}
           />
         </Stack>
-        <ActionButton size="lg" disabled={shouldDisableSubmit}>
+        <ActionButton size="md" disabled={shouldDisableSubmit}>
           Delete Account
         </ActionButton>
       </Stack>

diff --git a/apps/extension/src/App/Accounts/ParentAccounts.tsx b/apps/extension/src/App/Accounts/ParentAccounts.tsx
@@ -1,6 +1,5 @@
 import { useContext } from "react";
 import { useNavigate } from "react-router-dom";
-import browser from "webextension-polyfill";
 
 import {
   ActionButton,
@@ -13,6 +12,7 @@ import { PageHeader } from "App/Common";
 import routes from "App/routes";
 import { ParentAccount } from "background/keyring";
 import { AccountContext } from "context";
+import { openSetupTab } from "utils";
 
 /**
  * Represents the extension's settings page.
@@ -23,9 +23,7 @@ export const ParentAccounts = (): JSX.Element => {
     useContext(AccountContext);
 
   const goToSetupPage = (): void => {
-    browser.tabs.create({
-      url: browser.runtime.getURL("setup.html"),
-    });
+    openSetupTab();
   };
 
   const goToViewAccount = (account: DerivedAccount): void => {
@@ -46,13 +44,12 @@ export const ParentAccounts = (): JSX.Element => {
 
   return (
     <Stack gap={GapPatterns.TitleContent}>
-      <PageHeader title="Keys Management" />
-
+      <PageHeader title="Select Account" />
       <Stack gap={4}>
         <nav className="grid items-end grid-cols-[auto_min-content]">
-          <p className="text-white font-medium text-base">Set default keys</p>
+          <p className="text-white font-medium text-xs">Set default keys</p>
           <div className="w-24">
-            <ActionButton size="xs" onClick={goToSetupPage}>
+            <ActionButton borderRadius="md" size="xs" onClick={goToSetupPage}>
               Add keys
             </ActionButton>
           </div>

diff --git a/apps/extension/src/App/Accounts/RenameAccount.tsx b/apps/extension/src/App/Accounts/RenameAccount.tsx
@@ -55,7 +55,11 @@ export const RenameAccount = (): JSX.Element => {
     >
       <PageHeader title="Rename Key" />
       {account && (
-        <Stack full gap={GapPatterns.FormFields}>
+        <Stack
+          className="flex-1 justify-center"
+          full
+          gap={GapPatterns.FormFields}
+        >
           <Input readOnly label="Current name" value={account.alias} />
           <Input
             autoFocus
@@ -67,7 +71,7 @@ export const RenameAccount = (): JSX.Element => {
           />
         </Stack>
       )}
-      {account && <ActionButton size="lg">Rename</ActionButton>}
+      {account && <ActionButton size="md">Rename</ActionButton>}
     </Stack>
   );
 };
diff --git a/apps/extension/src/App/Accounts/ViewAccount.tsx b/apps/extension/src/App/Accounts/ViewAccount.tsx
@@ -63,7 +63,11 @@ export const ViewAccount = (): JSX.Element => {
               shieldedAccountAddress={shieldedAddress}
             />
           </Stack>
-          <ActionButton size="sm" onClick={() => navigate(-1)}>
+          <ActionButton
+            size="md"
+            borderRadius="md"
+            onClick={() => navigate(-1)}
+          >
             Back
           </ActionButton>
         </>

diff --git a/apps/extension/src/App/Accounts/ViewMnemonic.tsx b/apps/extension/src/App/Accounts/ViewMnemonic.tsx
@@ -71,7 +71,7 @@ export const ViewMnemonic = (): JSX.Element => {
 
       {!passwordChecked && (
         <>
-          <Stack full gap={GapPatterns.FormFields}>
+          <Stack className="mt-12" full gap={GapPatterns.FormFields}>
             <Alert type="info">
               Please provide your password in order to view your seed phrase
             </Alert>
@@ -85,26 +85,28 @@ export const ViewMnemonic = (): JSX.Element => {
               onChange={(e) => setPassword(e.target.value)}
             />
           </Stack>
-          <ActionButton disabled={!password}>Proceed</ActionButton>
+          <ActionButton type="submit" size="md" disabled={!password}>
+            Proceed
+          </ActionButton>
         </>
       )}
 
       {passwordChecked && (
         <>
-          <Stack full gap={1}>
+          <Stack className="flex-1 justify-center" full gap={1}>
             <div className="text-sm -mt-1.5">
               <SeedPhraseInstructions />
             </div>
             <Input
               variant="Textarea"
-              theme="secondary"
               readOnly={true}
               value={mnemonic}
               sensitive
+              className="[&_textarea]:rounded-lg [&_textarea]:py-8 [&_textarea]:px-6"
               rows={mnemonic.split(" ").length === 24 ? 5 : 3}
             />
           </Stack>
-          <ActionButton size="sm" onClick={() => navigate(-1)}>
+          <ActionButton size="md" onClick={() => navigate(-1)}>
             Back
           </ActionButton>
         </>

diff --git a/apps/extension/src/App/AppContent.tsx b/apps/extension/src/App/AppContent.tsx
@@ -12,6 +12,7 @@ import {
   HasMaspParamsMsg,
 } from "provider/messages";
 import { Ports } from "router";
+import { openSetupTab } from "utils";
 import {
   DeleteAccount,
   RenameAccount,
@@ -92,9 +93,14 @@ export const AppContent = (): JSX.Element => {
 
   useEffect(() => {
     if (
-      !passwordInitialized ||
+      !passwordInitialized &&
       accountLoadingStatus === LoadingStatus.Completed
     ) {
+      openSetupTab();
+      return;
+    }
+
+    if (accountLoadingStatus === LoadingStatus.Completed) {
       navigate(getStartPage(accounts));
     }
   }, [accounts, passwordInitialized, accountLoadingStatus]);
@@ -110,7 +116,7 @@ export const AppContent = (): JSX.Element => {
   }, []);
 
   return (
-    <Stack full gap={6}>
+    <Stack className="py-5" full gap={6}>
       {isDurable === false && (
         <Alert type="warning">{STORE_DURABILITY_INFO}</Alert>
       )}

diff --git a/apps/extension/src/App/Common/AppHeader.tsx b/apps/extension/src/App/Common/AppHeader.tsx
@@ -1,4 +1,3 @@
-import { Image } from "@namada/components";
 import clsx from "clsx";
 import { useVaultContext } from "context";
 import { useState } from "react";
@@ -28,39 +27,30 @@ export const AppHeader = ({
 
   return (
     <>
-      <header>
-        {returnButton && (
-          <i
-            className={clsx(iconsClassList, "left-7")}
-            onClick={() => navigate(-1)}
-          >
-            <GoArrowLeft />
-          </i>
-        )}
+      {returnButton && (
+        <i
+          className={clsx(iconsClassList, "left-7")}
+          onClick={() => navigate(-1)}
+        >
+          <GoArrowLeft />
+        </i>
+      )}
 
-        {lockButton && (
-          <span
-            className={clsx(iconsClassList, "left-7")}
-            onClick={() => lock()}
-          >
-            <GoUnlock />
-          </span>
-        )}
+      {lockButton && (
+        <span className={clsx(iconsClassList, "left-7")} onClick={() => lock()}>
+          <GoUnlock />
+        </span>
+      )}
 
-        <div className="max-w-[168px] mx-auto">
-          <Image imageName="Logo" />
-        </div>
-
-        {settingsButton && (
-          <i
-            className={clsx(iconsClassList, "right-7")}
-            onClick={() => setOpen(true)}
-          >
-            <GoGear />
-          </i>
-        )}
-        <AppHeaderNavigation onClose={() => setOpen(false)} open={open} />
-      </header>
+      {settingsButton && (
+        <i
+          className={clsx(iconsClassList, "right-7")}
+          onClick={() => setOpen(true)}
+        >
+          <GoGear />
+        </i>
+      )}
+      <AppHeaderNavigation onClose={() => setOpen(false)} open={open} />
     </>
   );
 };
diff --git a/apps/extension/src/App/Common/PageHeader.tsx b/apps/extension/src/App/Common/PageHeader.tsx
@@ -5,9 +5,5 @@ type PageHeaderProps = {
 };
 
 export const PageHeader = ({ title }: PageHeaderProps): JSX.Element => {
-  return (
-    <Heading className="text-xl uppercase text-center text-white">
-      {title}
-    </Heading>
-  );
+  return <Heading className="text-xl text-center text-white">{title}</Heading>;
 };
diff --git a/apps/extension/src/App/Login.tsx b/apps/extension/src/App/Login.tsx
@@ -49,6 +49,7 @@ export const Login = ({ onLogin }: LoginProps): JSX.Element => {
   return (
     <Stack
       as="form"
+      className="py-6"
       gap={GapPatterns.TitleContent}
       onSubmit={handleSubmit}
       full
@@ -57,16 +58,15 @@ export const Login = ({ onLogin }: LoginProps): JSX.Element => {
         <Image
           styleOverrides={{
             flex: 1,
-            width: "100%",
-            maxWidth: "60%",
+            width: "220px",
             margin: "0 auto",
           }}
           imageName="LogoMinimal"
         />
       </div>
       <Stack gap={2} full>
         <Heading className="text-lg text-center text-white">
-          Enter your password to unlock
+          Enter your password
         </Heading>
         <Input
           autoFocus={true}

diff --git a/apps/extension/src/App/Settings/ChangePassword.tsx b/apps/extension/src/App/Settings/ChangePassword.tsx
@@ -5,10 +5,10 @@ import {
   ActionButton,
   Alert,
   GapPatterns,
-  Heading,
   Input,
   Stack,
 } from "@namada/components";
+import { PageHeader } from "App/Common";
 import { ResetPasswordError } from "background/vault";
 import { useVaultContext } from "context";
 
@@ -78,10 +78,8 @@ export const ChangePassword = ({
       onSubmit={handleSubmit}
       full
     >
-      <Heading className="uppercase text-2xl text-center text-white">
-        Change Password
-      </Heading>
-      <Stack full gap={GapPatterns.FormFields}>
+      <PageHeader title="Change Password" />
+      <Stack className="justify-center" full gap={GapPatterns.FormFields}>
         <Input
           label="Current password"
           variant="Password"