New design & bug fixes

styles/components/button/index.js

@@ -0,0 +1,86 @@
+const baseStyle = {
+  borderRadius: "md",
+  borderColor: "dark.400",
+  boxShadow: "none",
+  cursor: "pointer",
+  display: "inline-flex",
+  alignItems: "center",
+  _disabled: {
+    cursor: "not-allowed",
+  },
+  _focused: {
+    borderColor: "dark.500",
+  },
+};
+
+function variantPrimary() {
+  const disabled = {
+    bg: "dark.300",
+    color: "dark.500",
+  };
+
+  const loading = {
+    bg: "dark.600",
+    color: "white",
+  };
+
+  return {
+    bg: "dark.700",
+    color: "white",
+    _hover: {
+      bg: "dark.800",
+      _disabled: {
+        ...disabled,
+        _loading: loading,
+      },
+    },
+    _active: {
+      bg: "dark.800",
+    },
+    _disabled: {
+      ...disabled,
+      _loading: loading,
+    },
+  };
+}
+
+function variantSecondary() {
+  const disabled = {
+    bg: "dark.300",
+    color: "gray.500",
+  };
+
+  const loading = {
+    bg: "dark.600",
+    color: "white",
+  };
+
+  return {
+    bg: "dark.500",
+    color: "white",
+    _hover: {
+      bg: "dark.700",
+      _disabled: {
+        ...disabled,
+        _loading: loading,
+      },
+    },
+    _active: {
+      bg: "dark.800",
+    },
+    _disabled: {
+      ...disabled,
+      _loading: loading,
+    },
+  };
+}
+
+const variants = {
+  primary: variantPrimary,
+  secondary: variantSecondary,
+};
+
+export default {
+  baseStyle,
+  variants,
+};

styles/components/index.js

@@ -0,0 +1,5 @@
+import Button from "./button";
+
+export default {
+  Button,
+};

styles/globals.css

@@ -1,14 +1,6 @@
 @font-face {
-  font-family: "Inter-Regular";
-  src: url("/fonts/Inter-Regular.woff2") format('woff2');
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Eina-Bold";
-  src: url("/fonts/eina-01-bold.woff2") format('woff2');
+  font-family: "Poppins-Regular";
+  src: url("/fonts/Poppins-Regular.woff2") format('woff2');
   font-style: normal;
   font-weight: 400;
   font-display: swap;

styles/theme.js

@@ -1,18 +1,51 @@
 import { extendTheme } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
+import components from "./components";
 
-const theme = extendTheme({
-  styles: {
-    global: (props) => ({
-      body: {
-        fontSize: "18px",
-        fontFamily: "Inter-Regular",
-        fontWeight: "light",
-        color: mode("#2b2c34", "whiteAlpha.900")(props),
-        bg: mode("#fbfbfb", "#16161a")(props),
+const theme = extendTheme(
+  {
+    components,
+  },
+  {
+    config: {
+      initialColorMode: "dark",
+      useSystemColorMode: false,
+    },
+    colors: {
+      dark: {
+        50: "#fafafa",
+        100: "#f5f5f5",
+        200: "#e6e6e6",
+        300: "#d6d6d6",
+        400: "#a5a5a5",
+        500: "#767676",
+        600: "#575757",
+        700: "#434343",
+        800: "#292929",
+        900: "#000000",
       },
-    }),
+      lightDark: {
+        900: "#16161a",
+      },
+      light: {
+        100: "#f9f9f9",
+      },
+    },
+    fonts: {
+      body: "Poppins-Regular, sans-serif",
+      heading: "Poppins-Regular, sans-serif",
+    },
+    styles: {
+      global: (props) => ({
+        "html, body": {
+          height: "100%",
+          maxHeight: "100vh",
+          backgroundColor: mode("light.100", "lightDark.900")(props),
+        },
+      }),
+      borderColor: "red",
+    },
   }
-});
+);
 
-export default theme;
+export default theme;