Skip to content

Commit 28ef880

Browse files
ar1603ar1603
authored
feat(AR-63): Fix colors (#39)
1 parent 30fa893 commit 28ef880

18 files changed

Lines changed: 163 additions & 62 deletions

File tree

‎.eslintrc.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
"no-useless-escape": "off",
2727
"react-hooks/rules-of-hooks": "error",
2828
"react-hooks/exhaustive-deps": "warn",
29-
"@typescript-eslint/no-empty-interface": "off",
30-
"@typescript-eslint/no-empty-function": "off",
29+
"@typescript-eslint/no-empty-interface": "error",
30+
"@typescript-eslint/no-empty-function": "error",
3131
"no-nested-ternary": "off",
3232
"no-multiple-empty-lines": "off",
3333
"no-irregular-whitespace": "off",

‎src/components/Theme/colorSelector/__tests__/__snapshots__/useColorSelector.test.tsx.snap‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`useColorSelector should return correct color for dark mode 1`] = `
4+
{
5+
"bg": {
6+
"container": "green.700",
7+
},
8+
"gradient": {
9+
"contentBG": "linear(to-r, green.800, blue.900)",
10+
"sideBarBG": "linear(to-br, green.800, blue.900)",
11+
"topAppBar": "linear(to-r, green.800, blue.900)",
12+
},
13+
"icon": {
14+
"primary": {
15+
"bg": "white",
16+
"color": "green.700",
17+
},
18+
"secondary": "green.700",
19+
},
20+
"text": {
21+
"Heading": "green.700",
22+
"Hero": "linear(to-b, green.700, blue.700)",
23+
},
24+
}
25+
`;
26+
27+
exports[`useColorSelector should return correct color for light mode 1`] = `
28+
{
29+
"bg": {
30+
"container": "green.200",
31+
},
32+
"gradient": {
33+
"contentBG": "linear(to-r, green.200, blue.400)",
34+
"sideBarBG": "linear(to-br, green.300, blue.500)",
35+
"topAppBar": "linear(to-r, green.300, blue.500)",
36+
},
37+
"icon": {
38+
"primary": {
39+
"bg": "white",
40+
"color": "green.400",
41+
},
42+
"secondary": "green.500",
43+
},
44+
"text": {
45+
"Heading": "green.500",
46+
"Hero": "linear(to-b, green.500, blue.500)",
47+
},
48+
}
49+
`;

‎src/components/Theme/colorSelector/__tests__/useColorSelector.test.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { renderHook } from '@testing-library/react';
2+
import useColorSelector from '../useColorSelector';
3+
import { useColorMode } from '@chakra-ui/react';
4+
5+
jest.mock('@chakra-ui/react', () => ({
6+
useColorMode: jest.fn(() => ({ colorMode: 'light' })),
7+
}));
8+
9+
const mockUseColorMode = useColorMode as jest.Mock;
10+
11+
describe('useColorSelector', () => {
12+
it('should return correct color for light mode', () => {
13+
const { result } = renderHook(() => useColorSelector());
14+
15+
expect(result.current).toMatchSnapshot();
16+
});
17+
18+
it('should return correct color for dark mode', () => {
19+
mockUseColorMode.mockImplementation(() => ({ colorMode: 'dark' }));
20+
const { result } = renderHook(() => useColorSelector());
21+
22+
expect(result.current).toMatchSnapshot();
23+
});
24+
});

‎src/components/Theme/colorSelector/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as useColorSelector } from './useColorSelector';

‎src/components/Theme/colorSelector/useColorSelector.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { useColorMode } from '@chakra-ui/react';
2+
3+
const useColorSelector = () => {
4+
const { colorMode } = useColorMode();
5+
6+
return colorMode === 'light'
7+
? {
8+
text: {
9+
Heading: 'green.500',
10+
Hero: 'linear(to-b, green.500, blue.500)',
11+
},
12+
icon: {
13+
primary: {
14+
color: 'green.400',
15+
bg: 'white',
16+
},
17+
secondary: 'green.500',
18+
},
19+
bg: {
20+
container: 'green.200',
21+
},
22+
gradient: {
23+
topAppBar: 'linear(to-r, green.300, blue.500)',
24+
sideBarBG: 'linear(to-br, green.300, blue.500)',
25+
contentBG: 'linear(to-r, green.200, blue.400)',
26+
},
27+
}
28+
: {
29+
text: {
30+
Heading: 'green.700',
31+
Hero: 'linear(to-b, green.700, blue.700)',
32+
},
33+
icon: {
34+
primary: {
35+
color: 'green.700',
36+
bg: 'white',
37+
},
38+
secondary: 'green.700',
39+
},
40+
bg: {
41+
container: 'green.700',
42+
},
43+
gradient: {
44+
topAppBar: 'linear(to-r, green.800, blue.900)',
45+
sideBarBG: 'linear(to-br, green.800, blue.900)',
46+
contentBG: 'linear(to-r, green.800, blue.900)',
47+
},
48+
};
49+
};
50+
51+
export default useColorSelector;

