Color update

dapp/src/components/Header/ConnectWallet.tsx

@@ -1,12 +1,5 @@
 import React from "react"
-import {
-  Button,
-  HStack,
-  Icon,
-  Text,
-  Tooltip,
-  useColorModeValue,
-} from "@chakra-ui/react"
+import { Button, HStack, Icon, Text, Tooltip } from "@chakra-ui/react"
 import { Account } from "@ledgerhq/wallet-api-client"
 import { Bitcoin, Ethereum, Info } from "../../static/icons"
 import { BITCOIN } from "../../constants"
@@ -30,8 +23,9 @@ function ConnectButton({
   account,
   requestAccount,
 }: ConnectButtonsProps) {
-  const styles = !account ? { color: "error", borderColor: "error" } : undefined
-  const colorRightIcon = useColorModeValue("black", "grey.80")
+  const styles = !account
+    ? { color: "red.400", borderColor: "red.400" }
+    : undefined
 
   return (
     <Button
@@ -42,7 +36,7 @@ function ConnectButton({
         !account ? (
           // TODO: Add correct text for tooltip
           <Tooltip label="Template">
-            <Icon as={rightIcon} color={colorRightIcon} />
+            <Icon as={rightIcon} color="grey.700" />
           </Tooltip>
         ) : undefined
       }

dapp/src/components/Overview/PositionDetails.tsx

@@ -4,7 +4,6 @@ import {
   Button,
   Tooltip,
   Icon,
-  useColorModeValue,
   CardBody,
   Card,
   CardFooter,
@@ -22,7 +21,7 @@ export default function PositionDetails(props: CardProps) {
           <Text>Your positions</Text>
           {/* TODO: Add correct text for tooltip */}
           <Tooltip label="Template">
-            <Icon as={Info} color={useColorModeValue("black", "grey.80")} />
+            <Icon as={Info} color="grey.700" />
           </Tooltip>
         </HStack>
         <Text>

dapp/src/components/Overview/index.tsx

@@ -14,7 +14,8 @@ import { USD } from "../../constants"
 import { ChevronRight } from "../../static/icons"
 
 export default function Overview() {
-  const bg = useColorModeValue("white", "grey.400")
+  // TODO: Create a custom theme for card component
+  const bg = useColorModeValue("gold.100", "gold.100")
   return (
     <Flex direction="column" gap={2} p={6}>
       <Flex justifyContent="space-between">

dapp/src/theme/Button.ts

@@ -8,15 +8,17 @@ const Button: ComponentSingleStyleConfig = {
   },
   variants: {
     solid: (props: StyleFunctionProps) => ({
-      backgroundColor: mode("black", "purple")(props),
+      // TODO: Update when the dark theme is ready
+      backgroundColor: mode("brand.400", "brand.400")(props),
       color: "white",
     }),
     outline: (props: StyleFunctionProps) => ({
-      color: mode("black", "grey.80")(props),
-      borderColor: mode("black", "grey.50")(props),
+      // TODO: Update when the dark theme is ready
+      color: mode("grey.700", "grey.700")(props),
+      borderColor: mode("grey.700", "grey.700")(props),
     }),
     link: (props: StyleFunctionProps) => ({
-      color: mode("black", "grey.50")(props),
+      color: mode("grey.700", "grey.700")(props),
       textDecoration: "underline",
     }),
   },

dapp/src/theme/Switch.ts

@@ -5,10 +5,10 @@ const Switch: ComponentSingleStyleConfig = {
     track: {
       _checked: {
         _dark: {
-          bg: "purple",
+          bg: "grey.700",
         },
         _light: {
-          bg: "grey.200",
+          bg: "grey.700",
         },
       },
     },

dapp/src/theme/index.ts

@@ -16,8 +16,9 @@ const defaultTheme = {
   styles: {
     global: (props: StyleFunctionProps) => ({
       body: {
-        backgroundColor: mode("grey.100", "grey.300")(props),
-        color: mode("black", "grey.80")(props),
+        // TODO: Update when the dark theme is ready
+        backgroundColor: mode("gold.300", "gold.300")(props),
+        color: mode("grey.700", "grey.700")(props),
       },
     }),
   },

dapp/src/theme/utils/colors.ts

@@ -1,16 +1,56 @@
-// TODO: Currently, the correct colors have not yet been defined.
-// Let's update them later.
 export const colors = {
-  white: "#FFF",
-  black: "#000",
-  purple: "#7D00FF",
-  error: "#F00",
+  brand: {
+    100: "#FFEDEB",
+    200: "#FFC5BF",
+    300: "#FF8B7B",
+    400: "#F34900", // Acre Orange
+    500: "#B53400",
+    600: "#7A2000",
+    700: "#450E00",
+  },
+  gold: {
+    100: "#FBF7EC",
+    200: "#F8EFDA",
+    300: "#F3E5C1", // Acre Dust
+    400: "#EDD8A2",
+    500: "#EACF88",
+    600: "#E2B950",
+    700: "#D69B04", // Acre Wheat
+  },
+  green: {
+    100: "#D6F2CE",
+    200: "#AFE7A1",
+    300: "#79CA52",
+    400: "#43AD02", // Acre Grass
+    500: "#318401",
+    600: "#205C01",
+    700: "#103800",
+  },
+  blue: {
+    100: "#EEF0FF",
+    200: "#CDD4FE",
+    300: "#9AAAFD",
+    400: "#5E80FC",
+    500: "#1059E6", // Acre Aqua
+    600: "#073B9E",
+    700: "#021F5C",
+  },
+  red: {
+    100: "#FDDADA",
+    200: "#FAA3A4",
+    300: "#F86165",
+    400: "#DA1E28",
+    500: "#9A1219",
+    600: "#5F070B",
+    700: "#2B0102",
+  },
   grey: {
-    50: "rgba(255, 255, 255, 0.50)",
-    80: "rgba(255, 255, 255, 0.80)",
-    100: "#ECECEC",
-    200: "#37393C",
-    300: "#1D1E20",
-    400: "#1A1B1D",
+    100: "#F1F0F1",
+    200: "#D3D0D1",
+    300: "#AFA8A9",
+    400: "#8D8184",
+    500: "#675E60",
+    600: "#443D3F",
+    700: "#231F20", // Acre Dirt
   },
 }