Skip to content

Commit fe3b0ba

Browse files
mariana-caldasmariana-caldas
authored
Merge pull request #92 from Web-Dev-Path/chore/normalize-buttons-links-styling
Normalizing links' and buttons' styling
2 parents 8d98679 + 5282c4c commit fe3b0ba

14 files changed

+203
-127
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
.next
22
node_modules
33
.env
4+
.DS_Store
45

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,4 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
3131
- normalized container use on components
3232
- normalized font sizes
3333
- installed yarn
34+
- normalized buttons' and links' styling

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ If you are an experienced and a patient-lovely developer, a true rockstar who wa
1717
## How to get started?
1818

1919
Just reach out on [slack](https://join.slack.com/t/webdevpath/shared_invite/zt-xqqgwwo5-a09BSVWC9ZrHmS6RaMBzVw)!
20-
There is where we get together and learn from each other. Once on our channel, someone will help you out, we've got you.
20+
There is where we get together and learn from each other. Once on our `#general` channel, you'll see a pinned message with some guidelines.
2121

2222
<br />
2323

‎components/ButtonLink.js

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
11
import Link from 'next/link';
2+
import btnStyles from '../styles/ButtonLink.module.scss';
23

3-
export default function ButtonLink(props) {
4-
const { className, link, children, styles } = props;
4+
export default function ButtonLink({
5+
customClassName,
6+
link,
7+
children,
8+
styles,
9+
}) {
510
return (
611
<Link href={link}>
7-
<a className={className} style={styles}>
12+
<a
13+
className={`${btnStyles.btn} ${btnStyles[customClassName]}`}
14+
style={styles}
15+
>
816
{children}
917
</a>
1018
</Link>

‎components/Footer.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ export default function Footer() {
1414
<ul className={footerStyles.footer__navList}>
1515
{linksNav.map(link => (
1616
<li className={footerStyles.footer__navItem} key={link.text}>
17-
<Link href={link.href}>{link.text}</Link>
17+
<Link href={link.href}>
18+
<a title={link.text}>{link.text}</a>
19+
</Link>
1820
</li>
1921
))}
2022
</ul>
@@ -26,7 +28,6 @@ export default function Footer() {
2628
height={250}
2729
width={250}
2830
alt="Logo"
29-
priority
3031
/>
3132
</a>
3233
</Link>

‎components/Nav.js

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { useState, useEffect, useRef } from 'react';
22
import Link from 'next/link';
33
import Image from 'next/image';
4-
import ButtonLink from './ButtonLink';
54
import Container from './Container';
65
import styles from '../styles/Nav.module.scss';
76
import { linksNav } from '../utils/links';
7+
import { useRouter } from 'next/router';
88

99
export default function Nav() {
10+
const router = useRouter();
1011
const [active, setActive] = useState(false);
1112
const headerRef = useRef();
1213
const containerRef = useRef();
@@ -50,6 +51,7 @@ export default function Nav() {
5051
height={115}
5152
width={180}
5253
alt="Logo"
54+
title="Go to the Homepage"
5355
/>
5456
</a>
5557
</Link>
@@ -62,7 +64,12 @@ export default function Nav() {
6264
return (
6365
<li className={styles.nav__item} key={id}>
6466
<Link href={href}>
65-
<a className={styles.nav__link} title={text}>
67+
<a
68+
className={`${styles.nav__link} ${
69+
router.pathname == href ? `${styles.current}` : ''
70+
}`}
71+
title={text}
72+
>
6673
{text}
6774
</a>
6875
</Link>
@@ -71,14 +78,16 @@ export default function Nav() {
7178
}
7279
})}
7380
<li className={styles.nav__item}>
74-
<ButtonLink
75-
className={`${styles.nav__button} ${
76-
active ? styles.active : ''
77-
}`}
78-
link="https://webdevpath.slack.com/join/shared_invite/zt-xqqgwwo5-a09BSVWC9ZrHmS6RaMBzVw#/shared-invite/email"
79-
>
80-
Join us
81-
</ButtonLink>
81+
<Link href="https://webdevpath.slack.com/join/shared_invite/zt-xqqgwwo5-a09BSVWC9ZrHmS6RaMBzVw#/shared-invite/email">
82+
<a
83+
className={`${styles.nav__button} ${
84+
active ? styles.active : ''
85+
}`}
86+
title="Join us"
87+
>
88+
Join us
89+
</a>
90+
</Link>
8291
</li>
8392
</ul>
8493
<button

‎components/TwoColumn.js

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import Image from 'next/image';
22
import ButtonLink from './ButtonLink';
33
import Container from './Container';
44
import styles from '../styles/TwoColumn.module.scss';
5-
import buttonStyles from '../styles/ButtonLink.module.scss';
65

76
export default function TwoColumn({
87
image,
@@ -12,19 +11,14 @@ export default function TwoColumn({
1211
rowOrder,
1312
color,
1413
bgColor,
15-
btnColor,
16-
btnBg,
1714
link,
1815
customInnerClass,
16+
customBtnClass,
1917
linkText = 'Learn more',
2018
}) {
2119
// Add rowOrder="row-reverse" prop to the component to reverse its order on desktop
2220

2321
const styleProps = {
24-
btn: {
25-
color: btnColor,
26-
backgroundColor: btnBg,
27-
},
2822
wrapper: {
2923
color: color,
3024
backgroundColor: bgColor,
@@ -43,11 +37,7 @@ export default function TwoColumn({
4337
</h2>
4438
<p className={styles.content}>{content}</p>
4539
{link && (
46-
<ButtonLink
47-
link={link}
48-
className={buttonStyles.btn}
49-
styles={styleProps.btn}
50-
>
40+
<ButtonLink link={link} customClassName={customBtnClass}>
5141
{linkText}
5242
</ButtonLink>
5343
)}

‎pages/index.js

Lines changed: 51 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -7,64 +7,62 @@ import { white, primary } from '../styles/TwoColumn.module.scss';
77

88
export default function Home() {
99
return (
10-
<section className={styles.container}>
11-
<div className={styles.inner}>
12-
<div className={styles.description}>
13-
<h1 className={styles.title}>&lt; Web Dev wannabe? /&gt;</h1>
14-
<p>
15-
Hold our hand and enjoy the road to learn how to start a new
16-
project, the magic behind Github while working in a team
17-
environment, and much more...
18-
</p>
19-
</div>
10+
<div className={styles.inner}>
11+
<div className={styles.description}>
12+
<h1 className={styles.title}>&lt; Web Dev wannabe? /&gt;</h1>
13+
<p>
14+
Hold our hand and enjoy the road to learn how to start a new project,
15+
the magic behind Github while working in a team environment, and much
16+
more...
17+
</p>
18+
</div>
2019

21-
<TwoColumn
22-
title="Let's grow together."
23-
image="/images/join-us.jpg"
24-
content="The Web Dev Path is a team of professional developers project that aims to provide a comprehensive path for people who seek to begin their web development journey."
25-
link="/about-us"
26-
/>
20+
<TwoColumn
21+
title="Let's grow together."
22+
image="/images/join-us.jpg"
23+
content="The Web Dev Path is a team of professional developers project that aims to provide a comprehensive path for people who seek to begin their web development journey."
24+
link="/about-us"
25+
customBtnClass="inverted-grey"
26+
/>
2727

28-
<Bracket className={styles.bracket} />
28+
<Bracket className={styles.bracket} />
2929

30-
<TwoColumn
31-
title="Get involved."
32-
content="Web Dev Path runs on volunteers. Here are the ways you can get involved with us:"
33-
rowOrder="row-reverse"
34-
customInnerClass="get-involved"
35-
bgColor={white}
36-
/>
30+
<TwoColumn
31+
title="Get involved."
32+
content="Web Dev Path runs on volunteers. Here are the ways you can get involved with us:"
33+
rowOrder="row-reverse"
34+
customInnerClass="get-involved"
35+
bgColor={white}
36+
/>
3737

38-
<CardsColumns
39-
titles={['Join us', 'Volunteer', 'Become a mentor']}
40-
images={[
41-
'/images/join-us.jpg',
42-
'/images/volunteer.jpg',
43-
'/images/mentor.jpg',
44-
]}
45-
altTags={['Join us', 'Volunteer', 'Become a mentor']}
46-
content={[
47-
'Are you learning web development and need mentorship? Are you a web dev looking for help or a code buddy for a project? ',
48-
'Would you like to volunteer? For roles other than mentor/mentee, please get in touch.',
49-
'Are you an experienced web dev who wants to become a mentor? Welcome!',
50-
]}
51-
links={['/about-us', '/contact-us', '/about-us']}
52-
linkText={['Learn more', 'Contact us', 'Learn more']}
53-
/>
38+
<CardsColumns
39+
titles={['Join us', 'Volunteer', 'Become a mentor']}
40+
images={[
41+
'/images/join-us.jpg',
42+
'/images/volunteer.jpg',
43+
'/images/mentor.jpg',
44+
]}
45+
altTags={['Join us', 'Volunteer', 'Become a mentor']}
46+
content={[
47+
'Are you learning web development and need mentorship? Are you a web dev looking for help or a code buddy for a project? ',
48+
'Would you like to volunteer? For roles other than mentor/mentee, please get in touch.',
49+
'Are you an experienced web dev who wants to become a mentor? Welcome!',
50+
]}
51+
links={['/about-us', '/contact-us', '/about-us']}
52+
linkText={['Learn more', 'Contact us', 'Learn more']}
53+
/>
5454

55-
<Stick className={styles.stick} />
55+
<Stick className={styles.stick} />
5656

57-
<TwoColumn
58-
title="Nonprofit?"
59-
content="Web Dev Path can help your nonprofit with web projects of various sizes. Connect with us to find out how."
60-
color={white}
61-
bgColor={primary}
62-
btnColor={primary}
63-
btnBg={white}
64-
link="/about-us"
65-
customInnerClass="non-profit"
66-
/>
67-
</div>
68-
</section>
57+
<TwoColumn
58+
title="Nonprofit?"
59+
content="Web Dev Path can help your nonprofit with web projects of various sizes. Connect with us to find out how."
60+
color={white}
61+
bgColor={primary}
62+
link="/about-us"
63+
customInnerClass="non-profit"
64+
customBtnClass="inverted-white"
65+
/>
66+
</div>
6967
);
7068
}

‎styles/ButtonLink.module.scss

Lines changed: 26 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,38 @@
1-
@use 'variables';
1+
@use './variables' as *;
2+
@use './mixins' as *;
23

34
.btn {
45
padding: 0.5rem 2rem;
5-
color: #fff;
6-
background-color: #292929;
6+
color: $white;
7+
background-color: $primary-content-color;
78
border-radius: 2rem;
8-
transition: 0.3s ease;
99
cursor: pointer;
10-
font-style: normal;
1110
font-weight: bold;
1211
font-size: 1.5rem;
13-
line-height: 2rem;
14-
align-items: center;
1512
text-align: center;
1613
min-width: 16rem;
1714
display: inline-block;
18-
border: none;
19-
}
15+
border: 1px solid $primary-content-color;
16+
@include transition(all 0.3s ease);
17+
18+
&:hover {
19+
text-decoration: none;
20+
}
21+
22+
&.inverted-grey {
23+
&:hover {
24+
color: $primary-content-color;
25+
background-color: $transparent;
26+
}
27+
}
2028

21-
.btn:hover {
22-
opacity: 0.6;
29+
&.inverted-white {
30+
border: 1px solid $white;
31+
color: $primary-content-color;
32+
background-color: $white;
33+
&:hover {
34+
color: $white;
35+
background-color: $transparent;
36+
}
37+
}
2338
}

‎styles/Card.module.scss

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,13 @@
1919
}
2020

2121
.title {
22-
font-family: 'Open Sans';
23-
font-style: normal;
22+
font-family: $heading-font;
2423
font-weight: bold;
2524
font-size: 1.75rem;
2625
color: $primary-content-color;
2726
margin: 0;
2827
margin-top: 1rem;
28+
line-height: unset;
2929

3030
@include tablet {
3131
font-size: 2.25rem;
@@ -39,6 +39,12 @@
3939

4040
a {
4141
text-decoration: underline;
42+
text-underline-offset: 2px;
43+
44+
&:hover {
45+
opacity: 0.6;
46+
text-decoration: none;
47+
}
4248
}
4349

4450
.card__image {

0 commit comments

Comments
 (0)