Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on May 13, 2024. It is now read-only.

Commit 337fee9

Browse files
mohsen-derivmohsen-deriv
authored
Merge pull request #117 from utkarsha-deriv/utkarsha/fix/responsive-design
Utkarsha/fix/responsive design
2 parents 3dc41f8 + ba2eb64 commit 337fee9

File tree

10 files changed

+66
-17
lines changed

10 files changed

+66
-17
lines changed

‎src/components/Footer/Footer.module.scss

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
@media screen and (max-width: 992px) {
1212
flex-direction: column;
1313
gap: rem(2);
14+
padding: rem(4);
1415
}
1516

1617
.FooterBody {
@@ -23,17 +24,25 @@
2324
font-size: rem(3.2);
2425
color: var(--ifm-color-white);
2526
@media screen and (max-width: 992px) {
26-
font-size: rem(2);
27+
font-size: rem(2.4);
2728
}
2829
}
2930
.FooterBodyContent {
3031
color: var(--ifm-color-white);
3132
font-weight: 400;
33+
text-align: center;
3234
@media screen and (max-width: 992px) {
33-
font-size: rem(1.5);
35+
font-size: rem(1.6);
3436
}
3537
}
3638

39+
.FooterBodyContentEmail {
40+
color: var(--ifm-color-white);
41+
font-weight: 400;
42+
@media screen and (max-width: 992px) {
43+
font-size: rem(1.4);
44+
}
45+
}
3746
.Email {
3847
color: var(--ifm-color-danger);
3948
padding: 0 rem(0.5);

‎src/components/Footer/__tests__/Footer.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ describe('HeroHeader', () => {
3434
const community_link = screen.getByTestId('community-link');
3535
const { getByRole } = within(community_link);
3636
const button = getByRole('button');
37-
expect(button).toHaveTextContent('Join Our Community');
37+
expect(button).toHaveTextContent('Join our community');
3838
});
3939
it('should render footer body texts properly', () => {
4040
const help_text = screen.getByText(/^we're here to help$/i);

‎src/components/Footer/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,14 @@ const Footer = () => {
1717
style={{ textDecoration: 'none' }}
1818
href='https://binary.vanillacommunity.com/'
1919
>
20-
<button className={styles.communityButton}>Join Our Community</button>
20+
<button className={styles.communityButton}>Join our community</button>
2121
</a>
2222
</section>
2323
<section className={styles.FooterBody}>
2424
<Text type='subtitle-1' as='h2' align='center' className={styles.FooterContent}>
2525
We&apos;re here to help
2626
</Text>
27-
<Text type='paragraph-1' align='center' className={styles.FooterBodyContent}>
27+
<Text type='paragraph-1' align='center' className={styles.FooterBodyContentEmail}>
2828
Email us at{' '}
2929
<a className={styles.Email} href={'mailto:[email protected]'}>
3030
[email protected]

‎src/features/Home/ApiFeatures/ApiFeatures.module.scss

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,11 @@
2727
display: flex;
2828
flex-direction: column;
2929
gap: rem(2);
30+
@media screen and (max-width: 992px) {
31+
> h2 {
32+
text-align: center;
33+
}
34+
}
3035
}
3136

3237
@media (min-width: 425px) {
@@ -40,7 +45,10 @@
4045
margin-left: rem(-2);
4146
font-weight: 400;
4247
padding-left: rem(2);
43-
48+
@media screen and (max-width: 992px) {
49+
font-size: rem(1.4);
50+
}
51+
4452
.FeatureOptions {
4553
align-items: center;
4654
list-style-type: none;

‎src/features/Home/Benefits/Benefits.module.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,15 @@
9090
}
9191
.InformationContent {
9292
width: 100%;
93+
94+
> h1 {
95+
margin-bottom: rem(0.8);
96+
font-size: rem(2.4);
97+
}
98+
> p {
99+
line-height: rem(3.6);
100+
font-size: rem(1.8);
101+
}
93102
}
94103
}
95104
}
@@ -101,6 +110,11 @@
101110
flex-direction: column;
102111
justify-content: center;
103112
align-items: center;
113+
@media screen and (max-width: 992px) {
114+
> figcaption {
115+
font-size: var(--fontSizes-sm);
116+
}
117+
}
104118

105119
.BenefitsImage {
106120
background-size: contain;

‎src/features/Home/ClientLibraries/ClientLibraries.module.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@
2222
padding: 0 rem(2);
2323
@media (max-width: 992px) {
2424
text-align: center;
25+
font-size: rem(1.8);
26+
line-height: rem(2.6);
2527
}
2628
}
2729
.IconJS {

‎src/features/Home/GetStarted/GetStarted.module.scss

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@
2424

2525
.termConditions {
2626
padding: 0 rem(2.5);
27+
@media screen and (max-width: 992px) {
28+
font-size: rem(1.2);
29+
}
2730
}
2831

2932
.cardContainer {
@@ -51,12 +54,19 @@
5154
color: var(--ifm-color-black);
5255
margin-bottom: 0;
5356
position: relative;
54-
transition: box-shadow .2s;
57+
transition: box-shadow 0.2s;
5558

5659
section {
5760
display: flex;
5861
flex-direction: column;
5962
gap: rem(0.8);
63+
64+
> p {
65+
font-family: var(--ibm-font-family-base);
66+
@media screen and (max-width: 992px) {
67+
font-size: rem(1.4);
68+
}
69+
}
6070
}
6171

6272
.cardIcon {

‎src/features/Home/HeroHeader/HeroHeader.module.scss

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
padding-top: unset;
1919
}
2020

21-
@media screen and (min-width: 320px) and (max-width: 375px) {
22-
height: rem(37.8);
21+
@media screen and (min-width: 320px) and (max-width: 415px) {
22+
height: rem(35);
2323
}
2424
.HeroContainerStyle {
2525
display: flex;
@@ -32,12 +32,11 @@
3232
@media screen and (max-width: 992px) {
3333
width: 100%;
3434
padding: rem(8) rem(4);
35-
align-items: baseline;
3635
}
3736
.heading {
3837
color: var(--ifm-color-white);
3938
@media screen and (max-width: 992px) {
40-
font-size: rem(2);
39+
font-size: rem(3.2);
4140
}
4241
}
4342

@@ -46,7 +45,9 @@
4645
font-weight: 400;
4746

4847
@media screen and (max-width: 992px) {
49-
text-align: left;
48+
text-align: center;
49+
font-size: rem(1.6);
50+
margin-top: rem(0.8);
5051
}
5152
}
5253
.HeroButton {
@@ -61,6 +62,9 @@
6162
background: #ff444f;
6263
border-radius: rem(1.5);
6364
font-size: rem(1.6);
65+
@media screen {
66+
font-size: rem(1.4);
67+
}
6468
}
6569
}
6670
}

‎src/features/Home/styles.module.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
display: flex;
66
flex-direction: column;
77
gap: rem(16);
8+
@media (max-width: 992px) {
9+
gap: rem(5.2);
10+
}
811
}
912

1013
.featureSvg {

‎src/styles/index.scss

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
--ifm-color-primary-lightest: #3cad6e;
2323
--ifm-code-font-size: 95%;
2424
--text-profit-success: #4bb4b3;
25-
--demo-account: #377CFC;
25+
--demo-account: #377cfc;
2626
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
2727
--nav-height: 72px;
2828
--ifm-menu-color: #414652;
@@ -33,7 +33,6 @@
3333
--schema-array: #ff8fc8;
3434
--schema-number: #acb2ff;
3535
--schema-integer: #f8c272;
36-
3736
}
3837

3938
/* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -151,7 +150,7 @@ div[class*='sidebarViewport'] {
151150
> div {
152151
z-index: 1000;
153152
}
154-
div[role="dialog"] {
153+
div[role='dialog'] {
155154
z-index: 1001;
156155
}
157156
}
@@ -262,8 +261,8 @@ main[class*='docMainContainer'] .container {
262261
.navbar__logo {
263262
width: rem(7.4);
264263
}
265-
264+
266265
.navbar__toggle {
267266
width: rem(1.2);
268267
}
269-
}
268+
}

0 commit comments

Comments
 (0)