Skip to content

Commit 3a2c9e9

Browse files
vmcodesvmcodes
committed
fix: merge conflicts
2 parents 3f67ebb + c1fda52 commit 3a2c9e9

Some content is hidden

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

91 files changed

+2688
-2276
lines changed

‎.babelrc

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"presets": ["next/babel"],
3+
"plugins": [
4+
[
5+
"styled-components",
6+
{
7+
"ssr": true,
8+
"displayName": true,
9+
"preprocess": false
10+
}
11+
]
12+
]
13+
}

‎CHANGELOG.md

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
3737
- normalized font sizes
3838
- installed yarn
3939
- normalized buttons' and links' styling
40-
- updated `package.json` commands for macOs
40+
- updated `package.json` commands for macOS
4141
- swipeable CardsColumns.js on mobile
4242

4343
## 1.2.0
@@ -67,7 +67,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
6767
- relative to absolute imports with aliases
6868
- updated to React 18 and Next.js latest
6969
- footer styling update + social media icons
70-
- improved LightHouse scores by optmizing images, creating a robots.txt file and adding proper alt tags
70+
- improved LightHouse scores by optimizing images, creating a robots.txt file and adding proper alt tags
7171
- updated 'about us' first section (our background, peer reviews, version control)
7272
- updated 'about us' section (our goals, our purpose)
7373
- updated mobile nav to automatically close when page route change is completed
@@ -78,6 +78,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
7878
- next.js warning - no stylesheets in head component
7979
- CardColumns refactoring to accept an array of card objects as props
8080
- styles on newsletter button and contact page
81+
- error where html loaded before styles by updating \_document.js
8182

8283
## Unreleased
8384

@@ -88,6 +89,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
8889
- Styled components to Title component
8990
- Links to blog tags to show all posts with the same tag
9091
- Added XML Sitemap using getServerSideProps
92+
- Converting components into styled-components
9193

9294
### Fixed
9395

@@ -96,3 +98,4 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
9698
- adjusted contact form message on mobile
9799
- blog container and title styling
98100
- blog card container tags overflowing
101+
- fix invalid next.config file

‎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+
};

0 commit comments

Comments
 (0)