feat(custom): #4 Add button, theme colors.

src/App.tsx

@@ -1,13 +1,10 @@
 import { Box, Flex } from "@chakra-ui/react";
-import CustomButton from "./components/shared/Button";
 
 function App() {
   return (
-    <Box pos="fixed" zIndex={100} top={50} right={0} w="200px" h="90vh" mr="15px">
+    <Box pos="fixed" zIndex={100} top={50} right={0} w="200px" h="90vh" mr="15px" opacity={0.5}>
       <Box>Drawer</Box>
-      <Flex h="100%" flexDirection="column" alignItems="center" justifyContent="space-around" borderRadius="15px" bgColor="blue.100">
-        <CustomButton>Testing</CustomButton>
-        <CustomButton>Testing</CustomButton>
+      <Flex h="100%" flexDirection="column" alignItems="center" justifyContent="space-around" borderRadius="15px" bgColor="primaryBg">
       </Flex>
     </Box>
   );

src/components/shared/Button/index.tsx

@@ -1,12 +1,12 @@
-import { Button } from "@chakra-ui/react";
+import { Button, ButtonProps } from "@chakra-ui/react";
 
-interface CustomButtonProps {
+interface CustomButtonProps extends ButtonProps {
   children: React.ReactNode;
 }
 
 function CustomButton({ children }: CustomButtonProps) {
   return (
-    <Button w="180px" h="40px" variant="solid">
+    <Button w="180px" h="35px" variant="solid">
       {children}
     </Button>
   );

src/main.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import Providers from "./lib/providers";
-// import "./styles/index.css";
 
 const mountAssistant = document.createElement("div");
 mountAssistant.id = "assistant-root";

src/styles/theme.ts

@@ -1,5 +1,18 @@
 import { extendTheme } from "@chakra-ui/react";
 
-const theme = extendTheme({});
+const config = {
+  initialColorMode: "light",
+  useSystemColorMode: false,
+};
+
+const theme = extendTheme({
+  config,
+  colors: {
+    primaryBg: "#112D4E",
+    promptBtn: "#3F72AF",
+    quickRespBtn: "#DBE2Ef",
+    settingBtn: "#F9F7F7",
+  },
+});
 
 export default theme;