Merge pull request #274 from terra-money/fix/icons-styling

fix: icons and styling

src/app/sections/DashboardButton.tsx

@@ -1,15 +1,28 @@
-import React, { ForwardedRef, forwardRef } from 'react';
-import { ReactComponent as Dashboard } from "styles/images/icons/Dashboard.svg";
-import HeaderIconButton from "app/components/HeaderIconButton";
-import { STATION } from "config/constants";
+import { DashboardIcon, Tooltip } from "@terra-money/station-ui"
+import { useTranslation } from "react-i18next"
+import { STATION } from "config/constants"
 
-const DashboardButton = forwardRef((_, ref: ForwardedRef<HTMLButtonElement>) => {
-    const openDashboard = () =>  window.open(STATION, "_blank");
-    return (
-        <HeaderIconButton onClick={openDashboard} ref={ref}>
-            <Dashboard style={{ height: 18, color: "var(--token-dark-900)" }} />
-        </HeaderIconButton>
-    );
-});
+const DashboardButton = () => {
+  const openDashboard = () => window.open(STATION, "_blank")
+  const { t } = useTranslation()
 
-export default DashboardButton;
+  return (
+    <Tooltip
+      content={t("Dashboard")}
+      children={
+        <DashboardIcon
+          width={18}
+          height={18}
+          onClick={openDashboard}
+          style={{
+            cursor: "pointer",
+            margin: "24px 12px 16px 16px",
+          }}
+          fill={"var(--token-dark-900)"}
+        />
+      }
+    />
+  )
+}
+
+export default DashboardButton

src/app/sections/settings/SettingsButton.tsx

@@ -0,0 +1,22 @@
+import { SettingsIcon } from "@terra-money/station-ui"
+import { useNavigate } from "react-router-dom"
+
+const SettingsButton = () => {
+  const navigate = useNavigate()
+
+  return (
+    <SettingsIcon
+      width={18}
+      height={18}
+      onClick={() => navigate("/preferences")}
+      style={{
+        cursor: "pointer",
+        marginTop: "24px",
+        marginBottom: "16px",
+      }}
+      fill={"var(--token-dark-900)"}
+    />
+  )
+}
+
+export default SettingsButton

src/extension/App.tsx

@@ -1,45 +1,42 @@
-import { useEffect } from "react"
-import { useRoutes, useLocation } from "react-router-dom"
-import { useAddress, useChainID, useNetworkName } from "data/wallet"
-import { ErrorBoundary, Wrong } from "components/feedback"
-import InitBankBalance from "app/InitBankBalance"
-import LatestTx from "app/sections/LatestTx"
-import NetworkHeader from "app/sections/NetworkHeader"
-import SwapTx from "txs/swap/SwapTx"
-import SignMultisigTxPage from "pages/multisig/SignMultisigTxPage"
-import PostMultisigTxPage from "pages/multisig/PostMultisigTxPage"
 import {
   clearWalletAddress,
   storeNetwork,
   storeTheme,
   storeWalletAddress,
 } from "./storage"
-import RequestContainer from "./RequestContainer"
-import ManageNetworks from "./networks/ManageNetworks"
-import AddNetworkPage from "./networks/AddNetworkPage"
-import Auth from "./auth/Auth"
-import Header from "./layouts/Header"
-import Front from "./modules/Front"
 import { useAllInterchainAddresses, usePubkey } from "auth/hooks/useAddress"
-import { Flex } from "components/layout"
-import NetworkStatus from "components/display/NetworkStatus"
 import PreferencesRouter from "app/sections/settings/PreferencesRouter"
-import { useAuth } from "auth"
-import is from "auth/scripts/is"
-import { useNetworks } from "app/InitNetworks"
-import { useTheme } from "data/settings/Theme"
-import EnableCoinType from "app/sections/EnableCoinType"
-import ChangeLogModal from "./update/ChangeLogModal"
-import Welcome from "./modules/Welcome"
-import ExtensionPage from "./components/ExtensionPage"
-import { getErrorMessage } from "utils/error"
+import { useAddress, useChainID, useNetworkName } from "data/wallet"
+import SignMultisigTxPage from "pages/multisig/SignMultisigTxPage"
+import PostMultisigTxPage from "pages/multisig/PostMultisigTxPage"
+import SettingsButton from "app/sections/settings/SettingsButton"
 import ManageWalletsButton from "./auth/ManageWalletsButton"
+import NetworkStatus from "components/display/NetworkStatus"
+import { ErrorBoundary, Wrong } from "components/feedback"
 import ManageWalletRouter from "./auth/ManageWalletRouter"
-import PreferencesButton from "app/sections/settings/PreferencesButton"
 import DashboardButton from "app/sections/DashboardButton"
