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: theme color

Browse Source
This commit is contained in:
AykutSarac 2024-05-10 10:49:41 +03:00
parent affa9c4b38
commit 0ffbb58621
No known key found for this signature in database
6 changed files with 41 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/layout/Footer/index.tsx
View File

@ -1,4 +1,5 @@
import React from "react";
import Link from "next/link";
import { Anchor, Container, Divider, Flex, Stack, Text, ThemeIcon } from "@mantine/core";
import dayjs from "dayjs";
import { FaDiscord, FaGithub, FaLinkedin } from "react-icons/fa";
@ -28,7 +29,7 @@ export const Footer = () => {
>
VS Code
</Anchor>
<Anchor fz="sm" c="dark" href="/pricing">
<Anchor component={Link} prefetch={false} fz="sm" c="dark" href="/pricing">
Pricing
</Anchor>
</Stack>
@ -44,10 +45,10 @@ export const Footer = () => {
>
Affiliate
</Anchor>
<Anchor fz="sm" c="dark" href="/#faq">
<Anchor component={Link} prefetch={false} fz="sm" c="dark" href="/#faq">
FAQ
</Anchor>
<Anchor fz="sm" c="dark" href="/docs">
<Anchor component={Link} prefetch={false} fz="sm" c="dark" href="/docs">
Docs
</Anchor>
</Stack>
@ -92,12 +93,12 @@ export const Footer = () => {
<Text fz="sm" c="dimmed">
© {dayjs().get("year")} JSON Crack
</Text>
<Anchor fz="sm" c="dimmed" href="/legal/terms">
<Anchor component={Link} prefetch={false} fz="sm" c="dimmed" href="/legal/terms">
<Text fz="sm" c="dimmed">
Terms
</Text>
</Anchor>
<Anchor fz="sm" c="dimmed" href="/legal/privacy">
<Anchor component={Link} prefetch={false} fz="sm" c="dimmed" href="/legal/privacy">
<Text fz="sm" c="dimmed">
Privacy
</Text>

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

@ -1,5 +1,4 @@
import React from "react";
import { useMantineColorScheme } from "@mantine/core";
import styled, { ThemeProvider } from "styled-components";
import { lightTheme } from "src/constants/theme";
import { Footer } from "../Footer";
@ -10,12 +9,6 @@ const StyledLayoutWrapper = styled.div`
`;
const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const { setColorScheme } = useMantineColorScheme();
React.useEffect(() => {
setColorScheme("light");
}, [setColorScheme]);
return (
<ThemeProvider theme={lightTheme}>
<StyledLayoutWrapper>

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="dark"
color="black"
radius="md"
visibleFrom="sm"
size="md"
@ -57,7 +57,7 @@ export const Navbar = () => {
component={Link}
href="/pricing"
variant="subtle"
color="dark"
color="black"
radius="md"
visibleFrom="sm"
size="md"
@ -70,7 +70,7 @@ export const Navbar = () => {
prefetch={false}
href="/docs"
variant="subtle"
color="dark"
color="black"
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="dark"
color="black"
radius="xl"
visibleFrom="sm"
size="md"

8
src/pages/docs.tsx
View File

@ -47,7 +47,7 @@ const Docs = () => {
Embed
</Title>
</Group>
<Paper p="md" radius="md" withBorder>
<Paper bg="white" c="black" p="md" radius="md" withBorder>
<Title mb="sm" order={3} c="dark">
# Fetching from URL
</Title>
@ -77,7 +77,7 @@ const Docs = () => {
</StyledFrame>
</StyledContentBody>
</Paper>
<Paper p="md" radius="md" withBorder>
<Paper bg="white" c="black" p="md" radius="md" withBorder>
<Title mb="sm" order={3} c="dark">
# Embed Saved JSON
</Title>
@ -98,7 +98,7 @@ const Docs = () => {
</StyledFrame>
</StyledContentBody>
</Paper>
<Paper p="md" radius="md" withBorder>
<Paper bg="white" c="black" p="md" radius="md" withBorder>
<Title mb="sm" order={3} c="dark">
# Communicating with API
</Title>
@ -137,7 +137,7 @@ const Docs = () => {
</StyledFrame>
</StyledContentBody>
</Paper>
<Paper p="md" radius="md" withBorder>
<Paper bg="white" c="black" p="md" radius="md" withBorder>
<Title order={4}>◼︎ On Page Load</Title>
<StyledContentBody>
<Text>

33
src/pages/index.tsx
View File

@ -380,7 +380,14 @@ export const HomePage = () => {
<BiChevronDown size={40} />
</ThemeIcon>
<Title order={2} fz={{ sm: 36, md: 48 }} fw={600} mt={50} style={{ textAlign: "center" }}>
<Title
c="dark"
order={2}
fz={{ sm: 36, md: 48 }}
fw={600}
mt={50}
style={{ textAlign: "center" }}
>
Unlock the Ease of Visualizing Your Data
</Title>
<Text c="dark.2" fz={{ base: 12, md: 16 }} style={{ textAlign: "center" }}>
@ -420,7 +427,7 @@ export const HomePage = () => {
>
<MdCompare size={28} />
</ThemeIcon>
<Title order={3} fw={500} fz={{ sm: 20, md: 28 }}>
<Title c="black" order={3} fw={500} fz={{ sm: 20, md: 28 }}>
Compare
</Title>
<Text fz={{ sm: 14, md: 18 }} fw={300} lts={0.4} c="dark.5" mt={10}>
@ -466,7 +473,7 @@ export const HomePage = () => {
>
<MdRebaseEdit size={28} />
</ThemeIcon>
<Title order={3} fw={500} fz={{ sm: 20, md: 28 }}>
<Title c="black" order={3} fw={500} fz={{ sm: 20, md: 28 }}>
Edit
</Title>
<Text fz={{ sm: 14, md: 16 }} fw={300} lts={0.4} c="dark.5" my={10}>
@ -512,7 +519,7 @@ export const HomePage = () => {
>
<MdSearch size={28} />
</ThemeIcon>
<Title order={3} fw={500} fz={{ sm: 20, md: 28 }}>
<Title c="black" order={3} fw={500} fz={{ sm: 20, md: 28 }}>
Search
</Title>
<Text fz={{ sm: 14, md: 18 }} fw={300} lts={0.4} c="dark.5" mt={10}>
@ -559,7 +566,7 @@ export const HomePage = () => {
>
<MdExtension size={28} />
</ThemeIcon>
<Title order={3} fw={500} fz={{ sm: 20, md: 28 }}>
<Title c="black" order={3} fw={500} fz={{ sm: 20, md: 28 }}>
Choose Your Format
</Title>
<Text fz={{ sm: 14, md: 18 }} fw={300} lts={0.4} c="dark.5" mt={10}>
@ -572,6 +579,7 @@ export const HomePage = () => {
w="100%"
mih={{ sm: 10, md: 40 }}
variant="light"
c="indigo"
color="indigo"
radius="sm"
size="xl"
@ -587,6 +595,7 @@ export const HomePage = () => {
color="cyan"
radius="sm"
size="xl"
c="cyan"
>
YAML
</Badge>
@ -598,6 +607,7 @@ export const HomePage = () => {
variant="light"
color="grape"
radius="sm"
c="grape"
size="xl"
>
CSV
@ -611,6 +621,7 @@ export const HomePage = () => {
color="red"
radius="sm"
size="xl"
c="red"
>
XML
</Badge>
@ -625,14 +636,18 @@ export const HomePage = () => {
<PricingCards />
<Container id="faq" component="section">
<Title order={2} fz={36} fw={600} mt={100} style={{ textAlign: "center" }}>
<Title c="dark" order={2} fz={36} fw={600} mt={100} style={{ textAlign: "center" }}>
Frequently Asked Questions
</Title>
<Accordion variant="contained" mt={60}>
<Accordion bg="white" variant="contained" mt={60}>
{FAQ.map(({ title, content }) => (
<Accordion.Item key={title} value={title}>
<Accordion.Control bg="white">{title}</Accordion.Control>
<Accordion.Panel bg="gray.1">{content}</Accordion.Panel>
<Accordion.Control bg="white" c="dark">
{title}
</Accordion.Control>
<Accordion.Panel bg="gray.1" c="dark">
{content}
</Accordion.Panel>
</Accordion.Item>
))}
</Accordion>

6
src/pages/pricing.tsx
View File

@ -56,7 +56,7 @@ export const PricingCards = () => {
<Stack component="section" id="pricing" gap="0" align="center">
<Center my="lg">
<SegmentedControl
color="dark"
color="white"
value={isMonthly ? "Monthly" : "Yearly"}
onChange={v => setIsMonthly(v === "Monthly")}
size="md"
@ -100,7 +100,7 @@ export const PricingCards = () => {
Sign Up
</Button>
<Flex direction="column" justify="space-between" h={250}>
<List spacing="xs" size="sm" mt="lg" center icon="✦">
<List spacing="xs" size="sm" mt="lg" c="black" center icon="✦">
<List.Item>
<Text c="gray.7" fw={500} fz="sm">
Open Source
@ -175,7 +175,7 @@ export const PricingCards = () => {
Start 1 Day Free Trial
</Button>
<Flex direction="column" justify="space-between" h={250}>
<List spacing="xs" size="sm" mt="lg" center icon="✦">
<List spacing="xs" size="sm" mt="lg" c="black" center icon="✦">
<List.Item>
<Text c="gray.7" fw={500} fz="sm">
Graphs: 5X faster, compact and smooth