From cbadbf907f22be7a81897008a812a12afbee46d9 Mon Sep 17 00:00:00 2001
From: AykutSarac <aykutsarac0@gmail.com>
Date: Wed, 8 May 2024 13:06:06 +0300
Subject: [PATCH] fix: themes

---
 src/containers/Modals/PremiumModal/index.tsx |  2 +-
 src/layout/Layout/index.tsx                  | 26 +++++-----
 src/layout/Navbar/index.tsx                  |  8 +--
 src/pages/_app.tsx                           | 51 +++++++++++---------
 src/pages/editor.tsx                         | 39 ++++++++-------
 src/pages/index.tsx                          |  6 +--
 src/pages/pricing.tsx                        | 11 ++---
 7 files changed, 74 insertions(+), 69 deletions(-)

diff --git a/src/containers/Modals/PremiumModal/index.tsx b/src/containers/Modals/PremiumModal/index.tsx
index b1152fa..15eaa42 100644
--- a/src/containers/Modals/PremiumModal/index.tsx
+++ b/src/containers/Modals/PremiumModal/index.tsx
@@ -20,7 +20,7 @@ export const PremiumModal: React.FC<ModalProps> = ({ opened, onClose }) => {
       <Flex gap="lg" justify="center" px="md">
         <Stack gap="xs">
           <Title order={3}>Free</Title>
-          <Button variant="outline" color="dark" size="md">
+          <Button variant="outline" color="dark.2" size="md">
             Your current plan
           </Button>
           <List
diff --git a/src/layout/Layout/index.tsx b/src/layout/Layout/index.tsx
index d0697c4..295f940 100644
--- a/src/layout/Layout/index.tsx
+++ b/src/layout/Layout/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { MantineProvider } from "@mantine/core";
+import { useMantineColorScheme } from "@mantine/core";
 import styled, { ThemeProvider } from "styled-components";
 import { lightTheme } from "src/constants/theme";
 import { Footer } from "../Footer";
@@ -10,18 +10,20 @@ const StyledLayoutWrapper = styled.div`
 `;
 
 const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const { setColorScheme } = useMantineColorScheme();
+
+  React.useEffect(() => {
+    setColorScheme("light");
+  }, [setColorScheme]);
+
   return (
-    <React.Suspense>
-      <MantineProvider forceColorScheme="light">
-        <ThemeProvider theme={lightTheme}>
-          <StyledLayoutWrapper>
-            <Navbar />
-            {children}
-            <Footer />
-          </StyledLayoutWrapper>
-        </ThemeProvider>
-      </MantineProvider>
-    </React.Suspense>
+    <ThemeProvider theme={lightTheme}>
+      <StyledLayoutWrapper>
+        <Navbar />
+        {children}
+        <Footer />
+      </StyledLayoutWrapper>
+    </ThemeProvider>
   );
 };
 
