Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit de6d8cb

Browse files
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 <lokesh.aero@gmail.com>",
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"
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;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /