From fc1ee5a9e2ccd39d3f6a32c8a4fefd40a50106ae Mon Sep 17 00:00:00 2001
From: ioay <ayioerthi@gmail.com>
Date: Sun, 28 Jan 2024 15:48:47 +0100
Subject: [PATCH 1/2] Update theme for connect buttons

---
 dapp/src/assets/icons/Ethereum.tsx           | 40 ++++++--------------
 dapp/src/components/Header/ConnectWallet.tsx |  6 +--
 dapp/src/theme/Button.ts                     | 13 ++++---
 3 files changed, 22 insertions(+), 37 deletions(-)

diff --git a/dapp/src/assets/icons/Ethereum.tsx b/dapp/src/assets/icons/Ethereum.tsx
index b3c5c5633..27cf854c6 100644
--- a/dapp/src/assets/icons/Ethereum.tsx
+++ b/dapp/src/assets/icons/Ethereum.tsx
@@ -1,40 +1,22 @@
 import React from "react"
 import { createIcon } from "@chakra-ui/react"
 
-export const Ethereum = createIcon({
-  displayName: "Ethereum",
-  viewBox: "0 0 28 28",
+export const EthereumIcon = createIcon({
+  displayName: "EthereumIcon",
+  viewBox: "0 0 24 25",
   path: [
-    <g clipPath="url(#clip0_2093_38934)">
-      <rect width="28" height="28" rx="14" fill="#232323" />
+    <g clipPath="url(#clip0_5544_5047)">
+      <rect y="0.5" width="24" height="24" rx="12" fill="#232323" />
       <path
-        d="M13.9984 3.6004L13.8564 4.07437V17.8278L13.9984 17.967L20.4964 14.1933L13.9984 3.6004Z"
-        fill="#4E4E4E"
-      />
-      <path
-        d="M13.9981 3.6004L7.5 14.1933L13.9981 17.967V11.2915V3.6004Z"
-        fill="#C5C5C5"
-      />
-      <path
-        d="M13.9979 19.1767L13.918 19.2725V24.1717L13.9979 24.4013L20.4999 15.4049L13.9979 19.1767Z"
-        fill="#3C3C3B"
-      />
-      <path
-        d="M13.9981 24.4013V19.1767L7.5 15.4049L13.9981 24.4013Z"
-        fill="#C5C5C5"
-      />
-      <path
-        d="M13.998 17.9672L20.496 14.1936L13.998 11.2918V17.9672Z"
-        fill="#141414"
-      />
-      <path
-        d="M7.5 14.1936L13.998 17.9672V11.2918L7.5 14.1936Z"
-        fill="#393939"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.9992 3.5864L11.9995 3.58594V3.58685L17.5687 12.6656L11.9995 15.8998V15.9002L11.9991 15.9L11.9989 15.9001L11.9982 15.8994L6.42969 12.6656L11.9984 3.58773L11.9989 3.58594L11.9992 3.5864ZM11.9993 21.4151L6.42969 13.7041L11.9994 16.9371L17.5724 13.7041L11.9995 21.4152V21.4153L11.9994 21.4153L11.9994 21.4153L11.9993 21.4151Z"
+        fill="#F9F2DF"
       />
     </g>,
     <defs>
-      <clipPath id="clip0_2093_38934">
-        <rect width="28" height="28" rx="14" fill="white" />
+      <clipPath id="clip0_5544_5047">
+        <rect y="0.5" width="24" height="24" rx="12" fill="white" />
       </clipPath>
     </defs>,
   ],
diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx
index 5e2445406..f1f3546f6 100644
--- a/dapp/src/components/Header/ConnectWallet.tsx
+++ b/dapp/src/components/Header/ConnectWallet.tsx
@@ -8,7 +8,7 @@ import {
 } from "#/hooks"
 import { CurrencyBalance } from "#/components/shared/CurrencyBalance"
 import { TextMd } from "#/components/shared/Typography"
-import { Bitcoin, Ethereum } from "#/assets/icons"
+import { Bitcoin, EthereumIcon } from "#/assets/icons"
 import { truncateAddress, asyncWrapper } from "#/utils"
 
 export type ConnectButtonsProps = {
@@ -22,7 +22,7 @@ function ConnectButton({
   account,
   requestAccount,
 }: ConnectButtonsProps) {
-  const colorScheme = !account ? "error" : undefined
+  const colorScheme = !account ? "error" : "gold"
 
   const handleClick = () => {
     asyncWrapper(requestAccount())
@@ -62,7 +62,7 @@ export default function ConnectWallet() {
         }}
       />
       <ConnectButton
-        leftIcon={Ethereum}
+        leftIcon={EthereumIcon}
         account={ethAccount}
         requestAccount={async () => {
           await requestEthereumAccount()
diff --git a/dapp/src/theme/Button.ts b/dapp/src/theme/Button.ts
index 66884f78b..e318c7032 100644
--- a/dapp/src/theme/Button.ts
+++ b/dapp/src/theme/Button.ts
@@ -66,12 +66,13 @@ export const buttonTheme: ComponentSingleStyleConfig = {
     // FIXME: It should be removed and replaced by solid/outline variants
     card: ({ colorScheme }: StyleFunctionProps) => {
       const defaultStyles = {
-        borderWidth: "2px",
+        fontWeight: "medium",
+        borderWidth: "1px",
         borderColor: "gold.100",
-        borderRadius: "xl",
         bg: "gold.200",
         _hover: {
-          bg: "opacity.grey.700.05",
+          bg: "transparent",
+          borderColor: "grey.500",
         },
         _active: {
           bg: "transparent",
@@ -82,8 +83,10 @@ export const buttonTheme: ComponentSingleStyleConfig = {
         return {
           ...defaultStyles,
           color: "red.400",
-          borderColor: "red.400",
-          bg: "transparent",
+          _hover: {
+            bg: "transparent",
+            borderColor: "red.400",
+          },
         }
       }
 

From 4d39f44c6f2e79f907051cbbbd647d92d0909dbd Mon Sep 17 00:00:00 2001
From: ioay <ayioerthi@gmail.com>
Date: Wed, 31 Jan 2024 18:47:53 +0100
Subject: [PATCH 2/2] Update colorSchema for connectWallet button

---
 dapp/src/components/Header/ConnectWallet.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx
index f1f3546f6..038a069ff 100644
--- a/dapp/src/components/Header/ConnectWallet.tsx
+++ b/dapp/src/components/Header/ConnectWallet.tsx
@@ -22,7 +22,7 @@ function ConnectButton({
   account,
   requestAccount,
 }: ConnectButtonsProps) {
-  const colorScheme = !account ? "error" : "gold"
+  const colorScheme = !account ? "error" : undefined
 
   const handleClick = () => {
     asyncWrapper(requestAccount())