Skip to content

Commit 693c1f0

Browse files
thorrelltthorrellt
committed
convert NewletterForm to styled components
1 parent a69cffb commit 693c1f0

File tree

2 files changed

+168
-180
lines changed

2 files changed

+168
-180
lines changed

‎components/mailchimp/NewsletterForm/NewsletterForm.js

Lines changed: 17 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import Image from 'next/image';
33
import { decode } from 'html-entities';
44
import ReCAPTCHA from 'react-google-recaptcha';
55
import Container from '@/components/containers/Container/Container';
6-
import newsletterStyles from '@/styles/Newsletter.module.scss';
76
import SubmitButton from '@/components/buttons/SubmitButton/SubmitButton';
87
import S from './styles';
98

@@ -115,34 +114,29 @@ const NewsletterForm = ({ status, message, onValidated }) => {
115114
};
116115

117116
return (
118-
<section className={newsletterStyles.newsletter}>
119-
<Container customClass={newsletterStyles.newsletter__inner}>
120-
<h2 className={newsletterStyles.newsletter__title}>
117+
<S.Section>
118+
<S.InnerContainer>
119+
<S.Title>
121120
Sign up for news
122-
<span className={newsletterStyles.newsletter__right_chevron}>
121+
<S.RightChevron>
123122
<Image
124123
src='/images/svg/right-chevron.svg'
125124
height={18}
126125
width={18}
127126
alt='Right Chevron SVG'
128127
/>
129-
</span>
130-
</h2>
128+
</S.RightChevron>
129+
</S.Title>
131130
<div>
132-
<form
133-
className={newsletterStyles.newsletter__form}
134-
onSubmit={handleFormSubmit}
135-
>
136-
<input
137-
className={`${newsletterStyles.newsletter__input} ${newsletterStyles.newsletter__name}`}
131+
<S.Form onSubmit={handleFormSubmit}>
132+
<S.InputName
138133
onChange={event => setName(event?.target?.value ?? '')}
139134
type='text'
140135
name='name'
141136
value={name}
142137
placeholder='name'
143138
/>
144-
<input
145-
className={`${newsletterStyles.newsletter__input} ${newsletterStyles.newsletter__email}`}
139+
<S.InputEmail
146140
onChange={event => setEmail(event?.target?.value ?? '')}
147141
type='email'
148142
name='email'
@@ -158,32 +152,26 @@ const NewsletterForm = ({ status, message, onValidated }) => {
158152
sitekey={SITE_KEY}
159153
onChange={onReCAPTCHAChange}
160154
/>
161-
</form>
155+
</S.Form>
162156

163-
<div className={newsletterStyles.newsletterFormInfo}>
164-
{status === 'sending' && (
165-
<div className={newsletterStyles.newsletterFormSending}>
166-
Sending...
167-
</div>
168-
)}
157+
<S.FormInfo>
158+
{status === 'sending' && <S.FormSending>Sending...</S.FormSending>}
169159
{status === 'error' || error ? (
170-
<div
171-
className={newsletterStyles.newsletterFormError}
160+
<S.FormError
172161
dangerouslySetInnerHTML={{
173162
__html: error || getMessage(message),
174163
}}
175164
/>
176165
) : null}
177166
{status === 'success' && status !== 'error' && !error && (
178-
<div
179-
className={newsletterStyles.newsletterFormSuccess}
167+
<S.FormSuccess
180168
dangerouslySetInnerHTML={{ __html: decode(message) }}
181169
/>
182170
)}
183-
</div>
171+
</S.FormInfo>
184172
</div>
185-
</Container>
186-
</section>
173+
</S.InnerContainer>
174+
</S.Section>
187175
);
188176
};
189177

‎styles/Newsletter.module.scss

