Style update for the connect button

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>,
   ],

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 = {
@@ -62,7 +62,7 @@ export default function ConnectWallet() {
         }}
       />
       <ConnectButton
-        leftIcon={Ethereum}
+        leftIcon={EthereumIcon}
         account={ethAccount}
         requestAccount={async () => {
           await requestEthereumAccount()

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",
+          },
         }
       }