Skip to content

Commit 1d39103

Browse files
Satoshi-ShSatoshi-Sh
authored
Merge pull request #246 from Web-Dev-Path/refactor/to-scss-contactusform
Update ContactUsForm's style from Styled Components to CSS Modules
2 parents 3aa15c6 + e33437f commit 1d39103

5 files changed

Lines changed: 134 additions & 161 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,5 +156,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
156156
- Updated husky script to avoid warning
157157

158158
### Changed
159+
159160
- Started migrating styles from Styled Components to CSS Modules (ContactUsCard)
160161
- CSS Modules Migration for ButtonLink,SubmitButton
162+
- Updated ContactUsForm from Styled Components to CSS Modules (SCSS)
163+
- Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility

‎components/ContactUs/ContactUsForm/ContactUsForm.module.scss‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
@use '@/styles/mixins' as *;
2+
3+
.form {
4+
padding: 2.5rem 0;
5+
display: flex;
6+
flex-direction: column;
7+
align-items: center;
8+
9+
@include desktop {
10+
max-width: 100%;
11+
width: 26rem;
12+
padding: 2rem 0;
13+
}
14+
}
15+
16+
.input {
17+
display: block;
18+
font-size: 1.2rem;
19+
border-radius: 1rem;
20+
height: 2rem;
21+
padding: 1.2rem 1.25rem;
22+
border: 1px solid var(--dark-bg);
23+
max-width: 100%;
24+
width: 24rem;
25+
26+
&::placeholder {
27+
color: var(--color-primary-content);
28+
}
29+
30+
&:focus {
31+
outline: none;
32+
}
33+
34+
@include large-desktop {
35+
font-size: 1.5rem;
36+
height: 3rem;
37+
border-radius: 3rem;
38+
max-width: 25rem;
39+
}
40+
}
41+
42+
.textarea {
43+
display: block;
44+
font-size: 1.2rem;
45+
border-radius: 1rem;
46+
height: 13rem;
47+
padding: 1.2rem 1.25rem;
48+
border: 1px solid var(--dark-bg);
49+
max-width: 100%;
50+
width: 24rem;
51+
font-family: inherit;
52+
53+
&::placeholder {
54+
color: var(--color-primary-content);
55+
}
56+
57+
&:focus {
58+
outline: none;
59+
}
60+
61+
@include large-desktop {
62+
font-size: 1.5rem;
63+
border-radius: 3rem;
64+
max-width: 25rem;
65+
}
66+
67+
@include desktop {
68+
border-radius: 1.5rem;
69+
}
70+
}
71+
72+
.error-msg {
73+
color: var(--error);
74+
margin: 0.1rem 0 1rem;
75+
font-size: 1rem;
76+
height: 1.5rem;
77+
font-style: italic;
78+
align-self: start;
79+
}
80+
81+
.subscribe-wrapper {
82+
display: flex;
83+
margin-bottom: 1.25rem;
84+
opacity: 0.6;
85+
86+
@include desktop {
87+
font-size: 1.5rem;
88+
}
89+
}
90+
91+
.subscribe-input {
92+
width: 1.5rem;
93+
margin-right: 10px;
94+
}

‎components/ContactUs/ContactUsForm/index.js‎

Lines changed: 35 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useForm } from 'react-hook-form';
22
import Container from '@/components/containers/Container';
33
import RevealContentContainer from '@/components/containers/RevealContentContainer';
44
import { SubmitButton } from '@/components/buttons/SubmitButton';
5-
import S from './styles';
5+
import styles from './ContactUsForm.module.scss';
66