diff --git a/src/layout/Navbar/index.tsx b/src/layout/Navbar/index.tsx
index 0728d27..27d74cd 100644
--- a/src/layout/Navbar/index.tsx
+++ b/src/layout/Navbar/index.tsx
@@ -45,7 +45,7 @@ export const Navbar = () => {
             href="https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode"
             target="_blank"
             variant="subtle"
-            color="gray"
+            color="dark"
             radius="md"
             visibleFrom="sm"
             size="md"
@@ -57,7 +57,7 @@ export const Navbar = () => {
             component={Link}
             href="/pricing"
             variant="subtle"
-            color="gray"
+            color="dark"
             radius="md"
             visibleFrom="sm"
             size="md"
@@ -70,7 +70,7 @@ export const Navbar = () => {
             prefetch={false}
             href="/docs"
             variant="subtle"
-            color="gray"
+            color="dark"
             radius="md"
             visibleFrom="sm"
             size="md"
@@ -84,7 +84,7 @@ export const Navbar = () => {
             component="a"
             href="https://app.jsoncrack.com/sign-in"
             variant="subtle"
-            color="gray"
+            color="dark"
             radius="xl"
             visibleFrom="sm"
             size="md"
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index f81091c..b76177c 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -14,6 +14,13 @@ import { lightTheme } from "src/constants/theme";
 import { supabase } from "src/lib/api/supabase";
 import useUser from "src/store/useUser";
 
+const theme = createTheme({
+  autoContrast: true,
+  fontSmoothing: false,
+  respectReducedMotion: true,
+  primaryShade: 8,
+});
+
 const Toaster = dynamic(() => import("react-hot-toast").then(c => c.Toaster));
 
 const isDevelopment = process.env.NODE_ENV === "development";
@@ -21,10 +28,6 @@ const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID;
 
 ReactGA.initialize(GA_TRACKING_ID, { testMode: isDevelopment });
 
-const mantineTheme = createTheme({
-  primaryShade: 8,
-});
-
 function JsonCrack({ Component, pageProps }: AppProps) {
   const router = useRouter();
   const setSession = useUser(state => state.setSession);
@@ -52,28 +55,28 @@ function JsonCrack({ Component, pageProps }: AppProps) {
       <Head>
         <title>JSON Crack | Best JSON Visualizer, Formatter and Viewer for everyone</title>
       </Head>
-      <MantineProvider theme={mantineTheme}>
-        <ThemeProvider theme={lightTheme}>
-          <Toaster
-            position="bottom-right"
-            containerStyle={{
-              bottom: 34,
-              right: 8,
-              fontSize: 14,
-            }}
-            toastOptions={{
-              style: {
-                background: "#4D4D4D",
-                color: "#B9BBBE",
-                borderRadius: 4,
-              },
-            }}
-          />
-          <GlobalStyle />
+      <ThemeProvider theme={lightTheme}>
+        <Toaster
+          position="bottom-right"
+          containerStyle={{
+            bottom: 34,
+            right: 8,
+            fontSize: 14,
+          }}
+          toastOptions={{
+            style: {
+              background: "#4D4D4D",
+              color: "#B9BBBE",
+              borderRadius: 4,
+            },
+          }}
+        />
+        <GlobalStyle />
+        <MantineProvider defaultColorScheme="light" theme={theme}>
           <Loading />
           <Component {...pageProps} />
-        </ThemeProvider>
-      </MantineProvider>
+        </MantineProvider>
+      </ThemeProvider>
     </>
   );
 }
diff --git a/src/pages/editor.tsx b/src/pages/editor.tsx
index 93ea6f5..3c3cdb6 100644
--- a/src/pages/editor.tsx
+++ b/src/pages/editor.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import dynamic from "next/dynamic";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { MantineProvider } from "@mantine/core";
+import { useMantineColorScheme } from "@mantine/core";
 import styled, { ThemeProvider } from "styled-components";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { darkTheme, lightTheme } from "src/constants/theme";
@@ -41,6 +41,7 @@ export const StyledEditorWrapper = styled.div`
 
 const EditorPage: React.FC = () => {
   const { query, isReady } = useRouter();
+  const { setColorScheme } = useMantineColorScheme();
   const checkEditorSession = useFile(state => state.checkEditorSession);
   const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);
 
@@ -48,29 +49,31 @@ const EditorPage: React.FC = () => {
     if (isReady) checkEditorSession(query?.json);
   }, [checkEditorSession, isReady, query]);
 
+  React.useEffect(() => {
+    setColorScheme(darkmodeEnabled ? "dark" : "light");
+  }, [darkmodeEnabled, setColorScheme]);
+
   return (
     <>
       <Head>
         <title>Editor | JSON Crack</title>
         <link rel="canonical" href="https://jsoncrack.com/editor" />
       </Head>
-      <MantineProvider forceColorScheme="dark">
-        <ThemeProvider theme={darkmodeEnabled ? darkTheme : lightTheme}>
-          <QueryClientProvider client={queryClient}>
-            <ExternalMode />
-            <ModalController />
-            <StyledEditorWrapper>
-              <StyledPageWrapper>
-                <Toolbar />
-                <StyledEditorWrapper>
-                  <Panes />
-                </StyledEditorWrapper>
-              </StyledPageWrapper>
-              <BottomBar />
-            </StyledEditorWrapper>
-          </QueryClientProvider>
-        </ThemeProvider>
-      </MantineProvider>
+      <ThemeProvider theme={darkmodeEnabled ? darkTheme : lightTheme}>
+        <QueryClientProvider client={queryClient}>
+          <ExternalMode />
+          <ModalController />
+          <StyledEditorWrapper>
+            <StyledPageWrapper>
+              <Toolbar />
+              <StyledEditorWrapper>
+                <Panes />
+              </StyledEditorWrapper>
+            </StyledPageWrapper>
+            <BottomBar />
+          </StyledEditorWrapper>
+        </QueryClientProvider>
+      </ThemeProvider>
     </>
   );
 };
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 03c5a03..21396a4 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -264,12 +264,11 @@ export const HomePage = () => {
               href="/editor"
               size="xl"
               fw="bold"
-              color="orange"
+              color="orange.5"
               rightSection={<MdChevronRight size={30} />}
               visibleFrom="sm"
               radius="xl"
               mt="lg"
-              autoContrast
             >
               Go to Editor
             </Button>
@@ -279,12 +278,11 @@ export const HomePage = () => {
               href="/editor"
               fw="bold"
               size="md"
-              color="orange"
+              color="orange.5"
               rightSection={<MdChevronRight size={24} />}
               hiddenFrom="sm"
               radius="xl"
               mt="lg"
-              autoContrast
             >
               Go to Editor
             </Button>
diff --git a/src/pages/pricing.tsx b/src/pages/pricing.tsx
index 3d42976..3324f8c 100644
--- a/src/pages/pricing.tsx
+++ b/src/pages/pricing.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import Head from "next/head";
-import Link from "next/link";
 import {
   Flex,
   Stack,
@@ -30,6 +29,7 @@ const StyledPaperFree = styled(Paper)`
   width: 400px;
   border-radius: 1em;
   border: 3px solid #e9e9e9;
+  background: white;
 `;
 
 const StyledPaper = styled(Paper)`
@@ -86,11 +86,10 @@ export const PricingCards = () => {
             </Stack>
           </Flex>
           <Button
-            component={Link}
-            prefetch={false}
-            href="/editor"
+            component="a"
+            href="https://app.jsoncrack.com/sign-up"
             size="lg"
-            radius="xl"
+            radius="md"
             variant="outline"
             color="dark"
             fullWidth
@@ -165,7 +164,7 @@ export const PricingCards = () => {
             href={paymentURL(isMonthly ? purchaseLinks.monthly : purchaseLinks.annual)}
             target="_blank"
             size="lg"
-            radius="xl"
+            radius="md"
             color="green"
             fullWidth
             my="md"