-import { Tooltip } from "@terra-money/station-ui"
-import { useTranslation } from "react-i18next"
-import Forgot from "./modules/Forgot"
+import { useRoutes, useLocation } from "react-router-dom"
+import EnableCoinType from "app/sections/EnableCoinType"
+import NetworkHeader from "app/sections/NetworkHeader"
+import ManageNetworks from "./networks/ManageNetworks"
+import AddNetworkPage from "./networks/AddNetworkPage"
+import ExtensionPage from "./components/ExtensionPage"
+import ChangeLogModal from "./update/ChangeLogModal"
+import RequestContainer from "./RequestContainer"
+import InitBankBalance from "app/InitBankBalance"
+import { useNetworks } from "app/InitNetworks"
+import { useTheme } from "data/settings/Theme"
+import { getErrorMessage } from "utils/error"
+import LatestTx from "app/sections/LatestTx"
+import { Flex } from "components/layout"
+import Welcome from "./modules/Welcome"
+import Header from "./layouts/Header"
+import SwapTx from "txs/swap/SwapTx"
+import Front from "./modules/Front"
+import { useEffect } from "react"
+import is from "auth/scripts/is"
+import { useAuth } from "auth"
+import Auth from "./auth/Auth"
 
 const App = () => {
   const { networks } = useNetworks()
@@ -50,7 +47,6 @@ const App = () => {
   const addresses = useAllInterchainAddresses()
   const { name: theme } = useTheme()
   const { wallet } = useAuth()
-  const { t } = useTranslation()
 
   useEffect(() => {
     storeNetwork({ ...networks[name][chainID], name }, networks[name])
@@ -113,8 +109,8 @@ const App = () => {
               <LatestTx />
               <EnableCoinType />
               <NetworkStatus />
-              <PreferencesButton />
-              <Tooltip content={t("Dashboard")} children={<DashboardButton />} />
+              <SettingsButton />
+              <DashboardButton />
             </Flex>
           </Header>
         )}

src/extension/auth/ManageWalletsButton.module.scss

@@ -2,7 +2,7 @@
 
 .manage__wallets {
   @include flex(flex-start);
-  gap: 12px;
+  gap: 8px;
   padding-inline: 10px;
   color: var(--token-dark-900);
 }

src/extension/auth/ManageWalletsButton.tsx

@@ -1,64 +1,82 @@
-import { useAuth } from "auth";
-import { bech32 } from "bech32";
-import is from "auth/scripts/is";
-import styles from "./ManageWalletsButton.module.scss";
-// icons
-import { ReactComponent as WalletIcon } from "styles/images/icons/Wallet.svg";
-import UsbIcon from "@mui/icons-material/Usb";
-import BluetoothIcon from "@mui/icons-material/Bluetooth";
-import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
-import { useNavigate } from "react-router-dom";
-import { forwardRef, ForwardedRef } from "react";
-import { useTranslation } from "react-i18next";
+import {
+  DropdownArrowIcon,
+  LedgerIcon,
+  WalletIcon,
+} from "@terra-money/station-ui"
+import BluetoothIcon from "@mui/icons-material/Bluetooth"
+import styles from "./ManageWalletsButton.module.scss"
+import { forwardRef, ForwardedRef } from "react"
+import { useTranslation } from "react-i18next"
+import { useNavigate } from "react-router-dom"
+import is from "auth/scripts/is"
+import { bech32 } from "bech32"
+import { useAuth } from "auth"
 
-const ManageWalletsButton = forwardRef((_, ref: ForwardedRef<HTMLButtonElement>) => {
-  const navigate = useNavigate();
-  const { wallet, wallets } = useAuth();
-  const { t } = useTranslation();
+const ManageWalletsButton = forwardRef(
+  (_, ref: ForwardedRef<HTMLButtonElement>) => {
+    const navigate = useNavigate()
+    const { wallet, wallets } = useAuth()
+    const { t } = useTranslation()
 
-  const selectedWallet = wallets.find((w) => {
-    if ("words" in w) {
-      return w.words["330"] === wallet?.words["330"];
-    } else {
+    const selectedWallet = wallets.find((w) => {
+      if ("words" in w) {
+        return w.words["330"] === wallet?.words["330"]
+      } else {
+        return (
+          Buffer.from(bech32.decode(w.address).words).toString("hex") ===
+          wallet?.words["330"]
+        )
+      }
+    })
+
+    const isLedger = is.ledger(wallet)
+
+    if (!selectedWallet && !isLedger) {
       return (
-        Buffer.from(bech32.decode(w.address).words).toString("hex") ===
-        wallet?.words["330"]
-      );
+        <button
+          className={styles.manage__wallets}
+          onClick={() => navigate("/")}
+          ref={ref}
+        >
+          <WalletIcon width={18} height={18} fill={"var(--token-dark-900)"} />{" "}
+          {t("Connect wallet")}
+        </button>
+      )
     }
-  });
-
-  const isLedger = is.ledger(wallet);
 
-  if (!selectedWallet && !isLedger) {
     return (
-      <button className={styles.manage__wallets} onClick={() => navigate("/")} ref={ref}>
-        <WalletIcon style={{ fontSize: 18 }} /> {t("Connect wallet")}
+      <button
+        className={styles.manage__wallets}
+        style={{ margin: "24px 0px 16px 2px" }}
+        data-testid="manage-wallets-button"
+        onClick={() => navigate("/manage-wallet/select")}
+        ref={ref}
+      >
+        {isLedger ? (
+          wallet.bluetooth ? (
+            <BluetoothIcon
+              style={{ fontSize: "18px", color: "var(--token-dark-900)" }}
+            />
+          ) : (
+            <LedgerIcon width={18} height={18} fill={"var(--token-dark-900)"} />
+          )
+        ) : (
+          <WalletIcon width={18} height={18} fill={"var(--token-dark-900)"} />
+        )}{" "}
+        <div className={styles.selector}>
+          <span>{wallet && "name" in wallet ? wallet.name : "Ledger"}</span>
+          <DropdownArrowIcon
+            style={{
+              marginLeft: "8px",
+            }}
+            fill={"var(--token-dark-900)"}
+            width={13}
+            height={13}
+          />
+        </div>
       </button>
-    );
+    )
   }
+)
 
-  return (
-    <button
-      className={styles.manage__wallets}
-      data-testid="manage-wallets-button"
-      onClick={() => navigate("/manage-wallet/select")}
-      ref={ref}
-    >
-      {isLedger ? (
-        wallet.bluetooth ? (
-          <BluetoothIcon style={{ fontSize: 18 }} />
-        ) : (
-          <UsbIcon style={{ fontSize: 18 }} />
-        )
-      ) : (
-        <WalletIcon style={{ fontSize: 18 }} />
-      )}{" "}
-      <div className={styles.selector}>
-        <span>{wallet && "name" in wallet ? wallet.name : "Ledger"}</span>
-        <ArrowDropDownIcon />
-      </div>
-    </button>
-  );
-});
-
-export default ManageWalletsButton;
+export default ManageWalletsButton

src/extension/auth/MigrateWalletPage.tsx

@@ -28,7 +28,6 @@ import Overlay from "app/components/Overlay"
 import decrypt from "auth/scripts/decrypt"
 import { useForm } from "react-hook-form"
 import { useState } from "react"
-import useAuth from "../../auth/hooks/useAuth"
 
 export type MigratedWalletResult =
   | {

src/extension/modules/Forgot.tsx

@@ -1,38 +1,38 @@
-import ExtensionPage from "extension/components/ExtensionPage";
+import ExtensionPage from "extension/components/ExtensionPage"
 import {
   LockIcon,
   Banner,
   Checkbox,
   Button,
   Grid,
   Form,
-} from "@terra-money/station-ui";
-import { useTranslation } from "react-i18next";
-import styles from "./Login.module.scss";
-import { useForm } from "react-hook-form";
-import { useNavigate } from "react-router-dom";
-import { FlexColumn } from "components/layout";
+} from "@terra-money/station-ui"
+import { useTranslation } from "react-i18next"
+import styles from "./Login.module.scss"
+import { useForm } from "react-hook-form"
+import { useNavigate } from "react-router-dom"
+import { FlexColumn } from "components/layout"
 
 interface Values {
-  checked: boolean;
+  checked: boolean
 }
 
 const Forgot = () => {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
+  const { t } = useTranslation()
+  const navigate = useNavigate()
   const form = useForm<Values>({
     mode: "onChange",
     defaultValues: { checked: false },
-  });
+  })
   const reset = async () => {
     window.location.reload()
-    localStorage.clear();
-    sessionStorage.clear();
-    navigate("/");
-  };
+    localStorage.clear()
+    sessionStorage.clear()
+    navigate("/")
+  }
 
-  const { register, watch } = form;
-  const { checked } = watch();
+  const { register, watch } = form
+  const { checked } = watch()
 
   return (
     <ExtensionPage title={t("Forgot Password?")} backButtonPath="/" fullHeight>
@@ -71,7 +71,7 @@ const Forgot = () => {
         </Grid>
       </Form>
     </ExtensionPage>
-  );
-};
+  )
+}
 
 export default Forgot