77
function ContactUsForm({ subscribe, setResponseMessage, getReCaptchaToken }) {
88
const {
@@ -69,8 +69,9 @@ function ContactUsForm({ subscribe, setResponseMessage, getReCaptchaToken }) {
6969
return (
7070
<RevealContentContainer>
7171
<Container>
72-
<S.Form onSubmit={handleSubmit(onSubmit)}>
73-
<S.Input
72+
<form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
73+
<input
74+
className={styles.input}
7475
type='text'
7576
placeholder='name'
7677
{...register('Name', {
@@ -81,27 +82,29 @@ function ContactUsForm({ subscribe, setResponseMessage, getReCaptchaToken }) {
8182
pattern: /[^\s-]/i,
8283
})}
8384
/>
84-
<S.ErrorMsg>
85+
<p className={styles['error-msg']}>
8586
{errors.Name?.type === 'required'
8687
? 'Name is required'
8788
: errors.Name?.type === 'pattern'
88-
? 'No whitespace'
89-
: errors.Name?.type === 'minLength'
90-
? 'Must be more than 1 character'
91-
: undefined}
92-
</S.ErrorMsg>
93-
<S.Input
89+
? 'No whitespace'
90+
: errors.Name?.type === 'minLength'
91+
? 'Must be more than 1 character'
92+
: undefined}
93+
</p>
94+
<input
95+
className={styles.input}
9496
type='email'
9597
placeholder='email'
9698
{...register('Email', {
9799
required: true,
98100
pattern: /^\S+@\S+$/i,
99101
})}
100102
/>
101-
<S.ErrorMsg>
103+
<p className={styles['error-msg']}>
102104
{errors.Email?.type === 'required' && 'Email is required'}
103-
</S.ErrorMsg>
104-
<S.Input
105+
</p>
106+
<input
107+
className={styles.input}
105108
type='text'
106109
placeholder='subject'
107110
{...register('Subject', {
@@ -110,42 +113,44 @@ function ContactUsForm({ subscribe, setResponseMessage, getReCaptchaToken }) {
110113
pattern: /[^\s-]/i,
111114
})}
112115
/>
113-
<S.ErrorMsg>
116+
<p className={styles['error-msg']}>
114117
{errors.Subject?.type === 'required'
115118
? 'Subject is required'
116119
: errors.Subject?.type === 'pattern'
117-
? 'No whitespace'
118-
: errors.Subject?.type === 'minLength'
119-
? 'Must be more than 1 character'
120-
: undefined}
121-
</S.ErrorMsg>
122-
<S.TextArea
120+
? 'No whitespace'
121+
: errors.Subject?.type === 'minLength'
122+
? 'Must be more than 1 character'
123+
: undefined}
124+
</p>
125+
<textarea
126+
className={styles.textarea}
123127
{...register('Message', {
124128
required: true,
125129
minLength: 2,
126130
pattern: /[^\s-]/i,
127131
})}
128132
placeholder='Write your message here'
129133
/>
130-
<S.ErrorMsg>
134+
<p className={styles['error-msg']}>
131135
{errors.Message?.type === 'required'
132136
? 'Message is required'
133137
: errors.Message?.type === 'pattern'
134-
? 'No whitespace'
135-
: errors.Message?.type === 'minLength'
136-
? 'Must be more than 1 character'
137-
: undefined}
138-
</S.ErrorMsg>
139-
<S.SubscribeWrapper>
140-
<S.SubscribeInput
138+
? 'No whitespace'
139+
: errors.Message?.type === 'minLength'
140+
? 'Must be more than 1 character'
141+
: undefined}
142+
</p>
143+
<label className={styles['subscribe-wrapper']}>
144+
<input
145+
className={styles['subscribe-input']}
141146
type='checkbox'
142147
placeholder='Subscribe to our DevNews!'
143148
{...register('Subscribe', {})}
144149
/>
145150
Subscribe to our DevNews!
146-
</S.SubscribeWrapper>
151+
</label>
147152
<SubmitButton label='Submit' disabled={isSubmitting} />
148-
</S.Form>
153+
</form>
149154
</Container>
150155
</RevealContentContainer>
151156
);

‎components/ContactUs/ContactUsForm/styles.js‎

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

‎styles/themes.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
:root {
22
--bg-contact-card: #ffffff;
33
--bg-color: #eaeaea;
4-
--dark-bg: #023047;
54
--color-white: #ffffff;
65
--color-primary-content: #292929;
76
--color-transparent: transparent;
7+
--dark-bg: #023047;
8+
--error: #be1313;
89
}
910

1011
// placeholder colors

0 commit comments

Comments
 (0)