Skip to content

Commit 33393ef

Browse files
imhardikdesaiimhardikdesai
committed
Fix dark mode , add new features and fix bugs
1 parent e77fa4d commit 33393ef

5 files changed

Lines changed: 51 additions & 67 deletions

File tree

‎src/Components/Intro/Introduction.jsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
import { Flex, Container, Heading, Stack, Text, Button, Box } from '@chakra-ui/react';
22
import './introduction.css';
33
import homeLogo from './../../Assets/home-logo.png'
4-
// import { Link as ReachLink } from 'react-router-dom'
54
import { Image } from '@chakra-ui/react'
6-
import { useContext, useState } from 'react';
5+
import { useContext } from 'react';
76
import ResumeContext from '../../Context/ResumeContext';
87
import ThemeTemplateData from '../../db/ThemeTemplateData';
98

109
export default function Introduction() {
11-
const { setCurrentTheme, showComponent, setShowComponent } = useContext(ResumeContext);
12-
const [selectBtn, setSelectBtn] = useState(true)
10+
const { selectBtn, setSelectBtn, setCurrentTheme, showComponent, setShowComponent } = useContext(ResumeContext);
1311

1412
const handleSelectTemplate = () => {
1513
setSelectBtn(!selectBtn)
@@ -49,22 +47,22 @@ export default function Introduction() {
4947
Resume builder tools that assemble well-formatted resume. Through a resume builder, you can create a professional-looking resume in a few easy steps. This resume builder offer different template options, so you can select the template that best fits your needs and style.
5048
</Text>
5149

52-
<Flex textAlign={'start'} flexDirection={'column'} w={'full'}>
50+
<Flex _dark={{ color: 'gray.50' }} textAlign={'start'} flexDirection={'column'} w={'full'}>
5351
<Box className='Bullet_Points'>
5452
<Button>1</Button>
55-
<Text color={'gray.900'} fontSize={'xl'}>
53+
<Text _dark={{ color: "gray.400" }} color={'gray.900'} fontSize={'xl'}>
5654
Select a template from our collection.
5755
</Text>
5856
</Box>
5957
<Box className='Bullet_Points'>
6058
<Button>2</Button>
61-
<Text color={'gray.900'} fontSize={'xl'}>
59+
<Text _dark={{ color: "gray.400" }} color={'gray.900'} fontSize={'xl'}>
6260
Build you resume using our easy to use resume builder.
6361
</Text>
6462
</Box>
6563
<Box className='Bullet_Points'>
6664
<Button>3</Button>
67-
<Text color={'gray.900'} fontSize={'xl'}>
65+
<Text _dark={{ color: "gray.400" }} color={'gray.900'} fontSize={'xl'}>
6866
Download your resume.
6967
</Text>
7068
</Box>
@@ -94,6 +92,7 @@ export default function Introduction() {
9492
onClick={handleSelectTemplate}
9593
rounded={'full'}
9694
px={6}
95+
className='mb-4'
9796
colorScheme={'teal'}
9897
bg={'#38B2AC'}
9998
_hover={{ bg: '#319795' }}>

‎src/Components/Navbar/Navbar.jsx‎

Lines changed: 4 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,6 @@ import { HamburgerIcon, CloseIcon, MoonIcon, SunIcon } from '@chakra-ui/icons';
33
import { Link as ReachLink } from 'react-router-dom'
44
import logo from './../../Assets/logo.png';
55

6-
const Links = ['Home', 'About'];
7-
8-
const NavLink = (link) => (
9-
10-
<ReachLink
11-
px={2}
12-
py={1}
13-
rounded={'md'}
14-
_hover={{
15-
textDecoration: 'none',
16-
bg: useColorModeValue('gray.200', 'gray.700'),
17-
}}
18-
to={'/' + (link.children).toLowerCase()}
19-
key={link.children}>
20-
{link.children}
21-
</ReachLink>
22-
);
236

247
export default function Navbar() {
258
const { colorMode, toggleColorMode } = useColorMode();
@@ -36,9 +19,8 @@ export default function Navbar() {
3619
as={'nav'}
3720
spacing={4}
3821
display={{ base: 'none', md: 'flex' }}>
39-
{Links.map((link) => (
40-
<NavLink key={link}>{link}</NavLink>
41-
))}
22+
<ReachLink px={2} py={1} rounded={'md'} _hover={{ textDecoration: 'none', bg: 'gray.200' }} to={'/'} >Home </ReachLink>
23+
<ReachLink px={2} py={1} rounded={'md'} _hover={{ textDecoration: 'none', bg: 'gray.200' }} to={'/about'}> About</ReachLink>
4224
</HStack>
4325
<Button onClick={toggleColorMode}>
4426
{colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
@@ -58,9 +40,8 @@ export default function Navbar() {
5840
{isOpen ? (
5941
<Box pb={4} display={{ md: 'none' }}>
6042
<Stack as={'nav'} spacing={4}>
61-
{Links.map((link) => (
62-
<NavLink key={link}>{link}</NavLink>
63-
))}
43+
<ReachLink px={2} py={1} rounded={'md'} _hover={{ textDecoration: 'none', bg: 'gray.200' }} to={'/'} >Home </ReachLink>
44+
<ReachLink px={2} py={1} rounded={'md'} _hover={{ textDecoration: 'none', bg: 'gray.200' }} to={'/about'}> About</ReachLink>
6445
</Stack>
6546
</Box>
6647
) : null}

‎src/Context/ResumeState.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,12 @@ const ResumeState = (props) => {
5050
const [checkAward, setCheckAward] = useState(false);
5151
const [loading, setLoading] = useState(false);
5252
const [showComponent, setShowComponent] = useState(false);
53-
const [currentTheme, setCurrentTheme] = useState(false);
53+
const [currentTheme, setCurrentTheme] = useState('');
54+
const [selectBtn, setSelectBtn] = useState(true)
55+
5456

5557
return (
56-
<ResumeContext.Provider value={{ checkAward, setCheckAward, componentRef, handlePrint, currentTheme, setCurrentTheme, showComponent, setShowComponent, loading, setLoading, themeData, setThemeData, checkProj, checkWork, setCheckProj, setCheckWork }
57-
}>
58+
<ResumeContext.Provider value={{ selectBtn, setSelectBtn, checkAward, setCheckAward, componentRef, handlePrint, currentTheme, setCurrentTheme, showComponent, setShowComponent, loading, setLoading, themeData, setThemeData, checkProj, checkWork, setCheckProj, setCheckWork }}>
5859
{props.children}
5960
</ResumeContext.Provider >
6061
)

‎src/Pages/BuilderArea.jsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,25 @@ import ResumeContext from '../Context/ResumeContext';
77
import PropagateLoader from "react-spinners/PropagateLoader";
88

99
const BuilderArea = (props) => {
10-
const { loading, handlePrint } = useContext(ResumeContext)
10+
const { showComponent, setShowComponent, loading, handlePrint } = useContext(ResumeContext)
11+
12+
const handleSelectNewTemplate = () => {
13+
setShowComponent(!showComponent)
14+
}
1115

1216
return (
1317
<>
14-
{
15-
loading && <PropagateLoader id='spinner' color="#319795" size={30} />
16-
}
18+
{loading && <PropagateLoader id='spinner' color="#319795" size={30} />}
19+
1720
<div id='main-box' className="d-flex justify-content-between flex-wrap mt-4 mx-2">
1821
<UserDataCollect />
1922
<div id='theme-box-border'>
2023
{props.theme}
2124
</div>
2225
</div>
23-
<div className="text-center">
24-
<Button className='m-5' onClick={handlePrint}>Print</Button>
26+
<div className="d-flex justify-content-center">
27+
<Button className='m-5' colorScheme={'teal'} variant={'outline'} onClick={handlePrint}>Print</Button>
28+
<Button className='m-5' colorScheme={'teal'} variant={'outline'} onClick={handleSelectNewTemplate}>Select Another Template</Button>
2529
</div>
2630
<Footer />
2731
</>

‎src/Theme/Theme1/Theme1.jsx‎

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@ const Theme1 = (props) => {
1616
const { awards } = themeData.awardData;
1717
return (
1818
<>
19-
<div id="section-to-print" ref={componentRef}>
20-
<div id="theme1">
19+
<Box id="section-to-print" ref={componentRef}>
20+
<Box _dark={{ border: '1px solid white' }} id="theme1">
2121
{/* Personal Info */}
2222
<header id='info' className='text-center mt-2'>
23-
<Heading as='h2' size='2xl' noOfLines={1}>
23+
<Heading as='h2' size='2xl' className='mb-2'>
2424
{name}
2525
</Heading>
2626
<Text fontSize='md' className='text-muted my-1 '>
@@ -34,35 +34,34 @@ const Theme1 = (props) => {
3434
</header>
3535
{/* Skills Part */}
3636
<section id="skills" className='my-2'>
37-
<Heading bg={'#D2E4E1'} as='h3' size='md' px={20} py={2}>
37+
<Heading _dark={{ color: 'gray.800' }} bg={'#D2E4E1'} as='h3' size='md' px={20} py={2}>
3838
TECHNICAL SKILLS
3939
</Heading>
4040

4141
<Box id='skills-set' className='basic-set d-flex justify-content-center align-items-center'>
42-
<div className='skillBox'>
42+
<Box className='skillBox'>
4343
{
4444
skill.split(',').map((element, index) => <Badge key={index} className='skill-badge' variant='solid'>{element}</Badge>)
4545
}
46-
</div>
46+
</Box>
4747
</Box>
4848
</section>
4949

5050
{/* Project Section */}
5151
{
5252
!checkProj &&
53-
5453
<section id="projects" className='my-2'>
55-
<Heading bg={'#D2E4E1'} as='h3' size='md' px={20} py={2}>
54+
<Heading _dark={{ color: 'gray.800' }} bg={'#D2E4E1'} as='h3' size='md' px={20} py={2}>
5655
PROJECTS
5756
</Heading>
5857

5958
<Box id='project-set' className='basic-set'>
6059
{
6160
Object.entries(projectTitles).map((element, index) => {
6261
return (
63-
<div key={index} className="subBox">
62+
<Box key={index} className="subBox">
6463
<Text className='sub-title'>{element[1]}</Text>
65-
<div className='sub-details'>
64+
<Box className='sub-details'>
6665
{
6766
(Object.entries(projectDesc)[index] === undefined)
6867
?
@@ -72,8 +71,8 @@ const Theme1 = (props) => {
7271
return <li key={index}>{element}</li>
7372
})
7473
}
75-
</div>
76-
</div>
74+
</Box>
75+
</Box>
7776
)
7877
})
7978
}
@@ -84,17 +83,17 @@ const Theme1 = (props) => {
8483
{/* Education Part */}
8584

8685
<section id="education" className='my-2'>
87-
<Heading bg={'#D2E4E1'} as='h3' size='md' px={20} py={2}>
86+
<Heading _dark={{ color: 'gray.800' }} bg={'#D2E4E1'} as='h3' size='md' px={20} py={2}>
8887
EDUCATION
8988
</Heading>
9089

9190
<Box id='education-set' className='basic-set'>
9291
{
9392
Object.entries(educationTitles).map((element, index) => {
9493
return (
95-
<div key={index} className="subBox">
94+
<Box key={index} className="subBox">
9695
<Text className='sub-title'>{element[1]}</Text>
97-
<div className='sub-details'>
96+
<Box className='sub-details'>
9897
{
9998
(Object.entries(educationDesc)[index] === undefined)
10099
?
@@ -104,8 +103,8 @@ const Theme1 = (props) => {
104103
return <li key={index}>{element}</li>
105104
})
106105
}
107-
</div>
108-
</div>
106+
</Box>
107+
</Box>
109108
)
110109
})
111110
}
@@ -116,17 +115,17 @@ const Theme1 = (props) => {
116115
{
117116
!checkWork &&
118117
<section id="experience" className='my-2'>
119-
<Heading bg={'#D2E4E1'} as='h3' size='md' px={20} py={2}>
118+
<Heading _dark={{ color: 'gray.800' }} bg={'#D2E4E1'} as='h3' size='md' px={20} py={2}>
120119
WORK EXPERIENCE
121120
</Heading>
122121

123122
<Box id='experience-set' className='basic-set'>
124123
{
125124
Object.entries(workTitles).map((element, index) => {
126125
return (
127-
<div key={index} className="subBox">
126+
<Box key={index} className="subBox">
128127
<Text className='sub-title'>{element[1]}</Text>
129-
<div className='sub-details'>
128+
<Box className='sub-details'>
130129
{
131130
(Object.entries(workDesc)[index] === undefined)
132131
?
@@ -136,8 +135,8 @@ const Theme1 = (props) => {
136135
return <li key={index}>{element}</li>
137136
})
138137
}
139-
</div>
140-
</div>
138+
</Box>
139+
</Box>
141140
)
142141
})
143142
}
@@ -148,24 +147,24 @@ const Theme1 = (props) => {
148147
{
149148
!checkAward &&
150149
<section id="awards" className='my-2'>
151-
<Heading bg={'#D2E4E1'} as='h3' size='md' px={20} py={2}>
150+
<Heading _dark={{ color: 'gray.800' }} bg={'#D2E4E1'} as='h3' size='md' px={20} py={2}>
152151
AWARDS & ACHIEVEMENTS
153152
</Heading>
154153

155154
<Box id='award-set' className='basic-set d-flex justify-content-between align-items-center'>
156-
<div>
155+
<Box>
157156
{
158157
awards.split(',').map((element, index) => {
159158
return <li key={index}>{element}</li>
160159
})
161160
}
162161

163-
</div>
162+
</Box>
164163
</Box>
165164
</section>
166165
}
167-
</div>
168-
</div>
166+
</Box>
167+
</Box>
169168
</>
170169
)
171170
}

0 commit comments

Comments
 (0)