Skip to content

Commit

Permalink
chore: 🎨 resolved merge conflicts
Browse files Browse the repository at this point in the history
  • Loading branch information
@sandeep-deriv
sandeep-deriv committed Sep 30, 2024
2 parents a20241d + e2343df commit 68b8592
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 58 deletions.
2 changes: 1 addition & 1 deletion src/components/CustomAccordion/custom-accordion.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
53 changes: 30 additions & 23 deletions src/components/Footer/Footer.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
position: relative;
align-self: flex-start;
padding-bottom: rem(4.8);
gap: 24px;
gap: rem(1.5);
}

.Section1 {
Expand All @@ -39,6 +39,9 @@
font-size: rem(1.6) !important;
color: var(--core-color-solid-slate-1400, #000);
text-align: left;
}

h6 {
margin-bottom: rem(1.6);
}

Expand All @@ -51,7 +54,7 @@
margin-bottom: rem(1.6) !important;
display: flex;
align-items: flex-start;
gap: 8px;
gap: rem(0.5);
}

h3 {
Expand All @@ -67,10 +70,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 {
Expand All @@ -90,15 +95,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 {
Expand All @@ -108,8 +114,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 {
Expand All @@ -118,7 +127,6 @@
line-height: 22px;
display: flex;
width: 100%;
margin-top: 12px;
}

.MobileAccordion {
Expand All @@ -142,11 +150,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%;
Expand All @@ -162,8 +171,7 @@
.CommunityButton {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
gap: rem(0.8);
flex-wrap: nowrap;
width: 100%;
}
Expand All @@ -173,7 +181,7 @@
}
.FooterSection {
grid-template-columns: 2fr;
gap: 24px;
gap: rem(1.5);
display: flex;
flex-direction: row;
flex-wrap: wrap;
Expand All @@ -196,18 +204,16 @@
}

.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;
}

Expand All @@ -224,7 +230,7 @@
.MobileAccordion {
display: block;
width: 100%;
margin-bottom: 16px;
margin-bottom: rem(1);
}

.Box {
Expand All @@ -245,13 +251,14 @@
}
.FooterSection {
justify-content: center;
gap: 24px;
gap: rem(1.5);
width: 100%;
}
}

.LogoWrapper {
align-self: center;
padding: rem(1);
}

.Section1:nth-child(1),
Expand All @@ -268,5 +275,5 @@
}