‎src/components/Theme/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export { default as theme } from './theme';
2+
export * from './colorSelector';

‎src/components/modal/Modal.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
import { Modal, ModalContent, ModalOverlay } from '@chakra-ui/react';
22
import { ModalProps } from './types';
3-
import { useTranslation } from 'react-i18next';
43
import { SearchModal } from './Modals';
54
import { ModalIDs } from '@store';
65

76
const ModalComponent = ({ isOpen, modalID, onModalClose }: ModalProps) => {
8-
const { t } = useTranslation();
9-
107
return (
118
<Modal isOpen={isOpen} onClose={onModalClose}>
129
<ModalOverlay />

‎src/router/lazyScreen/__test__/LazyMainFlowScreen.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { render, screen } from '@testing-library/react';
1+
import { render } from '@testing-library/react';
22
import {
33
LazyAboutScreen,
44
LazyBlogsScreen,

‎src/screens/mainFlow/Home/Home.tsx‎

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import { Box, Img, Text, useColorMode } from '@chakra-ui/react';
2-
import { TypeWriterText } from '@components';
3-
import { color } from 'framer-motion';
2+
import { TypeWriterText, useColorSelector } from '@components';
43
import { useTranslation } from 'react-i18next';
54

65
const Home = () => {
76
const { t } = useTranslation();
8-
const { colorMode } = useColorMode();
7+
const { text, gradient } = useColorSelector();
98

109
return (
1110
<Box
@@ -25,7 +24,7 @@ const Home = () => {
2524
<Text
2625
fontSize="3xl"
2726
fontWeight="bold"
28-
bgGradient={'linear(to-b, green.500, blue.500)'}
27+
bgGradient={text.Hero}
2928
bgClip={'text'}
3029
fontFamily={'monospace'}
3130
>
@@ -35,7 +34,7 @@ const Home = () => {
3534
<Text
3635
fontSize="6xl"
3736
fontWeight="bold"
38-
bgGradient={'linear(to-b, green.500, blue.500)'}
37+
bgGradient={text.Hero}
3938
bgClip={'text'}
4039
fontFamily={'monospace'}
4140
>
@@ -81,11 +80,7 @@ const Home = () => {
8180
flexDirection="column"
8281
justifyContent="center"
8382
marginTop={5}
84-
bgGradient={
85-
colorMode === 'light'
86-
? 'linear(to-r, green.200, blue.400)'
87-
: 'linear(to-r, green.800, blue.900)'
88-
}
83+
bgGradient={gradient.contentBG}
8984
boxShadow={'lg'}
9085
padding={'4'}
9186
borderRadius={'lg'}
@@ -101,11 +96,7 @@ const Home = () => {
10196
flexDirection="column"
10297
justifyContent="center"
10398
marginTop={5}
104-
bgGradient={
105-
colorMode === 'light'
106-
? 'linear(to-r, green.200, blue.400)'
107-
: 'linear(to-r, green.800, blue.900)'
108-
}
99+
bgGradient={gradient.contentBG}
109100
boxShadow={'lg'}
110101
padding={'4'}
111102
borderRadius={'lg'}

‎src/screens/mainFlow/MainScreen.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
1-
import { Box, Grid, GridItem, HStack, Stack, Text } from '@chakra-ui/react';
2-
import { TypeWriterText } from '@components';
3-
import { useTranslation } from 'react-i18next';
1+
import { Box, Grid, GridItem } from '@chakra-ui/react';
42
import { Outlet } from 'react-router-dom';
53
import { SideBar, NavigationBar } from './components';
64

75
const MainScreen = () => {
8-
const { t } = useTranslation();
9-
106
return (
117
<Grid
128
maxWidth={'8xl'}

0 commit comments

Comments
 (0)