Skip to content

Commit

Permalink
refactor: ⚡ footer fix with container
Browse files Browse the repository at this point in the history
  • Loading branch information
@sandeep-deriv
sandeep-deriv committed Oct 1, 2024
1 parent 68b8592 commit 0545484
Showing 1 changed file with 170 additions and 129 deletions.
299 changes: 170 additions & 129 deletions src/components/Footer/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react';
import CustomAccordion from '../CustomAccordion';
import { Text, Button } from '@deriv-com/quill-ui';
import { Text, Button, Heading } from '@deriv-com/quill-ui';
import {
LabelPairedArrowUpRightSmRegularIcon,
SocialTelegramBlackIcon,
LabelPairedEnvelopeCaptionBoldIcon,
LabelPairedEnvelopeMdBoldIcon,
} from '@deriv/quill-icons';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Translate from '@docusaurus/Translate';
Expand Down Expand Up @@ -112,145 +112,186 @@ const Footer = () => {

return (
<div className='container'>
<section className={styles.FooterContainer} data-testid='footer-text'>
<div className={styles.FooterBody}>
<div className={styles.LogoWrapper}>
<div className={styles.FooterLogo}>
<GrayLogo />
</div>
<section className={styles.FooterContainer} data-testid='footer-text'>
<div className={styles.FooterBody}>
<div className={styles.LogoWrapper}>
<div className={styles.FooterLogo}>
<GrayLogo />
</div>
<div className={styles.FooterSection}>
<section className={styles.Section1} data-testid='API-section'>
<Text
type='subtitle-1'
as='h3'
className={styles.SectionTitle}
data-testid='API-section'
>
<Translate>API</Translate>
</Text>
<ul className={styles.List}>
<li>
<a href={footer_links.documentation} className={styles.Link}>
</div>
<div className={styles.FooterSection}>
<section className={styles.Section1} data-testid='API-section'>
<Heading.H6 data-testid='API-section'>
<Translate>API</Translate>
</Heading.H6>
<ul className={styles.List}>
<li>
<a href={footer_links.documentation} className={styles.Link}>
<Text className={styles.labelcolor} size='sm'>
<Translate>Documentation</Translate>
</a>
</li>
<li>
<a href={footer_links.dashboard} className={styles.Link}>
</Text>
</a>
</li>
<li>
<a href={footer_links.dashboard} className={styles.Link}>
<Text size='sm' className={styles.labelcolor}>
<Translate>Dashboard</Translate>
</a>
</li>
<li>
<a href={footer_links.api_explorer} className={styles.Link}>
</Text>
</a>
</li>
<li>
<a href={footer_links.api_explorer} className={styles.Link}>
<Text size='sm' className={styles.labelcolor}>
<Translate>API explorer</Translate>
</a>
</li>
<li>
<a href='https://tech.deriv.com/' target='blank' className={styles.Link}>
<Translate>Deriv Tech</Translate> <LabelPairedArrowUpRightSmRegularIcon />
</a>
</li>
<li>
<a
href='https://hackerone.com/deriv?type=team'
target='blank'
className={styles.Link}
>
<Translate>Bug bounty</Translate> <LabelPairedArrowUpRightSmRegularIcon />
</a>
</li>
</ul>
</section>
<section className={styles.Section1}>
<Text type='subtitle-1' as='h3' className={styles.SectionTitle}>
<Translate>Deriv.com</Translate>
</Text>
<ul className={styles.List}>
<li>
<a href={footer_links.root} target='blank' className={styles.Link}>
<Translate>Homepage</Translate> <LabelPairedArrowUpRightSmRegularIcon />
</a>
</li>
<li>
<a href={footer_links.who_we_are} target='blank' className={styles.Link}>
<Translate>Who we are</Translate> <LabelPairedArrowUpRightSmRegularIcon />
</a>
</li>
<li>
<a href={footer_links.contact_us} target='blank' className={styles.Link}>
<Translate>Contact us</Translate> <LabelPairedArrowUpRightSmRegularIcon />
</a>
</li>
</ul>
</section>
<div className={styles.MobileAccordion}>
<CustomAccordion items={accordionItems} />
</div>
<div className={styles.Box} data-testid='get-connected'>
<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='black'
variant='secondary'
size='md'
type='button'
className={styles.PaddedButton}
onClick={() => {
window.open('https://deriv.vanillacommunity.com/', '_blank');
}}
</Text>
</a>
</li>
<li>
<a
href='https://deriv.com/derivtech'
target='_blank'
className={styles.Link}
rel='noreferrer'
>
<Translate>Join our community</Translate>
</Button>
<Button
color='black'
variant='secondary'
size='md'
type='button'
className={styles.PaddedButton}
onClick={() => {
window.open('https://t.me/+g6FV5tFY1u9lZGE1', '_blank');
}}
<Text size='sm' className={styles.labelcolor}>
<Translate>Deriv Tech</Translate>
</Text>
<LabelPairedArrowUpRightSmRegularIcon />
</a>
</li>
<li>
<a
href='https://hackerone.com/deriv?type=team'
target='_blank'
className={styles.Link}
rel='noreferrer'
>
<SocialTelegramBlackIcon fill='#000000' iconSize='xs' />
<Translate>Telegram</Translate>
</Button>
</div>
</div>
<div className={styles.Box}>
<Text type='subtitle-1' as='h3' bold className={styles.SectionTitle}>
<Translate>We&apos;re here to help</Translate>
<Text size='sm' className={styles.labelcolor}>
<Translate>Bug bounty</Translate>
</Text>
<LabelPairedArrowUpRightSmRegularIcon />
</a>
</li>
</ul>
</section>
<section className={styles.Section1}>
<Heading.H6>Deriv.com</Heading.H6>
<ul className={styles.List}>
<li>
<a
href={footer_links.root}
target='_blank'
className={styles.Link}
rel='noreferrer'
>
<Text size='sm' className={styles.labelcolor}>
<Translate>Homepage</Translate>
</Text>
<LabelPairedArrowUpRightSmRegularIcon />
</a>
</li>
<li>
<a
href={footer_links.who_we_are}
target='_blank'
className={styles.Link}
rel='noreferrer'
>
<Text size='sm' className={styles.labelcolor}>
<Translate>Who we are</Translate>
</Text>
<LabelPairedArrowUpRightSmRegularIcon />
</a>
</li>
<li>
<a
href={footer_links.contact_us}
target='_blank'
className={styles.Link}
rel='noreferrer'
>
<Text
size='sm'
color='var(--component-textIcon-normal-prominent)'
className={styles.labelcolor}
>
<Translate>Contact us</Translate>
</Text>
<LabelPairedArrowUpRightSmRegularIcon />
</a>
</li>
</ul>
</section>
<div className={styles.MobileAccordion}>
<CustomAccordion items={accordionItems} />
</div>
<div className={styles.Box} data-testid='get-connected'>
<Heading.H5 className={styles.SectionTitle}>
<Translate>Get connected</Translate>
</Heading.H5>
<p className={styles.SectionContent}>
<Text size='sm'>
<Translate>Discuss ideas and share solutions with developers worldwide.</Translate>
</Text>
<p className={styles.SectionContent}>
</p>
<div className={styles.CommunityButton} data-testid='community-button'>
<Button
variant='secondary'
color='black'
fullWidth
onClick={() => {
window.open('https://deriv.vanillacommunity.com/', '_blank');
}}
>
<Translate>Join our community</Translate>
</Button>
<Button
variant='secondary'
color='black'
fullWidth
onClick={() => {
window.open('https://t.me/+g6FV5tFY1u9lZGE1', '_blank');
}}
>
<SocialTelegramBlackIcon fill='#000000' iconSize='xs' />
<Translate>Telegram</Translate>
</Button>
</div>
</div>
<div className={styles.Box}>
<Heading.H5 className={styles.SectionTitle}>
<Translate>We're here to help</Translate>
</Heading.H5>
<p className={styles.SectionContent}>
<Text size='sm' style={{ display: 'inline' }}>
<Translate>Email us at</Translate>{' '}
<a href={'mailto:[email protected]'}>
<Translate>[email protected]</Translate>
</a>{' '}
</Text>
<a href='mailto:[email protected]' style={{ display: 'inline' }}>
<Text size='sm' style={{ display: 'inline' }}>
<Translate>[email protected] </Translate>
</Text>
</a>
<Text size='sm' style={{ display: 'inline' }}>
<Translate>if you need any assistance or support.</Translate>
</p>
<div className={styles.EmailButton}>
<Button
color='black'
variant='secondary'
size='md'
type='button'
className={`${styles.PaddedButton} ${styles.FullWidthButton}`}
onClick={() => {
window.open('mailto:[email protected]', '_blank');
}}
>
<LabelPairedEnvelopeCaptionBoldIcon height={30} width={30} />{' '}
<Translate>Send an email</Translate>
</Button>
</div>
</Text>
</p>
<div className={styles.EmailButton}>
<Button
color='black'
size='md'
variant='secondary'
fullWidth
onClick={() => {
window.open('mailto:[email protected]', '_blank');
}}
>
<LabelPairedEnvelopeMdBoldIcon /> <Translate>Send an email</Translate>
</Button>
</div>
</div>
</div>
</section>
</div>
</section>
</div>
);
};
Expand Down

0 comments on commit 0545484

Please sign in to comment.