From 647f359e78b21cab6166ac60ac36f8881184f783 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Fri, 17 Nov 2023 13:28:24 +0100
Subject: [PATCH] Updates for `ConnectButton`

- Ad comment about tooltip
- Add different style when an account is not defined
---
 dapp/src/components/Navbar/ConnectWallet.tsx | 3 +++
 dapp/src/theme/utils/colors.ts               | 1 +
 2 files changed, 4 insertions(+)

diff --git a/dapp/src/components/Navbar/ConnectWallet.tsx b/dapp/src/components/Navbar/ConnectWallet.tsx
index e7302cd49..62838f620 100644
--- a/dapp/src/components/Navbar/ConnectWallet.tsx
+++ b/dapp/src/components/Navbar/ConnectWallet.tsx
@@ -25,10 +25,13 @@ function ConnectButton({
   account,
   requestAccount,
 }: ConnectButtonsProps) {
+  const styles = !account ? { color: "error", borderColor: "error" } : undefined
   return (
     <Button
       variant="outline"
+      sx={styles}
       leftIcon={<Image src={leftIcon} />}
+      // TODO: Add a tooltip here
       rightIcon={!account ? <Image src={rightIcon} /> : undefined}
       onClick={requestAccount}
     >
diff --git a/dapp/src/theme/utils/colors.ts b/dapp/src/theme/utils/colors.ts
index 6a271c7d9..5ea1f1720 100644
--- a/dapp/src/theme/utils/colors.ts
+++ b/dapp/src/theme/utils/colors.ts
@@ -4,6 +4,7 @@ export const colors = {
   white: "#FFF",
   black: "#000",
   purple: "#7D00FF",
+  error: "#F00",
   grey: {
     50: "rgba(255, 255, 255, 0.50)",
     80: "rgba(255, 255, 255, 0.80)",