Skip to content

Commit 98ec69f

Browse files
mathcodesmathcodes
committed
dynamic ui css adjustments
1 parent 45d76a4 commit 98ec69f

File tree

9 files changed

+214
-15
lines changed

9 files changed

+214
-15
lines changed

‎src/components/Contacts/Contacts.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ function Contacts() {
6363
justifyContent: 'center',
6464
padding: '5px',
6565
backgroundColor: 'none',
66-
color: theme.secondary,
66+
color: theme.secondary70,
6767
transition: '250ms ease-in-out',
6868
'&:hover': {
6969

@@ -73,7 +73,7 @@ function Contacts() {
7373
},
7474
detailsIcon: {
7575
backgroundColor: '#667',
76-
color: '#232526',
76+
color: '#eaeaea',
7777
borderRadius: '50%',
7878
border: '2px solid #232526',
7979
width: '45px',

‎src/components/Footer/Footer.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,20 @@
1919
color: #eaeaea;
2020
}
2121

22+
.contact-icons{
23+
color: #eaeaea;
24+
}
25+
26+
.detailsIcon, .socialIcon {
27+
background: none;
28+
font-size: 35px;
29+
margin: 0 1rem;
30+
color:#eaeaea;
31+
transition: transform 0.5s;
32+
}
33+
34+
.detailsIcon:hover, .socialIcon:hover {
35+
transform: scale(1.2);
36+
color: #C0C1C6;
37+
background: none;
38+
}

‎src/components/Footer/Footer.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import { FiPhone, FiAtSign } from 'react-icons/fi';
1515
import { HiOutlineLocationMarker } from 'react-icons/hi';
1616
import { socialsData } from '../../data/socialsData';
1717
import { contactsData } from '../../data/contactsData';
18+
import SocialMediaIcons from '../SocialMediaIcons/SocialMediaIcons';
19+
1820
const Footer = () => {
1921

2022
const { theme } = useContext(ThemeContext)

‎src/components/Landing/Landing.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
display: flex;
4949
align-items: center;
5050
justify-content: flex-start;
51+
color:#eaeaea;
5152
}
5253

5354
.landing--social {

‎src/components/Landing/Landing.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -33,19 +33,20 @@ function Landing() {
3333
>
3434
<FaGithub
3535
className='landing--social'
36-
style={{ color: theme.secondary }}
36+
style={{ color: theme.secondary70 }}
3737
aria-label='GitHub'
3838
/>
3939
</a>
40-
)}{socialsData.twitter && (
40+
)}
41+
{socialsData.twitter && (
4142
<a
4243
href={socialsData.twitter}
4344
target='_blank'
4445
rel='noreferrer'
4546
>
4647
<FaTwitter
4748
className='landing--social'
48-
style={{ color: theme.secondary }}
49+
style={{ color: theme.secondary70 }}
4950
aria-label='Twitter'
5051
/>
5152
</a>
@@ -58,7 +59,7 @@ function Landing() {
5859
>
5960
<FaLinkedin
6061
className='landing--social'
61-
style={{ color: theme.secondary }}
62+
style={{ color: theme.secondary70 }}
6263
aria-label='LinkedIn'
6364
/>
6465
</a>
@@ -71,7 +72,7 @@ function Landing() {
7172
>
7273
<FaYoutube
7374
className='landing--social'
74-
style={{ color: theme.secondary }}
75+
style={{ color: theme.secondary70 }}
7576
aria-label='YouTube'
7677
/>
7778
</a>
@@ -84,7 +85,7 @@ function Landing() {
8485
>
8586
<FaStackOverflow
8687
className='landing--social'
87-
style={{ color: theme.secondary }}
88+
style={{ color: theme.secondary70 }}
8889
aria-label='stackOverflow'
8990
/>
9091
</a>
@@ -97,7 +98,7 @@ function Landing() {
9798
>
9899
<FaCodepen
99100
className='landing--social'
100-
style={{ color: theme.secondary }}
101+
style={{ color: theme.secondary70 }}
101102
aria-label='CodePen'
102103
/>
103104
</a>
@@ -110,7 +111,7 @@ function Landing() {
110111
>
111112
<SiReplit
112113
className='landing--social'
113-
style={{ color: theme.secondary }}
114+
style={{ color: theme.secondary70 }}
114115
aria-label='Replit'
115116
/>
116117
</a>

‎src/components/PreContact/PreContact.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
.css-12wnr2w-MuiButtonBase-root-MuiCheckbox-root.Mui-checked,
77
.css-12wnr2w-MuiButtonBase-root-MuiCheckbox-root.MuiCheckbox-indeterminate
88
{
9-
color: #232526;
9+
color: #eaeaea;
1010
}
1111

1212
.contactsHead
@@ -108,18 +108,18 @@ li
108108

109109
a:-webkit-any-link
110110
{
111-
color: #eaeaea;
111+
/* color: #eaeaea; */
112112
cursor: pointer;
113113
text-decoration: none;
114114
transition: all 0s;
115115
}
116116

117-
a:-webkit-any-link:hover
117+
/* a:-webkit-any-link:hover
118118
{
119119
background-color: #232526;
120120
color: #212121;
121121
font-weight: 400;
122-
}
122+
} */
123123

124124
.makeStyles-socialIcon-31
125125
{

‎src/components/SocialMediaIcons/SocialMediaIcons.css‎

Whitespace-only changes.

‎src/components/SocialMediaIcons/SocialMediaIcons.js‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
/* eslint-disable no-undef */
2+
import React from 'react';
3+
import { makeStyles } from '@material-ui/core/styles';
4+
import Box from '@mui/material/Box';
5+
import Container from '@mui/material/Container';
6+
7+
import {
8+
FaTwitter,
9+
FaLinkedinIn,
10+
FaGithub,
11+
FaYoutube,
12+
FaStackOverflow,
13+
FaCodepen,
14+
} from 'react-icons/fa';
15+
import { SiReplit } from 'react-icons/si';
16+
import { ThemeContext } from '../../contexts/ThemeContext';
17+
import { socialsData } from '../../data/socialsData';
18+
import './SocialMediaIcons.css';
19+
20+
21+
function SocialMediaIcons() {
22+
const { theme } = useContext(ThemeContext);
23+
24+
25+
26+
const useStyles = makeStyles((t) => ({
27+
input: {
28+
border: `4px solid ${theme.primary80}`,
29+
backgroundColor: `${theme.secondary}`,
30+
color: `purple`,
31+
fontFamily: 'var(--primaryFont)',
32+
fontWeight: 500,
33+
transition: 'border 0.2s ease-in-out',
34+
'&:focus': {
35+
border: `4px solid ${theme.primary600}`,
36+
color: 'black',
37+
},
38+
},
39+
40+
label: {
41+
backgroundColor: `${theme.secondary}`,
42+
color: `${theme.primary}`,
43+
fontFamily: 'var(--primaryFont)',
44+
fontWeight: 600,
45+
// fontSize: '0.9rem',
46+
padding: '0 5px',
47+
transform: 'translate(25px,50%)',
48+
display: 'inline-flex',
49+
'&:hover': {
50+
transform: 'scale(1.1)',
51+
color: '#000',
52+
backgroundColor: theme.tertiary,
53+
},
54+
},
55+
socialIcon: {
56+
width: '55px',
57+
height: '55px',
58+
borderRadius: '50%',
59+
border: `2px solid #232526`,
60+
fontSize: '45px',
61+
display: 'flex',
62+
alignItems: 'center',
63+
justifyContent: 'center',
64+
padding: '5px',
65+
backgroundColor: 'none',
66+
color: theme.secondary,
67+
transition: '250ms ease-in-out',
68+
'&:hover': {
69+
70+
color: '#000',
71+
backgroundColor: theme.tertiary,
72+
},
73+
},
74+
detailsIcon: {
75+
backgroundColor: '#667',
76+
color: '#232526',
77+
borderRadius: '50%',
78+
border: '2px solid #232526',
79+
width: '45px',
80+
height: '45px',
81+
display: 'flex',
82+
alignItems: 'center',
83+
justifyContent: 'center',
84+
fontSize: '23px',
85+
transition: '250ms ease-in-out',
86+
flexShrink: 0,
87+
'&:hover': {
88+
transform: 'scale(1.1)',
89+
color: '#667',
90+
backgroundColor: '#232526',
91+
},
92+
typoImpo: {
93+
color: theme.secondary,
94+
}
95+
},
96+
97+
}));
98+
99+
const classes = useStyles();
100+
return (
101+
<div className='socialmedia-icons'>
102+
{socialsData.github && (
103+
<a
104+
href={socialsData.github}
105+
target='_blank'
106+
rel='noreferrer'
107+
className={classes.socialIcon}
108+
>
109+
<FaGithub aria-label='GitHub' className="localIcon" />
110+
</a>
111+
)}
112+
{socialsData.twitter && (
113+
<a
114+
href={socialsData.twitter}
115+
target='_blank'
116+
rel='noreferrer'
117+
className={classes.socialIcon}
118+
>
119+
<FaTwitter aria-label='Twitter' className="localIcon" />
120+
</a>
121+
)}
122+
123+
{socialsData.linkedIn && (
124+
<a
125+
href={socialsData.linkedIn}
126+
target='_blank'
127+
rel='noreferrer'
128+
className={classes.socialIcon}
129+
>
130+
<FaLinkedinIn aria-label='LinkedIn' className="localIcon" />
131+
</a>
132+
)}
133+
134+
{socialsData.youtube && (
135+
<a
136+
href={socialsData.youtube}
137+
target='_blank'
138+
rel='noreferrer'
139+
className={classes.socialIcon}
140+
>
141+
<FaYoutube aria-label='YouTube' className="localIcon" />
142+
</a>
143+
)}
144+
{socialsData.stackOverflow && (
145+
<a
146+
href={socialsData.stackOverflow}
147+
target='_blank'
148+
rel='noreferrer'
149+
className={classes.socialIcon}
150+
>
151+
<FaStackOverflow aria-label='Stack Overflow' className="localIcon" />
152+
</a>
153+
)}
154+
{socialsData.codepen && (
155+
<a
156+
href={socialsData.codepen}
157+
target='_blank'
158+
rel='noreferrer'
159+
className={classes.socialIcon}
160+
>
161+
<FaCodepen aria-label='CodePen' className="localIcon" />
162+
</a>
163+
)}
164+
{socialsData.replit && (
165+
<a
166+
href={socialsData.replit}
167+
target='_blank'
168+
rel='noreferrer'
169+
className={classes.socialIcon}
170+
>
171+
<SiReplit aria-label='replit' className="localIcon" />
172+
</a>
173+
)}
174+
</div>
175+
)
176+
}
177+
178+
export default SocialMediaIcons

‎src/components/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ export { default as About } from './About/About'
44
export { default as Skills } from './Skills/Skills'
55
export { default as Testimonials } from './Testimonials/Testimonials'
66
export { default as Contacts } from './Contacts/Contacts'
7+
export { default as PreContact } from './PreContact/PreContact'
78
export { default as Projects } from './Projects/Projects'
89
export { default as Services } from './Services/Services'
910
export { default as SingleProject } from './Projects/SingleProject/SingleProject'
1011
export { default as SingleService } from './Services/SingleService/SingleService'
1112
export { default as BackToTop } from './BackToTop/BackToTop'
1213
export { default as HorizontalRule } from './HorizontalRule/HorizontalRule'
13-
export { default as PreContact } from './PreContact/PreContact'
1414
export { default as Footer } from './Footer/Footer'
1515

0 commit comments

Comments
 (0)