From 404d3c90d71c4e937c983e012965a2d09d68ba5b Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Fri, 17 Nov 2023 12:19:23 +0100
Subject: [PATCH] Update of global styles for themes

---
 dapp/src/theme/Button.ts       |  7 +++++++
 dapp/src/theme/index.ts        | 12 +++++++++++-
 dapp/src/theme/utils/colors.ts |  6 ++++++
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/dapp/src/theme/Button.ts b/dapp/src/theme/Button.ts
index ffdf107ba..ac143f407 100644
--- a/dapp/src/theme/Button.ts
+++ b/dapp/src/theme/Button.ts
@@ -2,11 +2,18 @@ import { mode } from "@chakra-ui/theme-tools"
 import type { StyleFunctionProps } from "@chakra-ui/styled-system"
 
 const Button = {
+  baseStyle: {
+    rounded: "none",
+  },
   variants: {
     solid: (props: StyleFunctionProps) => ({
       backgroundColor: mode("black", "purple")(props),
       color: "white",
     }),
+    outline: (props: StyleFunctionProps) => ({
+      color: mode("black", "grey.80")(props),
+      borderColor: mode("black", "grey.50")(props),
+    }),
   },
 }
 
diff --git a/dapp/src/theme/index.ts b/dapp/src/theme/index.ts
index 16aa51d34..454c51fc1 100644
--- a/dapp/src/theme/index.ts
+++ b/dapp/src/theme/index.ts
@@ -1,9 +1,19 @@
-import { extendTheme } from "@chakra-ui/react"
+import { StyleFunctionProps, extendTheme } from "@chakra-ui/react"
+import { mode } from "@chakra-ui/theme-tools"
 import Button from "./Button"
 import { colors } from "./utils"
 
 const defaultTheme = {
   colors,
+  styles: {
+    global: (props: StyleFunctionProps) => ({
+      "html, body, #root, #root > div": {
+        backgroundColor: mode("lightGrey", "darkGrey")(props),
+        color: mode("black", "grey.80")(props),
+        minHeight: "100vh",
+      },
+    }),
+  },
   components: {
     Button,
   },
diff --git a/dapp/src/theme/utils/colors.ts b/dapp/src/theme/utils/colors.ts
index aea5a8394..6a271c7d9 100644
--- a/dapp/src/theme/utils/colors.ts
+++ b/dapp/src/theme/utils/colors.ts
@@ -4,4 +4,10 @@ export const colors = {
   white: "#FFF",
   black: "#000",
   purple: "#7D00FF",
+  grey: {
+    50: "rgba(255, 255, 255, 0.50)",
+    80: "rgba(255, 255, 255, 0.80)",
+  },
+  lightGrey: "#ECECEC",
+  darkGrey: "#1A1B1D",
 }