Improve styles for the dApp

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