Skip to content

Commit be28a0a

Browse files
thorrelltthorrellt
authored
Merge pull request #166 from Web-Dev-Path/feature/styled-components-conversion
Styled components conversion
2 parents e5fd0ab + 832a51d commit be28a0a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

87 files changed

+2510
-2095
lines changed

‎CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
5858
- Contact us cards section to contact page
5959
- Linkedin link to footer
6060
- Next.js 13
61+
- Converting components into styled-components
6162

6263
### Fixed
6364

@@ -78,6 +79,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
7879
- next.js warning - no stylesheets in head component
7980
- CardColumns refactoring to accept an array of card objects as props
8081
- styles on newsletter button and contact page
82+
- error where html loaded before styles by updating \_document.js
8183

8284
## Unreleased
8385

‎components/ContactUsCards.js

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import contactCardStyles from '@/styles/ContactUsCards.module.scss';
2-
import CardsColumns from './containers/CardsColumns';
1+
import { ContactCardsColumns } from './containers/CardColumns/ContactCardsColumns';
32
import RevealContentContainer from './containers/RevealContentContainer';
3+
import styled from 'styled-components';
4+
import { $white } from '@/styles/_variables';
45

56
const cards = [
67
{
@@ -29,12 +30,16 @@ const cards = [
2930
},
3031
];
3132

33+
const ContactCardsContainer = styled.div`
34+
background-color: ${$white};
35+
`;
36+
3237
export default function ContactUsCards() {
3338
return (
34-
<div className={contactCardStyles.contactCards}>
39+
<ContactCardsContainer>
3540
<RevealContentContainer>
36-
<CardsColumns cards={cards} customClass='contact-cards' />
41+
<ContactCardsColumns cards={cards} />
3742
</RevealContentContainer>
38-
</div>
43+
</ContactCardsContainer>
3944
);
4045
}

‎components/ContactUsForm.js renamed to ‎components/ContactUsForm/index.js

Lines changed: 21 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { useRef } from 'react';
33
import MailchimpSubscribe from 'react-mailchimp-subscribe';
44
import ReCAPTCHA from 'react-google-recaptcha';
55
import Container from '@/components/containers/Container';
6-
import contactUsFormStyles from '@/styles/Contact.module.scss';
76
import RevealContentContainer from '@/components/containers/RevealContentContainer';
8-
import SubmitButton from '@/components/buttons/SubmitButton';
7+
import { SubmitButton } from '@/components/buttons/SubmitButton';
8+
import S from './styles';
99

1010
export const ContactUsFormSubscribe = ({ setMsg }) => {
1111
return (
@@ -20,11 +20,9 @@ export const ContactUsFormSubscribe = ({ setMsg }) => {
2020
setResponseMessage={setMsg}
2121
/>
2222
{status === 'error' && (
23-
<div
24-
className={contactUsFormStyles.contact__respseonErrorMessage}
25-
>
23+
<S.ResponseOnErrorMsg>
2624
{`Newsletter subscription error: ${message}`}
27-
</div>
25+
</S.ResponseOnErrorMsg>
2826
)}
2927
</>
3028
);
@@ -93,11 +91,8 @@ function ContactUsForm({ subscribe, setResponseMessage }) {
9391
return (
9492
<RevealContentContainer>
9593
<Container>
96-
<form
97-
onSubmit={handleSubmit(onSubmit)}
98-
className={contactUsFormStyles.contact__form}
99-
>
100-
<input
94+
<S.Form onSubmit={handleSubmit(onSubmit)}>
95+
<S.Input
10196
type='text'
10297
placeholder='name'
10398
{...register('Name', {
@@ -107,83 +102,78 @@ function ContactUsForm({ subscribe, setResponseMessage }) {
107102
//no white space pattern
108103
pattern: /[^\s-]/i,
109104
})}
110-
className={`${contactUsFormStyles.contact__input} ${contactUsFormStyles.contact__name}`}
111105
/>
112-
<p className={contactUsFormStyles.contact__errorMessage}>
106+
<S.ErrorMsg>
113107
{errors.Name?.type === 'required'
114108
? 'Name is required'
115109
: errors.Name?.type === 'pattern'
116110
? 'No whitespace'
117111
: errors.Name?.type === 'minLength'
118112
? 'Must be more than 1 character'
119113
: undefined}
120-
</p>
121-
<input
114+
</S.ErrorMsg>
115+
<S.Input
122116
type='email'
123117
placeholder='email'
124118
{...register('Email', {
125119
required: true,
126120
pattern: /^\S+@\S+$/i,
127121
})}
128-
className={`${contactUsFormStyles.contact__input} ${contactUsFormStyles.contact__email}`}
129122
/>
130-
<p className={contactUsFormStyles.contact__errorMessage}>
123+
<S.ErrorMsg>
131124
{errors.Email?.type === 'required' && 'Email is required'}
132-
</p>
133-
<input
125+
</S.ErrorMsg>
126+
<S.Input
134127
type='text'
135128
placeholder='subject'
136129
{...register('Subject', {
137130
required: true,
138131
minLength: 2,
139132
pattern: /[^\s-]/i,
140133
})}
141-
className={`${contactUsFormStyles.contact__input} ${contactUsFormStyles.contact__subject}`}
142134
/>
143-
<p className={contactUsFormStyles.contact__errorMessage}>
135+
<S.ErrorMsg>
144136
{errors.Subject?.type === 'required'
145137
? 'Subject is required'
146138
: errors.Subject?.type === 'pattern'
147139
? 'No whitespace'
148140
: errors.Subject?.type === 'minLength'
149141
? 'Must be more than 1 character'
150142
: undefined}
151-
</p>
152-
<textarea
143+
</S.ErrorMsg>
144+
<S.TextArea
153145
{...register('Message', {
154146
required: true,
155147
minLength: 2,
156148
pattern: /[^\s-]/i,
157149
})}
158150
placeholder='Write your message here'
159-
className={`${contactUsFormStyles.contact__input} ${contactUsFormStyles.contact__message}`}
160151
/>
161-
<p className={contactUsFormStyles.contact__errorMessage}>
152+
<S.ErrorMsg>
162153
{errors.Message?.type === 'required'
163154
? 'Message is required'
164155
: errors.Message?.type === 'pattern'
165156
? 'No whitespace'
166157
: errors.Message?.type === 'minLength'
167158
? 'Must be more than 1 character'
168159
: undefined}
169-
</p>
170-
<div className={contactUsFormStyles.contact__subscribe}>
171-
<input
172-
className={contactUsFormStyles.contact__subscribeInput}
160+
</S.ErrorMsg>
161+
<S.SubscribeWrapper>
162+
<S.SubscribeInput
173163
type='checkbox'
174164
placeholder='Subscribe to our DevNews!'
175165
{...register('Subscribe', {})}
176166
/>
177167
Subscribe to our DevNews!
178-
</div>
168+
</S.SubscribeWrapper>
179169
<SubmitButton label='Submit' disabled={isSubmitting} />
180170

181171
<ReCAPTCHA
182172
ref={contactReCaptchaRef}
183173
size='invisible'
184174
sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}
185175
/>
186-
</form>
176+
</S.Form>
187177
</Container>
188178
</RevealContentContainer>
189179
);

‎components/ContactUsForm/styles.js

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import styled, { css } from 'styled-components';
2+
import * as m from '@/styles/_mixins';
3+
import {
4+
$error,
5+
$darkBgColor,
6+
$primaryContentColor,
7+
} from '@/styles/_variables';
8+
9+
const ResponseOnErrorMsg = styled.div`
10+
position: absolute;
11+
right: 8%;
12+
bottom: -15%;
13+
width: 26rem;
14+
margin: auto;
15+
color: ${$error};
16+
17+
//media query mixins
18+
${m.mobile(css`
19+
position: unset;
20+
`)}
21+
`;
22+
23+
const Form = styled.form`
24+
padding: 2.5rem 0;
25+
display: flex;
26+
flex-direction: column;
27+
align-items: center;
28+
29+
//media query mixins
30+
${m.desktop(css`
31+
max-width: 100%;
32+
width: 26rem;
33+
padding: 2rem 0;
34+
`)}
35+
`;
36+
37+
const Input = styled.input`
38+
display: block;
39+
font-size: 1.2rem;
40+
border-radius: 1rem;
41+
height: 2rem;
42+
padding: 1.2rem 1.25rem;
43+
border: 1px solid ${$darkBgColor};
44+
max-width: 100%;
45+
width: 24rem;
46+
47+
&::placeholder {
48+
color: ${$primaryContentColor};
49+
}
50+
51+
&:focus {
52+
outline: none;
53+
}
54+
55+
//media query mixins
56+
${m.largeDesktop(css`
57+
font-size: 1.5rem;
58+
height: 3rem;
59+
border-radius: 3rem;
60+
max-width: 25rem;
61+
`)}
62+
`;
63+
64+
const TextArea = styled.textarea`
65+
display: block;
66+
font-size: 1.2rem;
67+
border-radius: 1rem;
68+
height: 13rem;
69+
padding: 1.2rem 1.25rem;
70+
border: 1px solid ${$darkBgColor};
71+
max-width: 100%;
72+
width: 24rem;
73+
font-family: inherit;
74+
75+
&::placeholder {
76+
color: ${$primaryContentColor};
77+
}
78+
79+
&:focus {
80+
outline: none;
81+
}
82+
83+
//media query mixins
84+
${m.largeDesktop(css`
85+
font-size: 1.5rem;
86+
border-radius: 3rem;
87+
max-width: 25rem;
88+
`)}
89+
90+
${m.desktop(css`
91+
border-radius: 1.5rem;
92+
`)}
93+
`;
94+
95+
const ErrorMsg = styled.p`
96+
color: ${$error};
97+
margin: 0.1rem 0 1rem;
98+
font-size: 1rem;
99+
height: 1.5rem;
100+
font-style: italic;
101+
align-self: start;
102+
`;
103+
104+
const SubscribeWrapper = styled.div`
105+
display: flex;
106+
margin-bottom: 1.25rem;
107+
opacity: 0.6;
108+
109+
//media query mixins
110+
${m.desktop(css`
111+
font-size: 1.5rem;
112+
`)}
113+
`;
114+
115+
const SubscribeInput = styled.input`
116+
width: 1.5rem;
117+
margin-right: 10px;
118+
`;
119+
120+
export default {
121+
ResponseOnErrorMsg,
122+
Form,
123+
Input,
124+
ErrorMsg,
125+
SubscribeWrapper,
126+
SubscribeInput,
127+
TextArea,
128+
};

‎components/blog/BlogPostsContainer.js renamed to ‎components/blog/BlogPostsContainer/index.js

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import CardsColumns from '@/components/containers/CardsColumns';
2-
import Card from '@/components/containers/Card';
1+
import { BlogCardsColumns } from '@/components/containers/CardColumns/BlogCardsColumns';
2+
import { BlogCard } from '@/components/containers/Card/BlogCard';
33
import Title from '@/components/snippets/Title';
4-
import Link from 'next/link';
5-
import styles from '@/styles/Blog.module.scss';
64
import RevealContentContainer from '@/components/containers/RevealContentContainer';
5+
import S from './styles';
76
import { tagToHeading } from '@/utils/blogCategories';
87
import Container from '@/components/containers/Container';
98

@@ -31,7 +30,7 @@ const BlogPostsContainer = ({
3130

3231
return (
3332
<RevealContentContainer>
34-
<div className={styles.blogContainer}>
33+
<S.BlogContainer>
3534
{heading ? (
3635
<Container>
3736
<Title title={heading} />
@@ -46,40 +45,36 @@ const BlogPostsContainer = ({
4645
swipe ? (
4746
<>
4847
{[...splitPosts(posts, 3)].map((p, index) => (
49-
<CardsColumns key={index} cards={p} customClass='blog' />
48+
<BlogCardsColumns key={index} cards={p} />
5049
))}
5150
</>
5251
) : (
5352
<Container>
54-
<div className={styles.postContainer}>
53+
<S.PostContainer>
5554
{posts?.map((p, index) => (
56-
<Card customClass='blog' key={index} card={p} />
55+
<BlogCard $cardType='blog' key={index} card={p} />
5756
))}
58-
</div>
57+
</S.PostContainer>
5958
</Container>
6059
)
6160
}
61+
6262
{viewall && posts.length >= 3 ? (
6363
<Container>
64-
<Link
65-
className={`${styles.bottomLink} ${styles.viewAll}`}
64+
<S.ViewAllBottomLink
6665
href={tag ? `/blog/category/${tag}` : '/blog/category/all'}
6766
>
6867
view all
69-
</Link>
68+
</S.ViewAllBottomLink>
7069
</Container>
7170
) : null}
71+
7272
{back ? (
7373
<Container>
74-
<Link
75-
className={`${styles.bottomLink} ${styles.backLink}}`}
76-
href={`/blog`}
77-
>
78-
&#60; Back
79-
</Link>
74+
<S.BackBottomLink href={`/blog`}>&#60; Back</S.BackBottomLink>
8075
</Container>
8176
) : null}
82-
</div>
77+
</S.BlogContainer>
8378
</RevealContentContainer>
8479
);
8580
};

0 commit comments

Comments
 (0)