GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-27 15:22:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: themes

Browse Source
This commit is contained in:
AykutSarac 2024-05-08 13:06:06 +03:00
parent c6f7bf91c3
commit cbadbf907f
No known key found for this signature in database
7 changed files with 74 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/containers/Modals/PremiumModal/index.tsx
View File

@ -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

12
src/layout/Layout/index.tsx
View File

@ -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,9 +10,13 @@ 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 />
@ -20,8 +24,6 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
<Footer />
</StyledLayoutWrapper>
</ThemeProvider>
</MantineProvider>
</React.Suspense>
);
};

8
src/layout/Navbar/index.tsx
View File

@ -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"

15
src/pages/_app.tsx
View File

@ -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,7 +55,6 @@ 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"
@ -70,10 +72,11 @@ function JsonCrack({ Component, pageProps }: AppProps) {
}}
/>
<GlobalStyle />
<MantineProvider defaultColorScheme="light" theme={theme}>
<Loading />
<Component {...pageProps} />
</ThemeProvider>
</MantineProvider>
</ThemeProvider>
</>
);
}

9
src/pages/editor.tsx
View File

@ -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,13 +49,16 @@ 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 />
@ -70,7 +74,6 @@ const EditorPage: React.FC = () => {
</StyledEditorWrapper>
</QueryClientProvider>
</ThemeProvider>
</MantineProvider>
</>
);
};

6
src/pages/index.tsx
View File

@ -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>

11
src/pages/pricing.tsx
View File

@ -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"