From 250eec66a9a1836ac46cfc0612c3bfad27ce4c20 Mon Sep 17 00:00:00 2001
From: robhyrk <rob.hyrkiel@gmail.com>
Date: Fri, 24 May 2024 16:01:44 -0400
Subject: [PATCH] styles: remove old styling, add dropdown icon, update styles

---
 components/account/AccountModalContent.tsx | 29 +++++++++++-----------
 components/account/AccountModalHead.tsx    |  4 +--
 components/account/AccountSelect.tsx       | 12 ++++++---
 components/account/AccountSelectValue.tsx  | 12 ++++-----
 components/ui/CopyIcon.tsx                 |  2 +-
 5 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/components/account/AccountModalContent.tsx b/components/account/AccountModalContent.tsx
index 03cfb56ec..4b716fa29 100644
--- a/components/account/AccountModalContent.tsx
+++ b/components/account/AccountModalContent.tsx
@@ -5,6 +5,7 @@ import { useWallet } from "lib/state/wallet";
 import { useZtgBalance } from "lib/hooks/queries/useZtgBalance";
 import { ZTG } from "@zeitgeistpm/sdk";
 import { useChainConstants } from "lib/hooks/queries/useChainConstants";
+import { formatNumberLocalized } from "lib/util";
 
 const AccountModalContent: FC = () => {
   const { activeAccount, disconnectWallet, accounts, selectAccount } =
@@ -38,26 +39,26 @@ const AccountModalContent: FC = () => {
         value={value}
         onChange={onAccountChange}
       />
-      <div className="mt-ztg-15 flex h-ztg-50 items-center justify-between">
-        <div className="flex h-full flex-grow items-center rounded-ztg-10 bg-sky-100 dark:bg-black">
-          <div className="flex items-center px-ztg-8">
-            <div className="center h-ztg-28 w-ztg-28 rounded-full bg-white dark:bg-sky-1000">
-              <div className="center h-ztg-22 w-ztg-22 rounded-full bg-sky-100 dark:bg-black">
-                <div className="center h-ztg-16 w-ztg-16 rounded-full bg-border-dark dark:bg-sky-1000">
+      <div className="mt-4 flex h-12.5 items-center justify-between">
+        <div className="flex h-full w-full items-center rounded-lg bg-sky-100 px-2">
+          <div className="flex items-center px-2">
+            <div className="center rounded-full bg-white">
+              <div className="center rounded-full bg-sky-100">
+                <div className="center h-6 w-6 rounded-full">
                   <img
-                    src="/icons/acc-balance.svg"
+                    src="/currencies/ztg.svg"
                     alt="Account balance"
                     style={{ marginTop: "-1px" }}
                   />
                 </div>
               </div>
             </div>
-            <div className="ml-ztg-16 flex flex-col">
-              <div className="text-ztg-10-150 font-bold uppercase text-sky-600">
+            <div className="ml-4 flex flex-col">
+              <div className="text-xxs font-bold uppercase text-sky-600">
                 balance
               </div>
-              <div className="font-mono text-ztg-14-120 font-bold text-sheen-green">
-                {`${activeBalance?.div(ZTG).toFixed(4)} ${
+              <div className="font-mono text-sm font-bold text-blue">
+                {`${formatNumberLocalized(Number(activeBalance?.div(ZTG)))} ${
                   constants?.tokenSymbol ?? ""
                 }` ?? "---"}
               </div>
@@ -65,13 +66,13 @@ const AccountModalContent: FC = () => {
           </div>
         </div>
         <div
-          className="ml-ztg-16 flex h-full w-ztg-176 cursor-pointer items-center justify-evenly rounded-ztg-10 bg-border-light text-white dark:bg-sky-700"
+          className="ml-4 flex h-12.5 cursor-pointer items-center justify-center gap-2 rounded-lg bg-border-light px-2 text-white md:w-44"
           onClick={() => {
             disconnectWallet();
           }}
         >
-          <div className=" text-ztg-16-150 capitalize">disconnect</div>
-          <LogOut size={16} className="-ml-ztg-30 text-white" />
+          <div className="capitalize">disconnect</div>
+          <LogOut size={16} className="text-white" />
         </div>
       </div>
     </div>
diff --git a/components/account/AccountModalHead.tsx b/components/account/AccountModalHead.tsx
index 26a1b4540..4260f15fd 100644
--- a/components/account/AccountModalHead.tsx
+++ b/components/account/AccountModalHead.tsx
@@ -9,9 +9,9 @@ const AccountModalHead = () => {
 
   return (
     <div className="flex flex-row justify-between">
-      <div className="text-ztg-16-150 font-bold text-black">Account</div>
+      <div className="text-lg font-bold">Account</div>
       <div
-        className="mr-ztg-7 cursor-pointer underline"
+        className="cursor-pointer rounded-lg border-2 border-gray-300 px-1 hover:border-gray-400"
         onClick={() => {
           switchExtension();
         }}
diff --git a/components/account/AccountSelect.tsx b/components/account/AccountSelect.tsx
index 44f16925d..80fce4785 100644
--- a/components/account/AccountSelect.tsx
+++ b/components/account/AccountSelect.tsx
@@ -9,8 +9,6 @@ import Select, {
   SingleValueProps,
   StylesConfig,
 } from "react-select";
-import { IoIosArrowDropdownCircle } from "react-icons/io";
-
 import CopyIcon from "../ui/CopyIcon";
 import AccountSelectOption from "./AccountSelectOption";
 import AccountSelectValue from "./AccountSelectValue";
@@ -98,7 +96,7 @@ const AccountSelect: FC<AccountSelectProps> = ({
   const wallet = useWallet();
 
   return (
-    <div className="flex w-full items-center justify-center rounded-lg bg-sky-100 px-1">
+    <div className="flex w-full items-center justify-between rounded-lg bg-sky-100 px-2">
       <Select
         isSearchable={false}
         options={options}
@@ -116,7 +114,13 @@ const AccountSelect: FC<AccountSelectProps> = ({
         }}
         onChange={onChange}
       />
-      {wallet.activeAccount?.address && <IoIosArrowDropdownCircle size={22} />}
+      {wallet.activeAccount?.address && (
+        <CopyIcon
+          copyText={wallet.activeAccount?.address}
+          className="w-auto px-1"
+          size={18}
+        />
+      )}
     </div>
   );
 };
diff --git a/components/account/AccountSelectValue.tsx b/components/account/AccountSelectValue.tsx
index fe8522563..3d2b2cfb7 100644
--- a/components/account/AccountSelectValue.tsx
+++ b/components/account/AccountSelectValue.tsx
@@ -1,6 +1,7 @@
 import Avatar from "components/ui/Avatar";
 import { shortenAddress } from "lib/util";
 import CopyIcon from "../ui/CopyIcon";
+import { IoIosArrowDropdownCircle } from "react-icons/io";
 import React, { FC } from "react";
 import { useWallet } from "lib/state/wallet";
 export interface AccountSelectValueProps {
@@ -19,17 +20,14 @@ const AccountSelectValue: FC<AccountSelectValueProps> = ({ name, address }) => {
       </div>
       <div className="ml-4 flex flex-col">
         <div className="text-xxs font-bold uppercase text-sky-600">{name}</div>
-        <div className="font-mono text-sm font-semibold md:hidden">
+        <div className="flex items-center gap-1 font-mono text-sm font-semibold md:hidden">
           {shortenAddress(address, 8, 12)}
+          <IoIosArrowDropdownCircle size={16} />
         </div>
-        <div className="hidden font-mono text-xs font-semibold md:flex">
+        <div className="hidden gap-1 font-mono text-sm font-semibold md:flex">
           {address}
           {wallet.activeAccount?.address && (
-            <CopyIcon
-              copyText={wallet.activeAccount?.address}
-              className="w-auto px-1"
-              size={12}
-            />
+            <IoIosArrowDropdownCircle size={18} />
           )}
         </div>
       </div>
diff --git a/components/ui/CopyIcon.tsx b/components/ui/CopyIcon.tsx
index 24333b85e..d3e640f9c 100644
--- a/components/ui/CopyIcon.tsx
+++ b/components/ui/CopyIcon.tsx
@@ -57,7 +57,7 @@ const CopyIcon: FC<CopyIconProps> = ({
         leaveTo="transform opacity-0 :scale-95"
       >
         <div className="absolute right-0 top-[50%] translate-x-[100%] translate-y-[-50%] pl-2">
-          <div className="rounded-md bg-black bg-opacity-30 p-1 text-sm text-white">
+          <div className="rounded-md bg-black p-1 text-sm text-white">
             Copied!
           </div>
         </div>