GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-02-04 01:32:54 +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"> <Flex gap="lg" justify="center" px="md">
<Stack gap="xs"> <Stack gap="xs">
<Title order={3}>Free</Title> <Title order={3}>Free</Title>
<Button variant="outline" color="dark" size="md"> <Button variant="outline" color="dark.2" size="md">
Your current plan Your current plan
</Button> </Button>
<List <List

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

@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import { MantineProvider } from "@mantine/core"; import { useMantineColorScheme } from "@mantine/core";
import styled, { ThemeProvider } from "styled-components"; import styled, { ThemeProvider } from "styled-components";
import { lightTheme } from "src/constants/theme"; import { lightTheme } from "src/constants/theme";
import { Footer } from "../Footer"; import { Footer } from "../Footer";
@ -10,18 +10,20 @@ const StyledLayoutWrapper = styled.div`
`; `;
const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => { const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const { setColorScheme } = useMantineColorScheme();
React.useEffect(() => {
setColorScheme("light");
}, [setColorScheme]);
return ( return (
<React.Suspense> <ThemeProvider theme={lightTheme}>
<MantineProvider forceColorScheme="light"> <StyledLayoutWrapper>
<ThemeProvider theme={lightTheme}> <Navbar />
<StyledLayoutWrapper> {children}
<Navbar /> <Footer />
{children} </StyledLayoutWrapper>
<Footer /> </ThemeProvider>
</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" href="https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode"
target="_blank" target="_blank"
variant="subtle" variant="subtle"
color="gray" color="dark"
radius="md" radius="md"
visibleFrom="sm" visibleFrom="sm"
size="md" size="md"
@ -57,7 +57,7 @@ export const Navbar = () => {
component={Link} component={Link}
href="/pricing" href="/pricing"
variant="subtle" variant="subtle"
color="gray" color="dark"
radius="md" radius="md"
visibleFrom="sm" visibleFrom="sm"
size="md" size="md"
@ -70,7 +70,7 @@ export const Navbar = () => {
prefetch={false} prefetch={false}
href="/docs" href="/docs"
variant="subtle" variant="subtle"
color="gray" color="dark"
radius="md" radius="md"
visibleFrom="sm" visibleFrom="sm"
size="md" size="md"
@ -84,7 +84,7 @@ export const Navbar = () => {
component="a" component="a"
href="https://app.jsoncrack.com/sign-in" href="https://app.jsoncrack.com/sign-in"
variant="subtle" variant="subtle"
color="gray" color="dark"
radius="xl" radius="xl"
visibleFrom="sm" visibleFrom="sm"
size="md" size="md"

51
src/pages/_app.tsx
View File

@ -14,6 +14,13 @@ import { lightTheme } from "src/constants/theme";
import { supabase } from "src/lib/api/supabase"; import { supabase } from "src/lib/api/supabase";
import useUser from "src/store/useUser"; 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 Toaster = dynamic(() => import("react-hot-toast").then(c => c.Toaster));
const isDevelopment = process.env.NODE_ENV === "development"; 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 }); ReactGA.initialize(GA_TRACKING_ID, { testMode: isDevelopment });
const mantineTheme = createTheme({
primaryShade: 8,
});
function JsonCrack({ Component, pageProps }: AppProps) { function JsonCrack({ Component, pageProps }: AppProps) {
const router = useRouter(); const router = useRouter();
const setSession = useUser(state => state.setSession); const setSession = useUser(state => state.setSession);
@ -52,28 +55,28 @@ function JsonCrack({ Component, pageProps }: AppProps) {
<Head> <Head>
<title>JSON Crack | Best JSON Visualizer, Formatter and Viewer for everyone</title> <title>JSON Crack | Best JSON Visualizer, Formatter and Viewer for everyone</title>
</Head> </Head>
<MantineProvider theme={mantineTheme}> <ThemeProvider theme={lightTheme}>
<ThemeProvider theme={lightTheme}> <Toaster
<Toaster position="bottom-right"
position="bottom-right" containerStyle={{
containerStyle={{ bottom: 34,
bottom: 34, right: 8,
right: 8, fontSize: 14,
fontSize: 14, }}
}} toastOptions={{
toastOptions={{ style: {
style: { background: "#4D4D4D",
background: "#4D4D4D", color: "#B9BBBE",
color: "#B9BBBE", borderRadius: 4,
borderRadius: 4, },
}, }}
}} />
/> <GlobalStyle />
<GlobalStyle /> <MantineProvider defaultColorScheme="light" theme={theme}>
<Loading /> <Loading />
<Component {...pageProps} /> <Component {...pageProps} />
</ThemeProvider> </MantineProvider>
</MantineProvider> </ThemeProvider>
</> </>
); );
} }

39
src/pages/editor.tsx
View File

@ -2,7 +2,7 @@ import React from "react";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import Head from "next/head"; import Head from "next/head";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { MantineProvider } from "@mantine/core"; import { useMantineColorScheme } from "@mantine/core";
import styled, { ThemeProvider } from "styled-components"; import styled, { ThemeProvider } from "styled-components";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { darkTheme, lightTheme } from "src/constants/theme"; import { darkTheme, lightTheme } from "src/constants/theme";
@ -41,6 +41,7 @@ export const StyledEditorWrapper = styled.div`
const EditorPage: React.FC = () => { const EditorPage: React.FC = () => {
const { query, isReady } = useRouter(); const { query, isReady } = useRouter();
const { setColorScheme } = useMantineColorScheme();
const checkEditorSession = useFile(state => state.checkEditorSession); const checkEditorSession = useFile(state => state.checkEditorSession);
const darkmodeEnabled = useConfig(state => state.darkmodeEnabled); const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);
@ -48,29 +49,31 @@ const EditorPage: React.FC = () => {
if (isReady) checkEditorSession(query?.json); if (isReady) checkEditorSession(query?.json);
}, [checkEditorSession, isReady, query]); }, [checkEditorSession, isReady, query]);
React.useEffect(() => {
setColorScheme(darkmodeEnabled ? "dark" : "light");
}, [darkmodeEnabled, setColorScheme]);
return ( return (
<> <>
<Head> <Head>
<title>Editor | JSON Crack</title> <title>Editor | JSON Crack</title>
<link rel="canonical" href="https://jsoncrack.com/editor" /> <link rel="canonical" href="https://jsoncrack.com/editor" />
</Head> </Head>
<MantineProvider forceColorScheme="dark"> <ThemeProvider theme={darkmodeEnabled ? darkTheme : lightTheme}>
<ThemeProvider theme={darkmodeEnabled ? darkTheme : lightTheme}> <QueryClientProvider client={queryClient}>
<QueryClientProvider client={queryClient}> <ExternalMode />
<ExternalMode /> <ModalController />
<ModalController /> <StyledEditorWrapper>
<StyledEditorWrapper> <StyledPageWrapper>
<StyledPageWrapper> <Toolbar />
<Toolbar /> <StyledEditorWrapper>
<StyledEditorWrapper> <Panes />
<Panes /> </StyledEditorWrapper>
</StyledEditorWrapper> </StyledPageWrapper>
</StyledPageWrapper> <BottomBar />
<BottomBar /> </StyledEditorWrapper>
</StyledEditorWrapper> </QueryClientProvider>
</QueryClientProvider> </ThemeProvider>
</ThemeProvider>
</MantineProvider>
</> </>
); );
}; };

