Skip to content

Commit 0891927

Browse files
noamilshnoamilsh
committed
remove colors.ts
1 parent 92e98d0 commit 0891927

File tree

11 files changed

+127
-93
lines changed

11 files changed

+127
-93
lines changed

‎components/buttons/basicButton.tsx

Lines changed: 2 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,9 @@
1-
import colors from '../../styles/colors';
1+
import styles from './button.module.scss';
22

33
const BasicButton = ({ children, className }: BasicButtonProps) => {
44
return (
55
<>
6-
<button className={`${className} BasicButton`}>{children}</button>
7-
<style jsx>{`
8-
.BasicButton {
9-
user-select: none;
10-
cursor: pointer;
11-
color: white;
12-
font-size: 1rem;
13-
border: none;
14-
border-radius: 64px;
15-
background-color: var(--primary);
16-
display: flex;
17-
align-items: center;
18-
justify-content: center;
19-
padding: 6px 12px 6px 6px;
20-
transition: all 0.3s;
21-
width: 126px;
22-
height: 36px;
23-
}
24-
25-
.BasicButton:hover {
26-
filter: brightness(1.2);
27-
transform: scale(1.02);
28-
}
29-
`}</style>
6+
<button className={`${className} ${styles.basicButton}`}>{children}</button>
307
</>
318
);
329
};

‎components/buttons/button.module.scss

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
@import "../../styles/colors";
2+
3+
.socialButton {
4+
user-select: none;
5+
cursor: pointer;
6+
color: white;
7+
font-size: 2.4rem;
8+
border: none;
9+
border-radius: 100%;
10+
padding: 10px 0;
11+
transition: background-color 0.3s cubic-bezier(0.4, 0, 1, 1);
12+
max-height: 36px;
13+
max-width: 36px;
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
-webkit-box-sizing: border-box;
18+
-moz-box-sizing: border-box;
19+
box-sizing: border-box;
20+
}
21+
22+
.telegram {
23+
background-color: $strong-blue;
24+
}
25+
26+
.facebook {
27+
background-color: $vivid-blue;
28+
}
29+
30+
.discord {
31+
background-color: $soft-blue;
32+
}
33+
34+
.newsletter {
35+
background-color: $dark-gray;
36+
}
37+
38+
.socialButton:hover {
39+
filter: brightness(1.2);
40+
}
41+
42+
@media only screen and (max-width: 600px) {
43+
.socialButton {
44+
max-height: 48px;
45+
max-width: 48px;
46+
}
47+
}
48+
49+
.basicButton {
50+
user-select: none;
51+
cursor: pointer;
52+
color: white;
53+
font-size: 1.6rem;
54+
border: none;
55+
border-radius: 64px;
56+
background-color: var(--primary);
57+
display: flex;
58+
align-items: center;
59+
justify-content: center;
60+
padding: 6px 12px 6px 6px;
61+
transition: all 0.3s;
62+
width: 126px;
63+
height: 36px;
64+
}
65+
66+
.basicButton:hover {
67+
filter: brightness(1.2);
68+
transform: scale(1.02);
69+
}

‎components/buttons/socialButton.tsx

Lines changed: 2 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,9 @@
1-
import colors from '../../styles/colors';
1+
import styles from './button.module.scss';
22

33
const SocialButton = ({ children, className }: BasicButtonProps) => {
44
return (
55
<>
6-
<button className={`${className} SocialButton`}>{children}</button>
7-
<style jsx>{`
8-
.SocialButton {
9-
user-select: none;
10-
cursor: pointer;
11-
color: white;
12-
font-size: 1.5rem;
13-
border: none;
14-
border-radius: 100%;
15-
padding: 10px 0;
16-
transition: background-color 0.3s cubic-bezier(0.4, 0, 1, 1);
17-
max-height: 36px;
18-
max-width: 36px;
19-
display: flex;
20-
justify-content: center;
21-
align-items: center;
22-
-webkit-box-sizing: border-box;
23-
-moz-box-sizing: border-box;
24-
box-sizing: border-box;
25-
}
26-
.telegram {
27-
background-color: ${colors.telegram};
28-
}
29-
.facebook {
30-
background-color: ${colors.facebook};
31-
}
32-
.discord {
33-
background-color: ${colors.discord};
34-
}
35-
.newsletter {
36-
background-color: ${colors.newsletter};
37-
}
38-
39-
.SocialButton:hover {
40-
filter: brightness(1.2);
41-
}
42-
@media only screen and (max-width: 600px) {
43-
.SocialButton {
44-
max-height: 48px;
45-
max-width: 48px;
46-
}
47-
}
48-
`}</style>
6+
<button className={`${styles[className]} ${styles.socialButton}`}>{children}</button>
497
</>
508
);
519
};

‎components/personCard/personCard.module.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import "../../styles/media";
2+
@import "../../styles/colors";
23

