Add basic styles for the Modal, Drawer, Sidebar

thesis · Dec 11, 2023 · e32f154 · e32f154
1 parent 7cd3446
commit e32f154
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 29 deletions.
diff --git a/dapp/src/components/DocsDrawer/index.tsx b/dapp/src/components/DocsDrawer/index.tsx
@@ -4,7 +4,6 @@ import {
   DrawerBody,
   DrawerContent,
   DrawerOverlay,
-  useColorModeValue,
 } from "@chakra-ui/react"
 import { useDocsDrawer } from "../../hooks"
 import { TextMd } from "../Typography"
@@ -15,16 +14,8 @@ export default function DocsDrawer() {
 
   return (
     <Drawer size="xl" placement="right" isOpen={isOpen} onClose={onClose}>
-      <DrawerOverlay
-        mt={HEADER_HEIGHT}
-        // TODO: Set the correct background color
-        bg={useColorModeValue("grey.100", "grey.100")}
-      />
-      {/* TODO: Set the correct background color */}
-      <DrawerContent
-        mt={HEADER_HEIGHT}
-        bg={useColorModeValue("white", "white")}
-      >
+      <DrawerOverlay mt={HEADER_HEIGHT} />
+      <DrawerContent mt={HEADER_HEIGHT}>
         <DrawerBody>
           {/* TODO: Add a documentation */}
           <TextMd>Documentation</TextMd>

diff --git a/dapp/src/components/ModalOverlay/index.tsx b/dapp/src/components/ModalOverlay/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react"
-import { Box, useColorModeValue } from "@chakra-ui/react"
+import { Box } from "@chakra-ui/react"
 import { useModal } from "../../hooks"
 import { HEADER_HEIGHT } from "../Header"
 
@@ -28,8 +28,8 @@ export default function ModalOverlay() {
       w="100vw"
       h="100vh"
       position="fixed"
-      // TODO: Set the correct background color
-      bg={useColorModeValue("grey.100", "grey.100")}
+      // TODO: Use the correct variables
+      bg="#F3E5C1"
       opacity={modalType ? 1 : 0}
       zIndex="overlay"
       // Hide the element when it is no longer needed.

diff --git a/dapp/src/components/Modals/BaseModal.tsx b/dapp/src/components/Modals/BaseModal.tsx
@@ -16,14 +16,8 @@ export default function BaseModal({ children }: { children: React.ReactNode }) {
         closeModal()
       }}
     >
-      <ModalContent p={4} gap={4} mt={2 * HEADER_HEIGHT}>
-        <ModalCloseButton
-          top={-8}
-          right={-8}
-          border="1px"
-          borderColor="white"
-          rounded="100%"
-        />
+      <ModalContent mt={2 * HEADER_HEIGHT}>
+        <ModalCloseButton />
         {children}
       </ModalContent>
     </Modal>

diff --git a/dapp/src/components/Sidebar/index.tsx b/dapp/src/components/Sidebar/index.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { Box, Button, useColorModeValue } from "@chakra-ui/react"
+import { Box, Button } from "@chakra-ui/react"
 import DocsDrawer from "../DocsDrawer"
 import { useDocsDrawer, useSidebar } from "../../hooks"
 import { HEADER_HEIGHT } from "../Header"
@@ -14,17 +14,24 @@ export default function Sidebar() {
         top={0}
         right={0}
         h="100vh"
+        w={isOpen ? 80 : 0}
         position="fixed"
-        width={isOpen ? 80 : 0}
-        height="100vh"
+        overflow="hidden"
         transition="width 0.3s"
         zIndex="sidebar"
-        // TODO: Set the correct background color
-        bg={useColorModeValue("white", "white")}
         mt={HEADER_HEIGHT}
       >
-        {/* TODO: Add a correct content for the sidebar */}
-        <Button onClick={openDocsDrawer}>Open a documentation</Button>
+        <Box
+          p={4}
+          h="100%"
+          borderTop="2px"
+          borderLeft="2px"
+          borderColor="white"
+          borderTopLeftRadius="xl"
+        >
+          {/* TODO: Add a correct content for the sidebar */}
+          <Button onClick={openDocsDrawer}>Open a documentation</Button>
+        </Box>
       </Box>
       <DocsDrawer />
     </>

diff --git a/dapp/src/theme/Drawer.ts b/dapp/src/theme/Drawer.ts
@@ -5,6 +5,19 @@ const Drawer: ComponentSingleStyleConfig = {
     dialogContainer: {
       zIndex: "drawer",
     },
+    overlay: {
+      // TODO: Use the correct variables
+      bg: "#F3E5C1",
+    },
+    dialog: {
+      borderTop: "2px",
+      borderLeft: "2px",
+      boxShadow: "none",
+      borderColor: "white",
+      borderTopLeftRadius: "xl",
+      // TODO: Use the correct variables
+      bg: "#F8EFDA",
+    },
   },
 }
 

diff --git a/dapp/src/theme/Modal.ts b/dapp/src/theme/Modal.ts
@@ -0,0 +1,24 @@
+import { ComponentSingleStyleConfig } from "@chakra-ui/react"
+
+const Modal: ComponentSingleStyleConfig = {
+  baseStyle: {
+    dialog: {
+      p: 4,
+      border: "2px",
+      boxShadow: "none",
+      borderColor: "white",
+      borderRadius: "xl",
+      // TODO: Use the correct variables
+      bg: "#FBF7EC",
+    },
+    closeButton: {
+      top: -10,
+      right: -10,
+      rounded: "100%",
+      // TODO: Use the correct variables
+      bg: "#FBF7EC",
+    },
+  },
+}
+
+export default Modal
diff --git a/dapp/src/theme/index.ts b/dapp/src/theme/index.ts
@@ -4,6 +4,7 @@ import Button from "./Button"
 import Switch from "./Switch"
 import { colors, fontSizes, fontWeights, lineHeights, zIndices } from "./utils"
 import Drawer from "./Drawer"
+import Modal from "./Modal"
 
 // Currently, there is no possibility to set all tooltips with hasArrow by defaultProps.
 // Let's override the defaultProps as follows.
@@ -27,6 +28,7 @@ const defaultTheme = {
     Button,
     Switch,
     Drawer,
+    Modal,
   },
 }