Skip to content

Commit de6d8cb

Browse files
lokesh-coderlokesh-coder
committed
fix: remove chakra unneccessary code
1 parent b9c2517 commit de6d8cb

File tree

12 files changed

+15132
-51
lines changed

12 files changed

+15132
-51
lines changed

‎gatsby-browser.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +0,0 @@
1-
import { wrapPageElement as wrap } from './src/root-wapper';
2-
3-
// eslint-disable-next-line import/prefer-default-export
4-
export const wrapPageElement = wrap;

‎gatsby-config.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,14 @@ module.exports = {
4444
trackingId: 'UA-167428362-1',
4545
},
4646
},
47-
'gatsby-plugin-offline',
47+
{
48+
resolve: '@chakra-ui/gatsby-plugin',
49+
options: {
50+
isResettingCSS: true,
51+
isUsingColorMode: true,
52+
portalZIndex: 40,
53+
},
54+
},
4855
'@chakra-ui/gatsby-plugin',
4956
],
5057
};

‎gatsby-ssr.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +0,0 @@
1-
import { wrapPageElement as wrap } from './src/root-wapper';
2-
3-
// eslint-disable-next-line import/prefer-default-export
4-
export const wrapPageElement = wrap;

‎package.json

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,35 @@
66
"author": "Lokesh Rajendran <[email protected]>",
77
"dependencies": {
88
"@chakra-ui/gatsby-plugin": "^1.0.1",
9-
"@chakra-ui/icons": "^1.0.5",
10-
"@chakra-ui/react": "^1.3.3",
9+
"@chakra-ui/react": "^1.3.4",
1110
"@emotion/react": "^11.1.5",
1211
"@emotion/styled": "^11.1.5",
13-
"blobshape": "^1.0.0",
14-
"dynamics.js": "^1.1.5",
15-
"framer-motion": "^3.10.0",
16-
"gatsby": "^3.0.0",
17-
"gatsby-image": "^3.0.0",
18-
"gatsby-plugin-google-analytics": "^3.0.0",
12+
"framer-motion": "^3.10.3",
13+
"gatsby": "^3.0.1",
14+
"gatsby-plugin-gatsby-cloud": "^2.0.0",
1915
"gatsby-plugin-image": "^1.0.0",
2016
"gatsby-plugin-manifest": "^3.0.0",
2117
"gatsby-plugin-offline": "^4.0.0",
2218
"gatsby-plugin-react-helmet": "^4.0.0",
2319
"gatsby-plugin-sharp": "^3.0.0",
20+
"gatsby-source-filesystem": "^3.0.0",
21+
"gatsby-transformer-sharp": "^3.0.0",
22+
"prop-types": "^15.7.2",
23+
"react": "^17.0.1",
24+
"react-dom": "^17.0.1",
25+
"react-helmet": "^6.1.0",
26+
"@chakra-ui/icons": "^1.0.5",
27+
"blobshape": "^1.0.0",
28+
"dynamics.js": "^1.1.5",
29+
"gatsby-image": "^3.0.0",
30+
"gatsby-plugin-google-analytics": "^3.0.0",
2431
"gatsby-plugin-sitemap": "^3.0.0",
2532
"gatsby-rehype-prismjs": "^2.0.0",
2633
"gatsby-remark-prismjs": "^4.0.0",
27-
"gatsby-source-filesystem": "^3.0.0",
2834
"gatsby-transformer-rehype": "^2.0.0",
2935
"gatsby-transformer-remark": "^3.0.0",
30-
"gatsby-transformer-sharp": "^3.0.0",
3136
"prismjs": "^1.23.0",
3237
"project-name-generator": "^2.1.9",
33-
"prop-types": "^15.7.2",
34-
"react": "^17.0.1",
35-
"react-dom": "^17.0.1",
36-
"react-helmet": "^6.1.0",
3738
"react-syntax-highlighter": "^15.4.3",
3839
"redux-zero": "^5.1.7",
3940
"use-sound": "^2.0.1"

‎src/@chakra-ui/gatsby-plugin/theme.js

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import { extendTheme } from '@chakra-ui/react';
2+
3+
const theme = extendTheme({
4+
config: {
5+
useSystemColorMode: false,
6+
initialColorMode: 'dark',
7+
},
8+
colors: {
9+
primary: '#d7819b',
10+
dark: {
11+
heaading: '#1d3557',
12+
},
13+
},
14+
styles: {
15+
global: ({ colorMode }) => ({
16+
body: {
17+
bg: colorMode === 'dark' ? 'blue.800' : 'white',
18+
},
19+
'#blobSvg': {
20+
overflow: 'visible',
21+
},
22+
}),
23+
},
24+
components: {
25+
Heading: {
26+
baseStyle: {
27+
letterSpacing: '-1px',
28+
},
29+
variants: {
30+
main: ({ colorMode }) => ({
31+
fontWeight: '900',
32+
color: colorMode === 'dark' ? 'gray.300' : '#1d3557',
33+
}),
34+
},
35+
},
36+
Text: {
37+
baseStyle: {
38+
color: 'gray.500',
39+
},
40+
variants: {
41+
subtle: ({ colorMode }) => ({
42+
color: colorMode === 'dark' ? 'gray.300' : 'gray.700',
43+
}),
44+
},
45+
},
46+
Button: {
47+
variants: {
48+
subtle: ({ colorMode }) => ({
49+
color: colorMode === 'dark' ? 'gray.400' : 'gray.500',
50+
fontWeight: 400,
51+
fontSize: 'sm',
52+
lineHeight: 'initial',
53+
_hover: { bg: colorMode === 'dark' ? 'gray.800' : 'gray.100' },
54+
}),
55+
main: ({ colorMode }) => ({
56+
bg: 'gray.500',
57+
fontWeight: '600',
58+
color: 'white',
59+
w: 'full',
60+
p: '7',
61+
fontSize: 'md',
62+
lineHeight: 'initial',
63+
transition: 'all 0.4s ease',
64+
_hover: { bg: colorMode === 'dark' ? '#d7819b' : 'gray.600' },
65+
_focus: {
66+
bg: colorMode === 'dark' ? '#d7819b' : 'gray.700',
67+
shadow: 'xl',
68+
outline: 'none',
69+
},
70+
_active: {
71+
transform: 'scale(0.95)',
72+
bg: colorMode === 'dark' ? '#d7819b' : 'gray.500',
73+
},
74+
}),
75+
76+
heavy: ({ colorMode }) => ({
77+
bg: 'transparent',
78+
color: colorMode === 'dark' ? 'gray.400' : 'gray.500',
79+
fontWeight: 700,
80+
fontSize: '13px',
81+
borderWidth: '1px',
82+
borderColor: 'transparent',
83+
rounded: 'md',
84+
textTransform: 'uppercase',
85+
lineHeight: 'initial',
86+
_hover: {
87+
bg: colorMode === 'dark' ? 'gray.700' : 'gray.600',
88+
color: '#fff',
89+
textDecoration: 'none !important',
90+
borderColor: colorMode === 'dark' ? 'gray.600' : 'gray.600',
91+
shadow: 'xl',
92+
},
93+
_focus: { boxShadow: 'none' },
94+
}),
95+
silent: ({ colorMode }) => ({
96+
fontWeight: 'normal',
97+
fontSize: 'sm',
98+
color: colorMode === 'dark' ? 'gray.400' : 'gray.500',
99+
outline: 'none',
100+
lineHeight: 'initial',
101+
_hover: {
102+
color: colorMode === 'dark' ? 'gray.200' : 'gray.700',
103+
textDecoration: 'none',
104+
},
105+
_focus: {
106+
outline: 'none',
107+
boxShadow: 'none',
108+
color: colorMode === 'dark' ? 'gray.200' : 'gray.700',
109+
},
110+
}),
111+
},
112+
},
113+
Tooltip: {
114+
variants: {
115+
default: () => ({
116+
color: 'gray.50',
117+
bg: 'gray.500',
118+
fontWeight: '400',
119+
fontSize: 'sm',
120+
rounded: 'sm',
121+
px: '3',
122+
py: '1',
123+
}),
124+
},
125+
},
126+
},
127+
});
128+
export default extendTheme(theme);

‎src/components/Common/Footer.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/* eslint-disable react/jsx-wrap-multilines */
22
import { Box, Link, Text, Button, Center, HStack } from '@chakra-ui/react';
33
import React from 'react';
4-
import { dynamic } from '../state';
5-
import Modal from './Common/Modal';
4+
import { dynamic } from '../../state';
5+
import Modal from './Modal';
66
import {
77
LoIcon,
88
SoundIcon,
@@ -11,10 +11,10 @@ import {
1111
UserIcon,
1212
CopyrightIcon,
1313
CreditsIcon,
14-
} from './icons';
15-
import Credits from './Misc/Credits';
16-
import SourceCode from './Misc/SourceCode';
17-
import ThemeSwitch from './theme-switch';
14+
} from '../icons';
15+
import Credits from '../Misc/Credits';
16+
import SourceCode from '../Misc/SourceCode';
17+
import ThemeSwitch from '../theme-switch';
1818

1919
const Footer = ({ toggleSound, playSound }) => (
2020
<Center my="6">

‎src/components/SavedBlobs.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const SavedBlobs = ({ savedBlobs = [], deleteBlob, loadBlobs }) => {
3737
>
3838
{savedBlobs?.map((blob) => (
3939
<LinkBox
40-
h="200"
40+
// h="200"
4141
rounded="2xl"
4242
p="5"
4343
borderWidth="1px"

‎src/components/layout.js

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@ import * as React from 'react';
99
import PropTypes from 'prop-types';
1010
import { useStaticQuery, graphql } from 'gatsby';
1111
import { Box, Container, useColorModeValue } from '@chakra-ui/react';
12+
import { Provider } from 'redux-zero/react';
13+
import { store } from '../state';
1214

13-
import Footer from '../components/Common/Footer';
15+
import Footer from './Common/Footer';
1416

1517
const Layout = ({ children }) => {
1618
const theme = useColorModeValue('light', 'dark');
@@ -25,20 +27,22 @@ const Layout = ({ children }) => {
2527
`);
2628

2729
return (
28-
<Box className={theme}>
29-
<Container
30-
maxW="container.xl"
31-
flex="1"
32-
display="flex"
33-
flexDir="column"
34-
minH="100vh"
35-
>
36-
<Box as="main" flex="1" display="flex" flexDir="column">
37-
{children}
38-
</Box>
39-
<Footer siteTitle={data.site.siteMetadata?.title || 'Title'} />
40-
</Container>
41-
</Box>
30+
<Provider store={store}>
31+
<Box className={theme}>
32+
<Container
33+
maxW="container.xl"
34+
flex="1"
35+
display="flex"
36+
flexDir="column"
37+
minH="100vh"
38+
>
39+
<Box as="main" flex="1" display="flex" flexDir="column">
40+
{children}
41+
</Box>
42+
<Footer siteTitle={data.site.siteMetadata?.title || 'Title'} />
43+
</Container>
44+
</Box>
45+
</Provider>
4246
);
4347
};
4448

‎src/components/theme-switch.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,17 @@ import { Button, useColorMode, useColorModeValue } from '@chakra-ui/react';
33
import React from 'react';
44

55
export default function ThemeSwitch() {
6-
const { toggleColorMode: toggleMode } = useColorMode();
6+
const { colorMode, toggleColorMode: toggleMode } = useColorMode();
77
const ToggleIcon = useColorModeValue(SunIcon, MoonIcon);
88
return (
99
<Button
1010
leftIcon={<ToggleIcon fontSize="18px" />}
1111
variant="silent"
1212
aria-label="Toggle Theme"
13-
onClick={toggleMode}
13+
onClick={() => {
14+
console.log('rrrrr', toggleMode);
15+
toggleMode();
16+
}}
1417
>
1518
Switch theme
1619
</Button>

‎src/pages/index.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ import Actions from '../components/actions';
77
import Logo from '../components/Logo';
88
import BlobContainer from '../components/BlobContainer';
99
import NavLinks from '../components/NavLinks';
10+
import Layout from '../components/layout';
1011

1112
const IndexPage = () => (
12-
<>
13+
<Layout>
1314
<SEO
1415
title="Blobs - Generate beautiful blob shapes for web and flutter apps"
1516
description="Customizable blobs as SVG and Flutter Widget. Create random or fixed blobs, loop, animate, clip them with ease"
@@ -65,7 +66,7 @@ const IndexPage = () => (
6566
</Box>
6667
</Box>
6768
</Flex>
68-
</>
69+
</Layout>
6970
);
7071

7172
export default IndexPage;

‎src/pages/page-2.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ import SEO from '../components/seo';
77

88
import Logo from '../components/Logo';
99
import SavedBlobs from '../components/SavedBlobs';
10+
import Layout from '../components/layout';
1011

1112
const SecondPage = () => (
12-
<>
13+
<Layout>
1314
<SEO
1415
title="Save blobs locally and access them anytime even when in offline"
1516
description="Customizable blobs as SVG and Flutter Widget. Create random or fixed blobs, loop, animate, clip them with ease"
@@ -37,7 +38,7 @@ const SecondPage = () => (
3738
Go back to the homepage
3839
</Link>
3940
</Center>
40-
</>
41+
</Layout>
4142
);
4243

4344
export default SecondPage;

0 commit comments

Comments
 (0)