34
.card {
45
width: 100%;
@@ -106,3 +107,11 @@
106107
}
107108
}
108109
}
110+
111+
.card_default_theme {
112+
border-bottom-color: $moderate-red;
113+
}
114+
115+
.icon_default_theme {
116+
color: $moderate-red;
117+
}

‎components/personCard/personCard.tsx

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useMemo, useRef } from 'react';
2+
import classNames from 'classnames';
23
import {
34
mdiFacebook,
45
mdiGithub,
@@ -11,7 +12,6 @@ import {
1112
import Icon from '@mdi/react';
1213
import { IPerson } from '../../services/people';
1314
import styles from './personCard.module.scss';
14-
import colors from '../../styles/colors';
1515
import ShowMore from '../showMore/showMore';
1616
import Label from '../label/label';
1717

@@ -35,7 +35,6 @@ export function PersonCard({ person }: IPersonProps) {
3535
roles,
3636
customImage,
3737
} = person;
38-
const theme = useMemo(() => themeColor ?? colors.secondary_color, [themeColor]);
3938
const icons = useMemo(
4039
() => [
4140
{ link: github, icon: mdiGithub },
@@ -54,7 +53,12 @@ export function PersonCard({ person }: IPersonProps) {
5453
const onToggleCard = () => card?.current?.classList.toggle(styles.card__open);
5554

5655
return (
57-
<div ref={card} className={styles.card} style={{ borderBottomColor: theme }}>
56+
<div
57+
ref={card}
58+
className={classNames(styles.card, {
59+
[`${styles.card_default_theme}`]: !themeColor,
60+
})}
61+
>
5862
<div
5963
className={styles.card__img}
6064
style={{
@@ -94,7 +98,12 @@ export function PersonCard({ person }: IPersonProps) {
9498
href={link.startsWith('https://') ? link : `https://github.com/${link}`}
9599
rel="noreferrer"
96100
>
97-
<Icon className="icon" path={icon} style={{ color: theme }} />
101+
<Icon
102+
className={classNames({
103+
[`${styles.icon_default_theme}`]: !themeColor,
104+
})}
105+
path={icon}
106+
/>
98107
</a>
99108
)
100109
)}

‎components/projectPage/ProjectPage.module.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import "../../styles/colors";
2+
13
.descriptionContainer {
24
display: flex;
35
flex-direction: column;
@@ -10,7 +12,7 @@
1012
justify-content: center;
1113
font-weight: bold;
1214
font-size: 36px;
13-
color: #0b008e;
15+
color: $dark-blue;
1416
}
1517

1618
.star {

‎components/projectPage/technologies/Technologies.module.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import "../../../styles/colors";
2+
13
.listContainer {
24
display: flex;
35
flex-direction: row;
@@ -14,6 +16,6 @@
1416
align-items: center;
1517
justify-content: center;
1618
font-size: 14px;
17-
color: #e2e2e2;
19+
color: $very-light-gray;
1820
user-select: none;
1921
}

‎components/socialNetworks/socialNetworks.module.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
max-height: 50px;
99
}
1010
&__btn {
11-
color: #fff;
11+
color: white;
1212
width: 50px;
1313
height: 50px;
1414
border-radius: 50%;

‎styles/colors.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
$vivid-blue: #1778F2;
2+
$strong-blue: #0088cc;
3+
$dark-gray: #808080;
4+
$soft-blue: #7289da;
5+
$very-light-gray: #e2e2e2;
6+
$dark-blue: #0b008e;
7+
$moderate-red: #ce5a55;
8+
$light-gray: #e8e8e8;
9+
$very-dark-blue: #242831;
10+
$dark-blue-black: #1d1d1d;
11+
$very-dark-gray: #353535;
12+
$very-dark-blue-black: #202529;
13+
$very-dark-grayish-blue: #292e33;
14+

‎styles/colors.ts

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎styles/globals.scss

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import "./typography.scss";
2+
@import '../styles/colors';
23

34
* {
45
box-sizing: border-box;
@@ -25,19 +26,19 @@ html {
2526
}
2627

2728
html {
28-
--primary: #ce5a55;
29-
--background-color: #e8e8e8;
29+
--primary: #{$moderate-red};
30+
--background-color: #{$light-gray};
3031
--background-description: white;
3132
--card-background: white;
32-
--header-background: #242831;
33-
--text: #1d1d1d;
33+
--header-background: #{$very-dark-blue};
34+
--text: #{$dark-blue-black};
3435
}
3536

3637
html.dark {
37-
--primary: #ce5a55;
38-
--background-color: #353535;
39-
--background-description: #202529;
40-
--card-background: #292e33;
41-
--header-background: #000;
42-
--text: #e8e8e8;
38+
--primary: #{$moderate-red};
39+
--background-color: #{$very-dark-gray};
40+
--background-description: #{$very-dark-blue-black};
41+
--card-background: #{$very-dark-grayish-blue};
42+
--header-background: black;
43+
--text: #{$light-gray};
4344
}

0 commit comments

Comments
 (0)