Improve styles for the dApp (#73)

There have been many changes in the designs. This PR updates the styles
to the current design. Not everything is fully defined in the style
guide yet, but let's keep it up to date. The scope of the changes
includes the addition of themes for individual components and minor
visual improvements.

<img width="1441" alt="Screenshot 2023-12-11 at 14 14 54"
src="https://github.com/thesis/acre/assets/23117945/0d219770-5244-4d0c-bc39-c754c2df3106">

dapp/src/components/Header/ConnectWallet.tsx

@@ -1,7 +1,7 @@
 import React from "react"
-import { Button, HStack, Icon, Text, Tooltip } from "@chakra-ui/react"
+import { Button, HStack, Icon, Text } from "@chakra-ui/react"
 import { Account } from "@ledgerhq/wallet-api-client"
-import { Bitcoin, Ethereum, Info } from "../../static/icons"
+import { Bitcoin, Ethereum } from "../../static/icons"
 import { BITCOIN } from "../../constants"
 import {
   useRequestBitcoinAccount,
@@ -12,34 +12,22 @@ import { formatSatoshiAmount, truncateAddress } from "../../utils"
 
 export type ConnectButtonsProps = {
   leftIcon: typeof Icon
-  rightIcon: typeof Icon
   account: Account | undefined
   requestAccount: () => Promise<void>
 }
 
 function ConnectButton({
   leftIcon,
-  rightIcon,
   account,
   requestAccount,
 }: ConnectButtonsProps) {
-  const styles = !account
-    ? { color: "red.400", borderColor: "red.400" }
-    : undefined
+  const colorScheme = !account ? "error" : undefined
 
   return (
     <Button
-      variant="outline"
-      sx={styles}
-      leftIcon={<Icon as={leftIcon} h={7} w={7} />}
-      rightIcon={
-        !account ? (
-          // TODO: Add correct text for tooltip
-          <Tooltip label="Template">
-            <Icon as={rightIcon} color="grey.700" />
-          </Tooltip>
-        ) : undefined
-      }
+      variant="card"
+      colorScheme={colorScheme}
+      leftIcon={<Icon as={leftIcon} boxSize={6} />}
       onClick={requestAccount}
     >
       {account ? truncateAddress(account.address) : "Not connected"}
@@ -65,15 +53,13 @@ export default function ConnectWallet() {
       </HStack>
       <ConnectButton
         leftIcon={Bitcoin}
-        rightIcon={Info}
         account={btcAccount}
         requestAccount={async () => {
           await requestBitcoinAccount()
         }}
       />
       <ConnectButton
         leftIcon={Ethereum}
-        rightIcon={Info}
         account={ethAccount}
         requestAccount={async () => {
           await requestEthereumAccount()

dapp/src/components/Header/index.tsx

@@ -6,7 +6,7 @@ import { AcreLogo } from "../../static/icons"
 export default function Header() {
   return (
     <HStack as="header" p={6}>
-      <Icon as={AcreLogo} boxSize={20} />
+      <Icon as={AcreLogo} w={20} h={12} />
       <Flex ml="auto">
         <ConnectWallet />
       </Flex>

dapp/src/components/Overview/PositionDetails.tsx

@@ -20,7 +20,7 @@ export default function PositionDetails(props: CardProps) {
         <HStack justifyContent="space-between">
           <Text>Your positions</Text>
           {/* TODO: Add correct text for tooltip */}
-          <Tooltip label="Template">
+          <Tooltip label="Template" placement="top">
             <Icon as={Info} color="grey.700" />
           </Tooltip>
         </HStack>
@@ -33,8 +33,10 @@ export default function PositionDetails(props: CardProps) {
       </CardBody>
       <CardFooter flexDirection="column" gap={2}>
         {/* TODO: Handle click actions */}
-        <Button>Stake</Button>
-        <Button variant="outline">Withdraw</Button>
+        <Button size="lg">Stake</Button>
+        <Button size="lg" variant="outline">
+          Unstake
+        </Button>
       </CardFooter>
     </Card>
   )

dapp/src/components/Overview/index.tsx

@@ -1,41 +1,39 @@
 import React from "react"
-import {
-  Button,
-  Flex,
-  Grid,
-  Icon,
-  Switch,
-  useColorModeValue,
-} from "@chakra-ui/react"
+import { Button, Flex, Grid, HStack, Icon, Switch } from "@chakra-ui/react"
 import PositionDetails from "./PositionDetails"
 import Statistics from "./Statistics"
 import TransactionHistory from "./TransactionHistory"
 import { USD } from "../../constants"
-import { ChevronRight } from "../../static/icons"
+import { ArrowUpRight } from "../../static/icons"
+import { TextSm } from "../shared/Typography"
 
 export default function Overview() {
-  // 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">
-        {/* TODO: Handle click actions */}
-        <Switch size="sm">Show values in {USD.symbol}</Switch>
-        <Button variant="link" rightIcon={<Icon as={ChevronRight} />}>
-          Read documentation
+      <Flex justifyContent="space-between" alignItems="center">
+        <HStack>
+          {/* TODO: Handle click actions */}
+          <Switch size="sm" />
+          <TextSm fontWeight="bold">Show values in {USD.symbol}</TextSm>
+        </HStack>
+        <Button
+          variant="card"
+          leftIcon={<Icon as={ArrowUpRight} color="brand.400" boxSize={4} />}
+        >
+          Docs
         </Button>
       </Flex>
       <Grid
         templateAreas={`"position-details statistics"
                         "transaction-history transaction-history"`}
         gridTemplateColumns={{ base: "30% 1fr", xl: "20% 1fr" }}
         gridTemplateRows={{ base: "55% 1fr", xl: "40% 1fr" }}
-        h="80vh"
+        h="75vh"
         gap={4}
       >
-        <PositionDetails bg={bg} gridArea="position-details" />
-        <Statistics bg={bg} gridArea="statistics" />
-        <TransactionHistory bg={bg} gridArea="transaction-history" />
+        <PositionDetails gridArea="position-details" />
+        <Statistics gridArea="statistics" />
+        <TransactionHistory gridArea="transaction-history" />
       </Grid>
     </Flex>
   )

dapp/src/static/icons/ArrowUpRight.tsx

@@ -0,0 +1,16 @@
+import React from "react"
+import { createIcon } from "@chakra-ui/react"
+
+export const ArrowUpRight = createIcon({
+  displayName: "ArrowUpRight",
+  viewBox: "0 0 16 17",
+  path: (
+    <path
+      d="M4.66602 11.8346L11.3327 5.16797M11.3327 5.16797H4.66602M11.3327 5.16797V11.8346"
+      stroke="currentcolor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  ),
+})

dapp/src/static/icons/index.ts

@@ -1,5 +1,5 @@
 export * from "./Info"
 export * from "./Bitcoin"
 export * from "./Ethereum"
-export * from "./ChevronRight"
+export * from "./ArrowUpRight"
 export * from "./AcreLogo"

dapp/src/theme/Button.ts

@@ -1,26 +1,70 @@
-import { mode } from "@chakra-ui/theme-tools"
-import type { StyleFunctionProps } from "@chakra-ui/styled-system"
-import { ComponentSingleStyleConfig } from "@chakra-ui/react"
+import {
+  ComponentSingleStyleConfig,
+  StyleFunctionProps,
+} from "@chakra-ui/react"
 
+// TODO: Update the button styles correctly when ready
 const Button: ComponentSingleStyleConfig = {
   baseStyle: {
-    rounded: "none",
+    size: "md",
+    borderRadius: "lg",
+  },
+  sizes: {
+    md: {
+      fontSize: "sm",
+      py: "0.5rem",
+    },
+    lg: {
+      fontSize: "md",
+      py: "1rem",
+    },
   },
   variants: {
-    solid: (props: StyleFunctionProps) => ({
-      // TODO: Update when the dark theme is ready
-      backgroundColor: mode("brand.400", "brand.400")(props),
+    solid: {
+      bg: "brand.400",
       color: "white",
-    }),
-    outline: (props: StyleFunctionProps) => ({
-      // 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("grey.700", "grey.700")(props),
-      textDecoration: "underline",
-    }),
+      _hover: {
+        bg: "brand.500",
+      },
+      _active: {
+        bg: "brand.400",
+      },
+    },
+    outline: {
+      color: "grey.700",
+      borderColor: "grey.700",
+      _hover: {
+        bg: "opacity.grey.700.5",
+      },
+      _active: {
+        bg: "transparent",
+      },
+    },
+    card: (props: StyleFunctionProps) => {
+      const defaultStyles = {
+        borderWidth: "2px",
+        borderColor: "gold.100",
+        borderRadius: "xl",
+        bg: "gold.200",
+        _hover: {
+          bg: "opacity.grey.700.5",
+        },
+        _active: {
+          bg: "transparent",
+        },
+      }
+
+      if (props.colorScheme === "error") {
+        return {
+          ...defaultStyles,
+          color: "red.400",
+          borderColor: "red.400",
+          bg: "transparent",
+        }
+      }
+
+      return defaultStyles
+    },
   },
 }
 

dapp/src/theme/Card.ts

@@ -0,0 +1,15 @@
+import { ComponentSingleStyleConfig } from "@chakra-ui/react"
+
+const Card: ComponentSingleStyleConfig = {
+  baseStyle: {
+    container: {
+      boxShadow: "none",
+      borderWidth: "2px",
+      borderColor: "gold.100",
+      borderRadius: "xl",
+      bg: "gold.200",
+    },
+  },
+}
+
+export default Card

dapp/src/theme/Switch.ts

@@ -3,13 +3,9 @@ import { ComponentSingleStyleConfig } from "@chakra-ui/react"
 const Switch: ComponentSingleStyleConfig = {
   baseStyle: {
     track: {
+      bg: "grey.700",
       _checked: {
-        _dark: {
-          bg: "grey.700",
-        },
-        _light: {
-          bg: "grey.700",
-        },
+        bg: "brand.400",
       },
     },
   },

dapp/src/theme/Tooltip.ts

@@ -0,0 +1,25 @@
+import {
+  ComponentSingleStyleConfig,
+  Tooltip as ChakraTooltip,
+  cssVar,
+} from "@chakra-ui/react"
+
+// Currently, there is no possibility to set all tooltips with hasArrow by
+// defaultProps. Let's override the defaultProps as follows.
+ChakraTooltip.defaultProps = { ...ChakraTooltip.defaultProps, hasArrow: true }
+
+// To make the arrow the same color as the background, the css variable needs to
+// be set correctly.
+// More info:
+// https://github.com/chakra-ui/chakra-ui/issues/4695#issuecomment-991023319
+const $arrowBg = cssVar("popper-arrow-bg")
+
+const Tooltip: ComponentSingleStyleConfig = {
+  baseStyle: {
+    borderRadius: "md",
+    bg: "grey.700",
+    [$arrowBg.variable]: "colors.grey.700",
+  },
+}
+
+export default Tooltip

dapp/src/theme/index.ts

@@ -1,14 +1,12 @@
-import { StyleFunctionProps, Tooltip, extendTheme } from "@chakra-ui/react"
+import { StyleFunctionProps, extendTheme } from "@chakra-ui/react"
 import { mode } from "@chakra-ui/theme-tools"
 import Button from "./Button"
 import Switch from "./Switch"
+import Card from "./Card"
+import Tooltip from "./Tooltip"
 import { colors, fonts, lineHeights } from "./utils"
 import Heading from "./Heading"
 
-// Currently, there is no possibility to set all tooltips with hasArrow by defaultProps.
-// Let's override the defaultProps as follows.
-Tooltip.defaultProps = { ...Tooltip.defaultProps, hasArrow: true }
-
 const defaultTheme = {
   colors,
   fonts,
@@ -26,6 +24,8 @@ const defaultTheme = {
     Button,
     Switch,
     Heading,
+    Card,
+    Tooltip,
   },
 }
 

dapp/src/theme/utils/colors.ts

@@ -53,4 +53,11 @@ export const colors = {
     600: "#443D3F",
     700: "#231F20", // Acre Dirt
   },
+  opacity: {
+    grey: {
+      700: {
+        5: "rgba(35, 31, 32, 0.05)",
+      },
+    },
+  },
 }