6
src/pages/index.tsx
View File

@ -264,12 +264,11 @@ export const HomePage = () => {
href="/editor" href="/editor"
size="xl" size="xl"
fw="bold" fw="bold"
color="orange" color="orange.5"
rightSection={<MdChevronRight size={30} />} rightSection={<MdChevronRight size={30} />}
visibleFrom="sm" visibleFrom="sm"
radius="xl" radius="xl"
mt="lg" mt="lg"
autoContrast
> >
Go to Editor Go to Editor
</Button> </Button>
@ -279,12 +278,11 @@ export const HomePage = () => {
href="/editor" href="/editor"
fw="bold" fw="bold"
size="md" size="md"
color="orange" color="orange.5"
rightSection={<MdChevronRight size={24} />} rightSection={<MdChevronRight size={24} />}
hiddenFrom="sm" hiddenFrom="sm"
radius="xl" radius="xl"
mt="lg" mt="lg"
autoContrast
> >
Go to Editor Go to Editor
</Button> </Button>

11
src/pages/pricing.tsx
View File

@ -1,6 +1,5 @@
import React from "react"; import React from "react";
import Head from "next/head"; import Head from "next/head";
import Link from "next/link";
import { import {
Flex, Flex,
Stack, Stack,
@ -30,6 +29,7 @@ const StyledPaperFree = styled(Paper)`
width: 400px; width: 400px;
border-radius: 1em; border-radius: 1em;
border: 3px solid #e9e9e9; border: 3px solid #e9e9e9;
background: white;
`; `;
const StyledPaper = styled(Paper)` const StyledPaper = styled(Paper)`
@ -86,11 +86,10 @@ export const PricingCards = () => {
</Stack> </Stack>
</Flex> </Flex>
<Button <Button
component={Link} component="a"
prefetch={false} href="https://app.jsoncrack.com/sign-up"
href="/editor"
size="lg" size="lg"
radius="xl" radius="md"
variant="outline" variant="outline"
color="dark" color="dark"
fullWidth fullWidth
@ -165,7 +164,7 @@ export const PricingCards = () => {
href={paymentURL(isMonthly ? purchaseLinks.monthly : purchaseLinks.annual)} href={paymentURL(isMonthly ? purchaseLinks.monthly : purchaseLinks.annual)}
target="_blank" target="_blank"
size="lg" size="lg"
radius="xl" radius="md"
color="green" color="green"
fullWidth fullWidth
my="md" my="md"