From 1f76d62244989969ff38aa83d3eafa6be959ed78 Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Mon, 30 Sep 2024 12:51:32 +0400 Subject: [PATCH 1/2] fix: footer on feature branch --- .../CustomAccordion/custom-accordion.scss | 2 +- src/components/Footer/Footer.module.scss | 68 +++--- src/components/Footer/index.tsx | 198 ++++++++++++------ 3 files changed, 171 insertions(+), 97 deletions(-) diff --git a/src/components/CustomAccordion/custom-accordion.scss b/src/components/CustomAccordion/custom-accordion.scss index fe7a6fe1..2efd91fc 100644 --- a/src/components/CustomAccordion/custom-accordion.scss +++ b/src/components/CustomAccordion/custom-accordion.scss @@ -1,8 +1,8 @@ .accordion_root { margin: 16px; - margin-top: 48px; display: flex; flex-direction: column; + gap: 0.25rem; @media screen and (max-width: 786px) { margin-top: 15px; diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss index 5fe8feb1..84c947d4 100644 --- a/src/components/Footer/Footer.module.scss +++ b/src/components/Footer/Footer.module.scss @@ -10,14 +10,14 @@ .FooterBody { display: flex; flex-direction: column; - padding: 48px; + padding: rem(3); } .FooterSection { display: flex; flex-direction: row; gap: rem(9.6); - max-width: 1310px; + max-width: 1264px; } .FooterLogo { @@ -26,7 +26,7 @@ position: relative; align-self: flex-start; padding-bottom: rem(4.8); - gap: 24px; + gap: rem(1.5); } .Section1 { @@ -41,6 +41,16 @@ font-size: rem(1.6) !important; color: var(--core-color-solid-slate-1400, #000); text-align: left; + } + + .SectionTitle2 { + font-family: 'Ubuntu', sans-serif; + font-size: rem(1.6) !important; + color: var(--core-color-solid-slate-1400, #000); + text-align: left; + } + + h6 { margin-bottom: rem(1.6); } @@ -53,7 +63,7 @@ margin-bottom: rem(1.6) !important; display: flex; align-items: flex-start; - gap: 8px; + gap: rem(0.5); } h3 { @@ -69,10 +79,12 @@ .Link { display: flex; align-items: center; - gap: 8px; - color: #000; + gap: rem(0.5); text-decoration: none; - margin-bottom: rem(1.6); + } + + .labelcolor { + color: var(--component-textIcon-normal-prominent); } .SectionContent { @@ -92,15 +104,16 @@ font-weight: 700; line-height: 22px; display: flex; - gap: 20px; + gap: rem(0.8); white-space: nowrap; + justify-content: center; } .PaddedButton { display: flex; width: 100%; - padding: 8px 10px; - gap: 8px; + padding: rem(0.5) rem(0.625); + gap: rem(0.5); } .FullWidthButton { @@ -110,8 +123,11 @@ .Box { border: 1px solid #ddd; - padding: 16px; + padding: rem(1.6); border-radius: rem(2.4); + display: flex; + flex-direction: column; + gap: rem(0.8); } .EmailButton { @@ -120,7 +136,6 @@ line-height: 22px; display: flex; width: 100%; - margin-top: 12px; } .MobileAccordion { @@ -144,11 +159,12 @@ .CommunityButton { display: flex; flex-direction: column !important; - gap: 10px; + gap: rem(0.625); + padding-right: rem(2); } .PaddedButton { width: 100%; - padding: 10px 0px; + padding: rem(0.625) rem(0); } .FullWidthButton { width: 100%; @@ -164,8 +180,7 @@ .CommunityButton { display: flex; flex-direction: row; - align-items: center; - gap: 10px; + gap: rem(0.8); flex-wrap: nowrap; width: 100%; } @@ -175,7 +190,7 @@ } .FooterSection { grid-template-columns: 2fr; - gap: 24px; + gap: rem(1.5); display: flex; flex-direction: row; flex-wrap: wrap; @@ -189,7 +204,7 @@ .FooterBody { display: flex; width: 100%; - padding: 32px 24px; + padding: rem(3.2) rem(1.6); } p { @@ -198,24 +213,22 @@ } .Box { - width: 400px !important; display: flex; flex-direction: column; - gap: 16px; + gap: rem(1); flex: 1 0 0; - padding-left: 32px; - padding-right: 32px; + padding: rem(2) rem(2); } .FooterLogo { display: flex; - gap: 24px; + gap: rem(1.5); padding-bottom: 0px; } @media (max-width: 600px) { .FooterBody { - padding: 32px 16px; + padding: rem(3.2) rem(1.6); } .PaddedButton { display: flex; @@ -226,7 +239,7 @@ .MobileAccordion { display: block; width: 100%; - margin-bottom: 16px; + margin-bottom: rem(1); } .Box { @@ -247,13 +260,14 @@ } .FooterSection { justify-content: center; - gap: 24px; + gap: rem(1.5); width: 100%; } } .LogoWrapper { align-self: center; + padding: rem(1); } .Section1:nth-child(1), @@ -270,5 +284,5 @@ } .accordion_header_trigger { - padding: 24px 0px; + padding: rem(1.5) 0; } diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 2e13e27f..c6e4323e 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -1,12 +1,13 @@ import React from 'react'; -import { Text } from '@deriv/ui'; -import { LabelPairedArrowUpRightSmRegularIcon } from '@deriv/quill-icons'; -import { Button } from '@deriv/ui'; -import { SocialTelegramBlackIcon } from '@deriv/quill-icons'; -import { LabelPairedEnvelopeCaptionBoldIcon } from '@deriv/quill-icons'; -import Translate from '@docusaurus/Translate'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import CustomAccordion from '../CustomAccordion'; +import { Text, Button, Heading } from '@deriv-com/quill-ui'; +import { + LabelPairedArrowUpRightSmRegularIcon, + SocialTelegramBlackIcon, + LabelPairedEnvelopeMdBoldIcon, +} from '@deriv/quill-icons'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import Translate from '@docusaurus/Translate'; import styles from './Footer.module.scss'; import GrayLogo from '../../assets/gray-logo.svg'; @@ -53,13 +54,23 @@ const Footer = () => {
  • - - Deriv Tech + + Deriv Tech
  • - - Bug bounty + + Bug bounty
    • @@ -70,18 +81,28 @@ const Footer = () => { content: ( @@ -99,64 +120,103 @@ const Footer = () => {
    - + API - +
    - - Deriv.com - + Deriv.com @@ -165,20 +225,19 @@ const Footer = () => {
    - + Get connected - +

    - Discuss ideas and share solutions with developers worldwide. + + Discuss ideas and share solutions with developers worldwide. +

    - - We're here to help - + + We're here to help +

    - Email us at{' '} - - api-support@deriv.com - {' '} - if you need any assistance or support. + + Email us at{' '} + + + + api-support@deriv.com + + + + if you need any assistance or support. +

    From 40d243dc8a996c73b60b459aa8754764d76de81e Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Mon, 30 Sep 2024 13:02:41 +0400 Subject: [PATCH 2/2] fix: comment --- src/components/Footer/Footer.module.scss | 7 ------- src/components/Footer/index.tsx | 2 +- 2 files changed, 1 insertion(+), 8 deletions(-) diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss index 84c947d4..12458995 100644 --- a/src/components/Footer/Footer.module.scss +++ b/src/components/Footer/Footer.module.scss @@ -43,13 +43,6 @@ text-align: left; } - .SectionTitle2 { - font-family: 'Ubuntu', sans-serif; - font-size: rem(1.6) !important; - color: var(--core-color-solid-slate-1400, #000); - text-align: left; - } - h6 { margin-bottom: rem(1.6); } diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index c6e4323e..9288a1a6 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -225,7 +225,7 @@ const Footer = () => {
    - + Get connected