.accordion_header_trigger {
padding: 24px 0px;
padding: rem(1.5) 0;
}
87 changes: 53 additions & 34 deletions src/components/Footer/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 } from '@deriv-com/quill-ui';
import {
LabelPairedArrowUpRightSmRegularIcon,
SocialTelegramBlackIcon,
LabelPairedEnvelopeCaptionBoldIcon,
} 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';
Expand Down Expand Up @@ -53,13 +54,23 @@ const Footer = () => {
</a>
</li>
<li>
<a href='https://tech.deriv.com/' target='blank' className={styles.Link}>
<LabelPairedArrowUpRightSmRegularIcon /> <Translate>Deriv Tech</Translate>
<a
href='https://deriv.com/derivtech'
target='_blank'
className={styles.Link}
rel='noreferrer'
>
<Translate>Deriv Tech</Translate> <LabelPairedArrowUpRightSmRegularIcon />
</a>
</li>
<li>
<a href='https://hackerone.com/deriv?type=team' target='blank' className={styles.Link}>
<LabelPairedArrowUpRightSmRegularIcon /> <Translate>Bug bounty</Translate>
<a
href='https://hackerone.com/deriv?type=team'
target='_blank'
className={styles.Link}
rel='noreferrer'
>
<Translate>Bug bounty</Translate> <LabelPairedArrowUpRightSmRegularIcon />
</a>
</li>
</ul>
Expand All @@ -70,18 +81,28 @@ const Footer = () => {
content: (
<ul className={styles.List}>
<li>
<a href={footer_links.root} target='blank' className={styles.Link}>
<LabelPairedArrowUpRightSmRegularIcon /> <Translate>Homepage</Translate>
<a href={footer_links.root} target='_blank' className={styles.Link} rel='noreferrer'>
<Translate>Homepage</Translate> <LabelPairedArrowUpRightSmRegularIcon />
</a>
</li>
<li>
<a href={footer_links.who_we_are} target='blank' className={styles.Link}>
<LabelPairedArrowUpRightSmRegularIcon /> <Translate>Who we are</Translate>
<a
href={footer_links.who_we_are}
target='_blank'
className={styles.Link}
rel='noreferrer'
>
<Translate>Who we are</Translate> <LabelPairedArrowUpRightSmRegularIcon />
</a>
</li>
<li>
<a href={footer_links.contact_us} target='blank' className={styles.Link}>
<LabelPairedArrowUpRightSmRegularIcon /> <Translate>Contact us</Translate>
<a
href={footer_links.contact_us}
target='_blank'
className={styles.Link}
rel='noreferrer'
>
<Translate>Contact us</Translate> <LabelPairedArrowUpRightSmRegularIcon />
</a>
</li>
</ul>
Expand Down Expand Up @@ -126,7 +147,7 @@ const Footer = () => {
</li>
<li>
<a href='https://tech.deriv.com/' target='blank' className={styles.Link}>
<LabelPairedArrowUpRightSmRegularIcon /> <Translate>Deriv Tech</Translate>
<Translate>Deriv Tech</Translate> <LabelPairedArrowUpRightSmRegularIcon />
</a>
</li>
<li>
Expand All @@ -135,7 +156,7 @@ const Footer = () => {
target='blank'
className={styles.Link}
>
<LabelPairedArrowUpRightSmRegularIcon /> <Translate>Bug bounty</Translate>
<Translate>Bug bounty</Translate> <LabelPairedArrowUpRightSmRegularIcon />
</a>
</li>
</ul>
Expand All @@ -147,17 +168,17 @@ const Footer = () => {
<ul className={styles.List}>
<li>
<a href={footer_links.root} target='blank' className={styles.Link}>
<LabelPairedArrowUpRightSmRegularIcon /> <Translate>Homepage</Translate>
<Translate>Homepage</Translate> <LabelPairedArrowUpRightSmRegularIcon />
</a>
</li>
<li>
<a href={footer_links.who_we_are} target='blank' className={styles.Link}>
<LabelPairedArrowUpRightSmRegularIcon /> <Translate>Who we are</Translate>
<Translate>Who we are</Translate> <LabelPairedArrowUpRightSmRegularIcon />
</a>
</li>
<li>
<a href={footer_links.contact_us} target='blank' className={styles.Link}>
<LabelPairedArrowUpRightSmRegularIcon /> <Translate>Contact us</Translate>
<Translate>Contact us</Translate> <LabelPairedArrowUpRightSmRegularIcon />
</a>
</li>
</ul>
Expand All @@ -166,19 +187,18 @@ const Footer = () => {
<CustomAccordion items={accordionItems} />
</div>
<div className={styles.Box} data-testid='get-connected'>
<Text type='subtitle-1' as='h3' className={styles.SectionTitle}>
<Text as='h3' bold className={styles.SectionTitle}>
<Translate>Get connected</Translate>
</Text>
<p className={styles.SectionContent}>
<Translate>Discuss ideas and share solutions with developers worldwide.</Translate>
</p>
<div className={styles.CommunityButton} data-testid='community-button'>
<Button
color='secondary'
color='black'
variant='secondary'
size='md'
rounded='md'
type='button'
variant='outlined'
className={styles.PaddedButton}
onClick={() => {
window.open('https://deriv.vanillacommunity.com/', '_blank');
Expand All @@ -187,11 +207,10 @@ const Footer = () => {
<Translate>Join our community</Translate>
</Button>
<Button
color='secondary'
color='black'
variant='secondary'
size='md'
rounded='md'
type='button'
variant='outlined'
className={styles.PaddedButton}
onClick={() => {
window.open('https://t.me/+g6FV5tFY1u9lZGE1', '_blank');
Expand All @@ -203,7 +222,7 @@ const Footer = () => {
</div>
</div>
<div className={styles.Box}>
<Text type='subtitle-1' as='h3' className={styles.SectionTitle}>
<Text type='subtitle-1' as='h3' bold className={styles.SectionTitle}>
<Translate>We&apos;re here to help</Translate>
</Text>
<p className={styles.SectionContent}>
Expand All @@ -215,17 +234,17 @@ const Footer = () => {
</p>
<div className={styles.EmailButton}>
<Button
color='secondary'
color='black'
variant='secondary'
size='md'
rounded='md'
type='button'
variant='outlined'
className={`${styles.PaddedButton} ${styles.FullWidthButton}`}
onClick={() => {
window.open('mailto:[email protected]', '_blank');
}}
>
<LabelPairedEnvelopeCaptionBoldIcon /> <Translate>Send an email</Translate>
<LabelPairedEnvelopeCaptionBoldIcon height={30} width={30} />{' '}
<Translate>Send an email</Translate>
</Button>
</div>
</div>
Expand Down

0 comments on commit 68b8592

Please sign in to comment.