Account backup UI fixes (#3270)

### What Implemented UI changes requested in: #3266 ### Testing - test if changes requested in linked PR were applied correctly Latest build: [extension-builds-3270](https://github.com/tahowallet/extension/suites/12183072896/artifacts/643338009) (as of Wed, 12 Apr 2023 12:00:49 GMT).
tahowallet · Apr 13, 2023 · 06ce3ac · 06ce3ac
2 parents c363fc0 + 96fb837
commit 06ce3ac
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 55 deletions.
diff --git a/ui/components/AccountsBackup/RevealMnemonic.tsx b/ui/components/AccountsBackup/RevealMnemonic.tsx
@@ -2,6 +2,7 @@ import { exportMnemonic } from "@tallyho/tally-background/redux-slices/keyrings"
 import { setSnackbarMessage } from "@tallyho/tally-background/redux-slices/ui"
 import React, { ReactElement, useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
+import classNames from "classnames"
 import { useBackgroundDispatch } from "../../hooks"
 import SharedButton from "../Shared/SharedButton"
 import SharedSecretText from "../Shared/SharedSecretText"
@@ -63,7 +64,11 @@ export default function RevealMnemonic({
 
   return (
     <>
-      <div className="mnemonic_container">
+      <div
+        className={classNames("mnemonic_container", {
+          small: splitIndex === 6,
+        })}
+      >
         <SharedSecretText
           text={
             <MnemonicList
@@ -96,6 +101,9 @@ export default function RevealMnemonic({
           display: flex;
           height: 370px;
         }
+        .mnemonic_container.small {
+          height: 240px;
+        }
       `}</style>
     </>
   )

diff --git a/ui/components/AccountsBackup/ShowMnemonic.tsx b/ui/components/AccountsBackup/ShowMnemonic.tsx
@@ -121,9 +121,10 @@ export default function ShowMnemonic({
           flex-direction: column;
           align-items: center;
           justify-content: space-between;
-          height: 91%;
+          height: calc(100% - 19px);
+          box-sizing: border-box;
           gap: 16px;
-          padding: 0 24px 24px;
+          padding: 0 24px 16px;
           overflow: scroll;
         }
         .content {
@@ -167,7 +168,7 @@ export default function ShowMnemonic({
           color: var(--green-40);
         }
         .account_list {
-          margin: 16px -16px 0;
+          margin: 16px -4px 0;
           display: flex;
           flex-direction: column;
           gap: 16px;

diff --git a/ui/components/AccountsBackup/ShowPrivateKey.tsx b/ui/components/AccountsBackup/ShowPrivateKey.tsx
@@ -88,8 +88,9 @@ export default function ShowPrivateKey({
             flex-direction: column;
             align-items: center;
             justify-content: space-between;
-            height: 91%;
-            padding: 0 24px 24px;
+            height: calc(100% - 35px);
+            box-sizing: border-box;
+            padding: 0 24px 10px;
           }
           .content {
             box-sizing: border-box;

diff --git a/ui/components/AccountsNotificationPanel/AccountsNotificationPanelAccounts.tsx b/ui/components/AccountsNotificationPanel/AccountsNotificationPanelAccounts.tsx
@@ -194,47 +194,48 @@ function WalletTypeHeader({
           </div>
           {sectionTitle}
         </h2>
-        {accountType !== AccountType.ReadOnly && (
-          <SharedDropdown
-            toggler={(toggle) => (
-              <SharedIcon
-                color="var(--green-40)"
-                customStyles="cursor: pointer;"
-                width={24}
-                onClick={() => toggle()}
-                icon="settings.svg"
-              />
-            )}
-            options={[
-              {
-                key: "edit",
-                icon: "icons/s/edit.svg",
-                label: t("accounts.accountItem.editName"),
-                onClick: () => setShowEditMenu(true),
-              },
-              onClickAddAddress && {
-                key: "addAddress",
-                onClick: () => {
-                  if (areKeyringsUnlocked) {
-                    onClickAddAddress()
-                  } else {
-                    history.push("/keyring/unlock")
-                  }
+        {accountType !== AccountType.ReadOnly &&
+          accountType !== AccountType.PrivateKey && (
+            <SharedDropdown
+              toggler={(toggle) => (
+                <SharedIcon
+                  color="var(--green-40)"
+                  customStyles="cursor: pointer;"
+                  width={24}
+                  onClick={() => toggle()}
+                  icon="settings.svg"
+                />
+              )}
+              options={[
+                {
+                  key: "edit",
+                  icon: "icons/s/edit.svg",
+                  label: t("accounts.accountItem.editName"),
+                  onClick: () => setShowEditMenu(true),
                 },
-                icon: "icons/s/add.svg",
-                label: t("accounts.notificationPanel.addAddress"),
-              },
-              hasMnemonic && isEnabled(FeatureFlags.SUPPORT_PRIV_KEYS)
-                ? {
-                    key: "showMnemonic",
-                    onClick: () => setShowExportMnemonicMenu(true),
-                    icon: "icons/s/lock-bold.svg",
-                    label: t("accounts.accountItem.showMnemonic.header"),
-                  }
-                : undefined,
-            ]}
-          />
-        )}
+                onClickAddAddress && {
+                  key: "addAddress",
+                  onClick: () => {
+                    if (areKeyringsUnlocked) {
+                      onClickAddAddress()
+                    } else {
+                      history.push("/keyring/unlock")
+                    }
+                  },
+                  icon: "icons/s/add.svg",
+                  label: t("accounts.notificationPanel.addAddress"),
+                },
+                hasMnemonic && isEnabled(FeatureFlags.SUPPORT_PRIV_KEYS)
+                  ? {
+                      key: "showMnemonic",
+                      onClick: () => setShowExportMnemonicMenu(true),
+                      icon: "icons/s/lock-bold.svg",
+                      label: t("accounts.accountItem.showMnemonic.header"),
+                    }
+                  : undefined,
+              ]}
+            />
+          )}
       </header>
       <SharedSlideUpMenu
         size="custom"

diff --git a/ui/components/Send/NFTCollectionAccordion.tsx b/ui/components/Send/NFTCollectionAccordion.tsx
@@ -132,7 +132,7 @@ export default function NFTCollectionAccordion({
           }
 
           .nft_list {
-            padding: 10px 0 12px;
+            padding: 10px 8px 12px;
             display: flex;
             flex-direction: column;
             gap: 8px;

diff --git a/ui/components/Shared/SharedAccordion.tsx b/ui/components/Shared/SharedAccordion.tsx
@@ -119,7 +119,6 @@ export default function SharedAccordion({
           transition: max-height ${DELAY}ms ease-out,
             opacity var(--content-fade-in-duration, 130ms) ease-in;
           opacity: 0;
-          padding: 0 8px;
         }
         .accordion_content.visible {
           max-height: ${height + 10}px;

diff --git a/ui/components/Shared/SharedButton.tsx b/ui/components/Shared/SharedButton.tsx
@@ -289,16 +289,16 @@ export default function SharedButton(
             background-color: #ffffff;
           }
           .gray {
-            color: var(--green-60);
+            color: var(--green-20);
           }
           .gray .icon_button {
-            background-color: var(--green-60);
+            background-color: var(--green-20);
           }
           .gray:hover {
-            color: var(--green-40);
+            color: var(--green-20);
           }
           .gray:hover .icon_button {
-            background-color: var(--green-40);
+            background-color: var(--green-20);
           }
           .error {
             color: var(--error);

diff --git a/ui/components/TopMenu/TopMenuConnectedDAppInfo.tsx b/ui/components/TopMenu/TopMenuConnectedDAppInfo.tsx
@@ -121,7 +121,7 @@ function ConnectionDAppGuideline({
           justify-content: space-between;
         }
         .panel_wrap {
-          padding: ${showWalletConnectInfo ? "16px 8px" : "0 8px 16px"};
+          padding: ${showWalletConnectInfo ? "16px" : "0 16px 16px"};
         }
         .wallet_connect_info p {
           margin: 0;

diff --git a/ui/pages/Onboarding/Tabbed/ImportPrivateKey.tsx b/ui/pages/Onboarding/Tabbed/ImportPrivateKey.tsx
@@ -40,6 +40,11 @@ export default function ImportPrivateKey(props: Props): ReactElement {
     keyPrefix: "onboarding.tabbed.addWallet.importPrivateKey",
   })
 
+  const onInputChange = useCallback((pk: string) => {
+    setPrivateKey(pk)
+    setErrorMessage("")
+  }, [])
+
   const importWallet = useCallback(async () => {
     const trimmedPrivateKey = privateKey.toLowerCase().trim()
     if (validatePrivateKey(trimmedPrivateKey)) {
@@ -60,7 +65,7 @@ export default function ImportPrivateKey(props: Props): ReactElement {
   return (
     <>
       <SharedSeedInput
-        onChange={(pk) => setPrivateKey(pk)}
+        onChange={onInputChange}
         label={t("inputLabel")}
         errorMessage={errorMessage}
       />

diff --git a/ui/pages/Onboarding/Tabbed/ImportSeed.tsx b/ui/pages/Onboarding/Tabbed/ImportSeed.tsx
@@ -48,6 +48,11 @@ export default function ImportSeed(props: Props): ReactElement {
 
   const history = useHistory()
 
+  const onInputChange = useCallback((seed: string) => {
+    setRecoveryPhrase(seed)
+    setErrorMessage("")
+  }, [])
+
   useEffect(() => {
     if (areKeyringsUnlocked && keyringImport === "done" && isImporting) {
       setIsImporting(false)
@@ -109,7 +114,7 @@ export default function ImportSeed(props: Props): ReactElement {
             </div>
           )}
           <SharedSeedInput
-            onChange={(seed) => setRecoveryPhrase(seed)}
+            onChange={onInputChange}
             label={t("inputLabel")}
             errorMessage={errorMessage}
           />