Lines changed: 151 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -1,151 +1,151 @@
1-
@use './mixins' as *;
2-
@use './variables' as *;
3-
4-
.newsletterFormInfo {
5-
font-size: 1rem;
6-
font-style: italic;
7-
color: $primary-content-color;
8-
9-
.newsletterFormError {
10-
color: $error;
11-
}
12-
13-
.newsletterFormError,
14-
.newsletterFormSuccess,
15-
.newsletterFormSending {
16-
margin-top: 1rem;
17-
18-
@include desktop {
19-
font-size: 1.2rem;
20-
margin: 0;
21-
}
22-
}
23-
}
24-
25-
.newsletter {
26-
padding: 2.5rem 0;
27-
background-color: $primary-accent-color;
28-
29-
@include desktop {
30-
padding: 1rem 0;
31-
}
32-
33-
&__inner {
34-
@include desktop {
35-
display: flex;
36-
justify-content: space-between;
37-
align-items: center;
38-
gap: 2rem;
39-
}
40-
}
41-
42-
&__title {
43-
font-size: 1.5rem;
44-
color: $primary-content-color;
45-
margin: 0;
46-
white-space: nowrap;
47-
display: flex;
48-
gap: 0.5rem;
49-
50-
@include medium-desktop {
51-
font-size: 1.75rem;
52-
gap: 1rem;
53-
}
54-
55-
@include large-desktop {
56-
font-size: 2.25rem;
57-
gap: 1.5rem;
58-
}
59-
}
60-
61-
&__right_chevron {
62-
position: relative;
63-
top: 0.1rem;
64-
65-
@include large-desktop {
66-
top: unset;
67-
68-
img {
69-
width: 1.5rem !important;
70-
height: 1.5rem !important;
71-
}
72-
}
73-
}
74-
75-
&__form {
76-
@include desktop {
77-
display: flex;
78-
align-items: center;
79-
gap: 1rem;
80-
margin-left: auto;
81-
}
82-
}
83-
84-
&__input {
85-
display: block;
86-
font-size: 1.2rem;
87-
border-radius: 1rem;
88-
height: 2rem;
89-
margin: 1rem 0;
90-
padding: 1rem 1.25rem;
91-
border: 1px solid $dark-bg-color;
92-
width: 100%;
93-
94-
@include large-desktop {
95-
font-size: 1.5rem;
96-
height: 3rem;
97-
border-radius: 3rem;
98-
max-width: 25rem;
99-
}
100-
101-
&::placeholder {
102-
color: $primary-content-color;
103-
}
104-
105-
&:focus {
106-
outline: none;
107-
}
108-
}
109-
110-
&__name {
111-
@include desktop {
112-
width: 12.25rem;
113-
}
114-
}
115-
116-
&__email {
117-
@include desktop {
118-
width: 16rem;
119-
}
120-
@include large-desktop {
121-
width: 26rem;
122-
}
123-
}
124-
125-
&__button {
126-
border-radius: 1.2rem;
127-
font-size: 1.2rem;
128-
background-color: $dark-bg-color;
129-
border: 1px solid $transparent;
130-
color: $white;
131-
height: 2.2rem;
132-
font-weight: bold;
133-
transition: 0.3s ease;
134-
width: 12rem;
135-
cursor: pointer;
136-
@include transition(all 0.3s ease);
137-
138-
&:hover {
139-
background-color: $transparent;
140-
color: $dark-bg-color;
141-
border: 1px solid $dark-bg-color;
142-
}
143-
144-
@include large-desktop {
145-
font-size: 1.5rem;
146-
width: 16rem;
147-
height: 3rem;
148-
border-radius: 3rem;
149-
}
150-
}
151-
}
1+
// @use './mixins' as *;
2+
// @use './variables' as *;
3+
4+
// .newsletterFormInfo {
5+
// font-size: 1rem;
6+
// font-style: italic;
7+
// color: $primary-content-color;
8+
9+
// .newsletterFormError {
10+
// color: $error;
11+
// }
12+
13+
// .newsletterFormError,
14+
// .newsletterFormSuccess,
15+
// .newsletterFormSending {
16+
// margin-top: 1rem;
17+
18+
// @include desktop {
19+
// font-size: 1.2rem;
20+
// margin: 0;
21+
// }
22+
// }
23+
// }
24+
25+
// .newsletter {
26+
// padding: 2.5rem 0;
27+
// background-color: $primary-accent-color;
28+
29+
// @include desktop {
30+
// padding: 1rem 0;
31+
// }
32+
33+
// &__inner {
34+
// @include desktop {
35+
// display: flex;
36+
// justify-content: space-between;
37+
// align-items: center;
38+
// gap: 2rem;
39+
// }
40+
// }
41+
42+
// &__title {
43+
// font-size: 1.5rem;
44+
// color: $primary-content-color;
45+
// margin: 0;
46+
// white-space: nowrap;
47+
// display: flex;
48+
// gap: 0.5rem;
49+
50+
// @include medium-desktop {
51+
// font-size: 1.75rem;
52+
// gap: 1rem;
53+
// }
54+
55+
// @include large-desktop {
56+
// font-size: 2.25rem;
57+
// gap: 1.5rem;
58+
// }
59+
// }
60+
61+
// &__right_chevron {
62+
// position: relative;
63+
// top: 0.1rem;
64+
65+
// @include large-desktop {
66+
// top: unset;
67+
68+
// img {
69+
// width: 1.5rem !important;
70+
// height: 1.5rem !important;
71+
// }
72+
// }
73+
// }
74+
75+
// &__form {
76+
// @include desktop {
77+
// display: flex;
78+
// align-items: center;
79+
// gap: 1rem;
80+
// margin-left: auto;
81+
// }
82+
// }
83+
84+
// &__input {
85+
// display: block;
86+
// font-size: 1.2rem;
87+
// border-radius: 1rem;
88+
// height: 2rem;
89+
// margin: 1rem 0;
90+
// padding: 1rem 1.25rem;
91+
// border: 1px solid $dark-bg-color;
92+
// width: 100%;
93+
94+
// @include large-desktop {
95+
// font-size: 1.5rem;
96+
// height: 3rem;
97+
// border-radius: 3rem;
98+
// max-width: 25rem;
99+
// }
100+
101+
// &::placeholder {
102+
// color: $primary-content-color;
103+
// }
104+
105+
// &:focus {
106+
// outline: none;
107+
// }
108+
// }
109+
110+
// &__name {
111+
// @include desktop {
112+
// width: 12.25rem;
113+
// }
114+
// }
115+
116+
// &__email {
117+
// @include desktop {
118+
// width: 16rem;
119+
// }
120+
// @include large-desktop {
121+
// width: 26rem;
122+
// }
123+
// }
124+
125+
// &__button {
126+
// border-radius: 1.2rem;
127+
// font-size: 1.2rem;
128+
// background-color: $dark-bg-color;
129+
// border: 1px solid $transparent;
130+
// color: $white;
131+
// height: 2.2rem;
132+
// font-weight: bold;
133+
// transition: 0.3s ease;
134+
// width: 12rem;
135+
// cursor: pointer;
136+
// @include transition(all 0.3s ease);
137+
138+
// &:hover {
139+
// background-color: $transparent;
140+
// color: $dark-bg-color;
141+
// border: 1px solid $dark-bg-color;
142+
// }
143+
144+
// @include large-desktop {
145+
// font-size: 1.5rem;
146+
// width: 16rem;
147+
// height: 3rem;
148+
// border-radius: 3rem;
149+
// }
150+
// }
151+
// }

0 commit comments

Comments
 (0)