From de0e61a32224b76be83097ad235ed4aabda05ced Mon Sep 17 00:00:00 2001
From: robhyrk <rob.hyrkiel@gmail.com>
Date: Thu, 23 May 2024 16:00:18 -0400
Subject: [PATCH 1/2] style: add dropdown icon, remove old styling

---
 components/account/AccountSelect.tsx      | 53 ++++++++++-------------
 components/account/AccountSelectValue.tsx | 28 +++++++-----
 components/ui/CopyIcon.tsx                |  2 +-
 3 files changed, 40 insertions(+), 43 deletions(-)

diff --git a/components/account/AccountSelect.tsx b/components/account/AccountSelect.tsx
index dc5e89125..44f16925d 100644
--- a/components/account/AccountSelect.tsx
+++ b/components/account/AccountSelect.tsx
@@ -9,6 +9,7 @@ import Select, {
   SingleValueProps,
   StylesConfig,
 } from "react-select";
+import { IoIosArrowDropdownCircle } from "react-icons/io";
 
 import CopyIcon from "../ui/CopyIcon";
 import AccountSelectOption from "./AccountSelectOption";
@@ -19,7 +20,7 @@ export type AccountOption = { label: string; value: string };
 const Control = ({ children, ...rest }: ControlProps<AccountOption, false>) => {
   return (
     <components.Control {...(rest as ControlProps)}>
-      <div className="flex cursor-pointer items-center justify-between rounded-ztg-10 bg-sky-100 dark:bg-black">
+      <div className="flex cursor-pointer items-center justify-between rounded-lg bg-sky-100">
         {children}
       </div>
     </components.Control>
@@ -28,7 +29,6 @@ const Control = ({ children, ...rest }: ControlProps<AccountOption, false>) => {
 
 const Option = (props: OptionProps<AccountOption, false>) => {
   const { label, value } = props.data;
-
   return (
     <components.Option {...props} className="bg-black">
       <AccountSelectOption name={label} address={value} />
@@ -47,7 +47,7 @@ const DropdownIndicator = () => {
 };
 
 const IndicatorSeparator = () => {
-  return <></>;
+  return null;
 };
 
 const customStyles: StylesConfig<AccountOption> = {
@@ -98,34 +98,25 @@ const AccountSelect: FC<AccountSelectProps> = ({
   const wallet = useWallet();
 
   return (
-    <div className="flex h-ztg-50 w-full items-center rounded-ztg-10 bg-sky-100 dark:bg-black">
-      <div className="flex-1">
-        <Select
-          isSearchable={false}
-          options={options}
-          styles={customStyles}
-          value={value}
-          isMulti={false}
-          isDisabled={disabled}
-          placeholder="Select an account"
-          components={{
-            Control,
-            Option,
-            SingleValue,
-            DropdownIndicator,
-            IndicatorSeparator,
-          }}
-          onChange={onChange}
-        />
-      </div>
-
-      {wallet.activeAccount?.address && (
-        <CopyIcon
-          copyText={wallet.activeAccount?.address}
-          className="w-auto pr-ztg-8"
-          size={16}
-        />
-      )}
+    <div className="flex w-full items-center justify-center rounded-lg bg-sky-100 px-1">
+      <Select
+        isSearchable={false}
+        options={options}
+        styles={customStyles}
+        value={value}
+        isMulti={false}
+        isDisabled={disabled}
+        placeholder="Select an account"
+        components={{
+          Control,
+          Option,
+          SingleValue,
+          DropdownIndicator,
+          IndicatorSeparator,
+        }}
+        onChange={onChange}
+      />
+      {wallet.activeAccount?.address && <IoIosArrowDropdownCircle size={22} />}
     </div>
   );
 };
diff --git a/components/account/AccountSelectValue.tsx b/components/account/AccountSelectValue.tsx
index 57887ba1f..fe8522563 100644
--- a/components/account/AccountSelectValue.tsx
+++ b/components/account/AccountSelectValue.tsx
@@ -1,30 +1,36 @@
 import Avatar from "components/ui/Avatar";
 import { shortenAddress } from "lib/util";
-
+import CopyIcon from "../ui/CopyIcon";
 import React, { FC } from "react";
-
+import { useWallet } from "lib/state/wallet";
 export interface AccountSelectValueProps {
   name: string;
   address: string;
 }
 
 const AccountSelectValue: FC<AccountSelectValueProps> = ({ name, address }) => {
+  const wallet = useWallet();
   return (
-    <div className="flex h-full  w-full items-center rounded-ztg-10 bg-sky-100 px-ztg-8 dark:bg-black">
-      <div className="center h-ztg-28 w-ztg-28 rounded-full bg-white dark:bg-sky-1000">
-        <div className="h-ztg-22 w-ztg-22 rounded-full bg-sky-100 dark:bg-black">
+    <div className="flex h-full w-full items-center rounded-lg bg-sky-100 px-2">
+      <div className="center rounded-full bg-white">
+        <div className="rounded-full bg-sky-100">
           <Avatar zoomed address={address} />
         </div>
       </div>
-      <div className="ml-ztg-16 flex flex-col">
-        <div className="text-ztg-10-150 font-bold uppercase text-sky-600">
-          {name}
-        </div>
-        <div className="font-mono text-ztg-12-120 font-semibold md:hidden">
+      <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">
           {shortenAddress(address, 8, 12)}
         </div>
-        <div className="hidden font-mono text-ztg-12-120 font-semibold md:block">
+        <div className="hidden font-mono text-xs font-semibold md:flex">
           {address}
+          {wallet.activeAccount?.address && (
+            <CopyIcon
+              copyText={wallet.activeAccount?.address}
+              className="w-auto px-1"
+              size={12}
+            />
+          )}
         </div>
       </div>
     </div>
diff --git a/components/ui/CopyIcon.tsx b/components/ui/CopyIcon.tsx
index 8bb71e534..24333b85e 100644
--- a/components/ui/CopyIcon.tsx
+++ b/components/ui/CopyIcon.tsx
@@ -39,7 +39,7 @@ const CopyIcon: FC<CopyIconProps> = ({
   }, [recentlyCopied]);
 
   return (
-    <div className={"relative flex w-ztg-20 items-center " + className}>
+    <div className={"relative flex items-center " + className}>
       <Copy
         size={size}
         role="button"

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 2/2] 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>