Skip to content

style(newsletter): update newsletter form to match latest Figma design#319

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
MohamedFazil1406 wants to merge 1 commit into from
Closed

style(newsletter): update newsletter form to match latest Figma design #319

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -234,4 +234,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.

### Fixed

- Updated newsletter input and subscribe button styling to match the latest Figma design.
- Improved newsletter component responsiveness across different screen sizes.

### Changed
19 changes: 13 additions & 6 deletions components/NewsletterSubscribe/NewsletterForm/NewsletterForm.module.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -60,27 +60,34 @@
.input {
display: block;
font-size: 1.2rem;
border-radius: 1rem;
height: 2rem;
border-radius: 0.75rem;
min-height: 2.75rem;
margin: 1rem 0;
padding: 1rem 1.25rem;
border: 1px solid var(--dark-bg);
padding: 0.75rem 1rem;
border: 1px solid var(--bg-color);
width: 100%;

&::placeholder {
color: var(--color-primary-content);
color: var(--color-grey);
}

&:focus {
outline: none;
}

@include large-desktop {
font-size: 1.5rem;
font-size: 1rem;
height: 3rem;
border-radius: 3rem;
max-width: 25rem;
}
@include desktop {
font-size: 0.9rem;
height: 2.5rem;
border-radius: 0.75rem;
min-width: 15rem;
padding: 0.75rem 1rem;
}
}

.inputName {
Expand Down
18 changes: 9 additions & 9 deletions components/NewsletterSubscribe/NewsletterForm/index.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -125,23 +125,23 @@ const NewsletterForm = ({ getReCaptchaToken }) => {
</h2>
<div>
<form className={styles.form} onSubmit={handleFormSubmit}>
<input
className={styles.inputName}
onChange={event => setName(event?.target?.value ?? '')}
type='text'
name='name'
value={name}
placeholder='name'
/>
<input
className={styles.inputEmail}
onChange={event => setEmail(event?.target?.value ?? '')}
type='email'
name='email'
value={email}
placeholder='email'
placeholder='Enter Your Email'
onKeyUp={event => handleInputKeyEvent(event)}
/>
<input
className={styles.inputName}
onChange={event => setName(event?.target?.value ?? '')}
type='text'
name='name'
value={name}
placeholder='Enter Your Name'
/>
<NewsLetterSubmitButton label='Subscribe' />
</form>

Expand Down
6 changes: 4 additions & 2 deletions components/buttons/SubmitButton/SubmitButton.module.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -8,7 +8,9 @@
background-color: var(--color-primary-content);
border-radius: 2rem;
cursor: pointer;
font-weight: bold;
font-weight: 545;
line-height: 1;
letter-spacing: 0;
text-align: center;
display: block;
border: 1px solid var(--color-primary-content);
Expand DownExpand Up@@ -43,7 +45,7 @@
@include desktop {
font-size: 1.2rem;
min-width: 11rem;
padding: 0.3rem 0;
padding: 0.6rem 0;
}

@include large-desktop {
Expand Down