update default styles

src/components/Button/index.tsx

@@ -25,6 +25,11 @@ const StyledButton = styled.button<{ status: keyof typeof ButtonType }>`
   padding: 8px 16px;
   min-width: 60px;
 
+  :disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
   @media only screen and (max-width: 768px) {
     font-size: 18px;
   }

src/components/CustomNode/styles.tsx

@@ -43,7 +43,7 @@ export const StyledKey = styled.span<{
   objectKey?: boolean;
   parent?: boolean;
 }>`
-  font-weight: bold;
+  font-weight: 500;
   color: ${({ theme, objectKey, parent }) =>
     parent ? theme.NODE_KEY : objectKey ? "#5c87ff" : theme.TEXT_POSITIVE};
 `;

src/components/Loading/index.tsx

@@ -19,7 +19,7 @@ const StyledLoading = styled.div`
 `;
 
 const StyledLogo = styled.h2`
-  font-weight: 700;
+  font-weight: 600;
   font-size: 56px;
   pointer-events: none;
   margin-bottom: 10px;

src/components/Navbar/index.tsx

@@ -22,7 +22,7 @@ const StyledLogo = styled.div`
   font-weight: 600;
   font-size: 20px;
   cursor: pointer;
-  font-weight: 700;
+  font-weight: 600;
   color: ${({ theme }) => theme.FULL_WHITE};
 `;
 

src/components/Tooltip/index.tsx

@@ -25,7 +25,7 @@ const StyledTooltip = styled.div<{ visible: boolean }>`
   white-space: nowrap;
   font-size: 16px;
   user-select: none;
-  font-weight: 600;
+  font-weight: 500;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07),
     0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07),
     0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07);

src/constants/globalStyle.ts

@@ -11,7 +11,7 @@ const GlobalStyle = createGlobalStyle`
     font-weight: 400;
     font-size: 16px;
   }
-
+  
   a {
     text-decoration: none;
     color: unset;

src/constants/theme.ts

@@ -32,6 +32,7 @@ export const darkTheme: DefaultTheme = {
   BACKGROUND_SECONDARY: "#2f3136",
   BACKGROUND_PRIMARY: "#36393f",
   BACKGROUND_MODIFIER_ACCENT: "rgba(79,84,92,0.48)",
+  MODAL_BACKGROUND: "#36393E",
   TEXT_NORMAL: "#dcddde",
   TEXT_POSITIVE: "hsl(139,calc(var(--saturation-factor, 1)*51.6%),52.2%)",
 } as const;
@@ -50,6 +51,7 @@ export const lightTheme: DefaultTheme = {
   BACKGROUND_SECONDARY: "#f2f3f5",
   BACKGROUND_PRIMARY: "#FFFFFF",
   BACKGROUND_MODIFIER_ACCENT: "rgba(106,116,128,0.24)",
+  MODAL_BACKGROUND: "#FFFFFF",
   TEXT_NORMAL: "#2e3338",
   TEXT_POSITIVE: "#008736",
 } as const;

src/containers/Incompatible/index.tsx

@@ -25,7 +25,7 @@ export const StyledIncompatible = styled.div`
 
     &::before {
       content: "Uh, oh!";
-      font-weight: 700;
+      font-weight: 600;
       font-size: 60px;
       opacity: 0.6;
     }

src/pages/404.tsx

@@ -17,7 +17,7 @@ const StyledNotFound = styled.div`
 const StyledMessage = styled.h4`
   color: ${({ theme }) => theme.FULL_WHITE};
   font-size: 25px;
-  font-weight: 700;
+  font-weight: 600;
   margin: 10px 0;
 `;
 

src/pages/_document.tsx

@@ -52,7 +52,7 @@ class MyDocument extends Document {
             crossOrigin="anonymous"
           />
           <link
-            href="https://fonts.googleapis.com/css2?family=Catamaran:wght@300;400;500;600;700&family=PT+Sans:wght@400;500;700&family=Roboto+Mono:wght@500&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&family=Roboto+Mono:wght@500&family=Catamaran:wght@400;500;600&display=swap"
             rel="stylesheet"
           />
         </Head>

src/typings/styled.d.ts

@@ -35,6 +35,7 @@ declare module "styled-components" {
     BACKGROUND_SECONDARY: string;
     BACKGROUND_PRIMARY: string;
     BACKGROUND_MODIFIER_ACCENT: string;
+    MODAL_BACKGROUND: string;
     TEXT_NORMAL: string;
     TEXT_POSITIVE: string;
     TEXT_DANGER: string;