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

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

Kevin/refactor who we are nav #2471

Merged
merged 3 commits into from
Jan 7, 2022
Merged

Kevin/refactor who we are nav #2471

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a0cb717
update show to use desktop/mobile wrapper
virtualpowwa Jan 6, 2022
351ba72
refactor flex and header
virtualpowwa Jan 6, 2022
94db75f
solve comment
virtualpowwa Jan 7, 2022
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
4 changes: 2 additions & 2 deletions src/components/layout/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
import styled from 'styled-components'
import useGTMData from '../hooks/use-gtm-data'
import Copyright from './copyright'
import { Nav, NavStatic, NavPartners, NavInterim, NavAboutUs } from './nav'
import { Nav, NavStatic, NavPartners, NavInterim, NavSticky } from './nav'
import JumpIndicesNav from './jump-indices/nav'
import { NavCareers } from './nav-careers'
import { LocationProvider } from './location-context'
Expand Down Expand Up @@ -205,7 +205,7 @@ const Layout = ({
FooterNav = <Footer no_language={true} type={type} />
break
case 'about-us':
Navigation = <NavAboutUs is_ppc_redirect={is_ppc_redirect} is_ppc={is_ppc} />
Navigation = <NavSticky is_ppc_redirect={is_ppc_redirect} is_ppc={is_ppc} />
FooterNav = <Footer is_ppc={is_ppc} is_ppc_redirect={is_ppc_redirect} />
break
default:
Expand Down
56 changes: 35 additions & 21 deletions src/components/layout/nav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import PlatformsDropdown from '../custom/platforms-dropdown'
import { useOutsideClick } from 'components/hooks/use-outside-click'
import { LocalizedLink, localize, LanguageSwitcher } from 'components/localization'
import { Button, LinkButton } from 'components/form'
import { Container, Show, Flex, SectionContainer } from 'components/containers'
import { Container, Flex, SectionContainer } from 'components/containers'
import {
OffCanvasMenu,
OffCanvasMenuPartner,
Expand Down Expand Up @@ -44,6 +44,20 @@ const query = graphql`
}
`

export const DesktopWrapper = styled.div`
display: block;
@media ${(props) => props.media || device.tabletL} {
display: none;
}
`

export const MobileWrapper = styled.div`
display: none;
@media ${(props) => props.media || device.tabletL} {
display: block;
}
`

const LanguageSwitcherNavDesktop = ({ no_language }) =>
!no_language && <LanguageSwitcher short_name="true" is_high_nav />

Expand Down Expand Up @@ -653,7 +667,7 @@ export const Nav = ({
<>
<NavWrapperMain>
<StyledNavMain>
<Show.Desktop max_width="bp1060">
<DesktopWrapper media={device.bp1060}>
<NavDesktop
no_language={no_language}
academy_logo={academy_logo}
Expand All @@ -663,16 +677,16 @@ export const Nav = ({
is_logged_in={is_logged_in}
hide_signup_login={hide_signup_login}
/>
</Show.Desktop>
<Show.Mobile min_width="bp1060">
</DesktopWrapper>
<MobileWrapper media={device.bp1060}>
<NavMobile
no_language={no_language}
academy_logo={academy_logo}
is_ppc={is_ppc}
is_logged_in={is_logged_in}
hide_signup_login={hide_signup_login}
/>
</Show.Mobile>
</MobileWrapper>
</StyledNavMain>
</NavWrapperMain>
<CFDWarning />
Expand Down Expand Up @@ -748,7 +762,7 @@ export const NavInterim = ({ interim_type }) => (
<NavInterimContainer>
<Container jc="space-between" p="2.4rem 0">
<Flex ai="center" jc="flex-start">
<Show.Desktop>
<DesktopWrapper>
<StyledLogo to={`/interim/${interim_type}`} aria-label={localize('Home')}>
<Flex ai="center">
<img src={Logo} alt="logo" width="190" height="27" />
Expand All @@ -760,8 +774,8 @@ export const NavInterim = ({ interim_type }) => (
/>
</Flex>
</StyledLogo>
</Show.Desktop>
<Show.Mobile>
</DesktopWrapper>
<MobileWrapper>
<LogoLinkMobile
to={`/interim/${interim_type}`}
aria-label={localize('Home')}
Expand All @@ -779,7 +793,7 @@ export const NavInterim = ({ interim_type }) => (
</LogoDescription>
</Flex>
</LogoLinkMobile>
</Show.Mobile>
</MobileWrapper>
</Flex>
<Auto jc="flex-end" ai="center">
<LanguageSwitcher short_name="true" />
Expand Down Expand Up @@ -889,7 +903,7 @@ const StyledNavWrapper = styled(Wrapper)`
}
`

const Mobile = styled(Show.Mobile)`
const Mobile = styled(MobileWrapper)`
width: 100%;
`

Expand Down Expand Up @@ -929,7 +943,7 @@ const LSContainer = styled(Container)`
margin-left: 200px;
`

const DesktopLS = styled(Show.Desktop)`
const DesktopLS = styled(DesktopWrapper)`
z-index: 2;
`

Expand Down Expand Up @@ -1099,12 +1113,12 @@ export const NavPartners = ({ no_login_signup }) => {
target="_blank"
primary
>
<Show.Desktop>
<DesktopWrapper>
<span>{localize('Affiliate & IB log in')}</span>
</Show.Desktop>
<Show.Mobile>
</DesktopWrapper>
<MobileWrapper>
<span>{localize('Log in')}</span>
</Show.Mobile>
</MobileWrapper>
</LinkMobileLogin>
)}
</Flex>
Expand Down Expand Up @@ -1158,7 +1172,7 @@ const Section = styled(SectionContainer)`
}
`

export const NavAboutUs = ({ is_ppc, hide_signup_login, no_language }) => {
export const NavSticky = ({ is_ppc, hide_signup_login, no_language }) => {
const [is_logged_in, setLoggedIn] = useState(true)
const [prevScrollPos, setPrevScrollPos] = useState(0)
const [visible, setVisible] = useState(true)
Expand Down Expand Up @@ -1189,29 +1203,29 @@ export const NavAboutUs = ({ is_ppc, hide_signup_login, no_language }) => {
return (
<>
<Section background={visible}>
<Show.Desktop max_width="bp1060">
<DesktopWrapper media={device.bp1060}>
<NavDesktop
no_language={no_language}
is_ppc={is_ppc}
is_logged_in={is_logged_in}
hide_signup_login={hide_signup_login}
/>
</Show.Desktop>
<Show.Mobile min_width="bp1060">
</DesktopWrapper>
<MobileWrapper media={device.bp1060}>
<NavMobile
no_language={no_language}
is_ppc={is_ppc}
is_logged_in={is_logged_in}
hide_signup_login={hide_signup_login}
/>
</Show.Mobile>
</MobileWrapper>
</Section>
<CFDWarning no_eu_banner={true} />
</>
)
}

NavAboutUs.propTypes = {
NavSticky.propTypes = {
academy_logo: PropTypes.bool,
base: PropTypes.string,
hide_signup_login: PropTypes.bool,
Expand Down
16 changes: 3 additions & 13 deletions src/pages/about-us/_AboutUsBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,16 +53,6 @@ const PictureFlex = styled(Flex)`
width: 250px;
}
`
const StyledHeader = styled(Header)`
color: var(--color-white);
margin-bottom: 16px;
line-height: 40px;

@media ${device.tablet} {
font-size: 28px;
line-height: 34px;
}
`
const Styledtext = styled(Text)`
color: var(--color-white);
margin-bottom: 24px;
Expand All @@ -73,10 +63,10 @@ const AboutUsBanner = () => {
<StyledSectionContainer>
<StyledFlex direction="column" height="288px" width="1200px">
<PictureFlex jc="start" ai="start" direction="column">
<StyledHeader width="100%" type="unset" as="h2" size="32px">
<Header as="h3" width="100%" type="heading-3" color="white" mb="18px">
{localize('We have a huge mission, an incredible team, and rapid growth.')}
</StyledHeader>
<Styledtext width="100%" type="paragraph-2" as="p">
</Header>
<Styledtext width="100%" type="subtitle-1" as="p">
{localize('Join and grow with us.')}
</Styledtext>
<LinkButton
Expand Down
13 changes: 3 additions & 10 deletions src/pages/about-us/_OurPrinciples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,7 @@ const StyledSection = styled(SectionContainer)`
padding: 40px 16px;
}
`
const StyledHeader = styled(Header)`
margin: 0 0 40px 0;
padding: 0;
@media ${device.laptop} {
font-size: 28px;
margin-bottom: 24px;
}
`

const StyledDivider = styled(Divider)`
margin: 0;
@media (min-width: 824px) {
Expand Down Expand Up @@ -88,9 +81,9 @@ const ColoredBox = styled(Box)`
const OurPrinciples = () => {
return (
<StyledSection>
<StyledHeader as="h2" size="48px" align="center" type="page-title">
<Header as="h2" align="center" type="heading-2" mb="40px" laptop={{ mb: '24px' }}>
{localize('Our principles are the framework for our decisions')}
</StyledHeader>
</Header>
<StyledFlex wrap="wrap" jc="left" ai="center">
{our_principles.map((principle) => (
<div key={principle.title}>
Expand Down
44 changes: 7 additions & 37 deletions src/pages/our-principles/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,16 +33,6 @@ const ColorHeader = styled(Header)`
}
`

const MainHeader = styled(Header)`
padding-bottom: 24px;

@media ${device.mobileM} {
padding-bottom: 24px;
font-size: 40px;
line-height: 50px;
}
`

const StyledMainText = styled(Text)`
font-size: 24px;
font-weight: 400;
Expand All @@ -65,18 +55,6 @@ const StyledText = styled(Text)`
}
`

const StyledHeader = styled(Header)`
padding-bottom: 8px;
font-size: 24px;
line-height: 36px;
font-weight: 700;

@media ${device.mobileM} {
font-size: 18px;
line-height: 26px;
}
`

const StyledContainer = styled(Container)`
max-width: 1098px;
flex-direction: column;
Expand All @@ -99,16 +77,6 @@ const PrinciplesSection = styled(SectionContainer)`
}
`

const StyledCardContainer = styled(Flex)`
@media ${device.tablet} {
flex-direction: column;
}

@media ${device.mobileM} {
margin: 0px 0px;
}
`

const StyledImg = styled.img`
@media ${device.tablet} {
width: 104px;
Expand All @@ -131,9 +99,9 @@ const OurPrinciples = (): React.ReactNode => {
<SEO title={localize('Our principles | Deriv')} />
<TitleSection padding="120px 0 24px 10rem">
<StyledContainer>
<MainHeader type="display-title" color="black" weight="700" align="left">
<Header as="h1" type="hero" align="left" mb="24px">
{localize('Our principles')}
</MainHeader>
</Header>
<StyledMainText>
{localize(
'We are honoured to serve everyone who relies on our products and services, and we only want to offer the best. That’s why our principles and values are so important in defining who we are, why we do what we do, and how we treat our clients and each other. Across our international offices, we are committed to the following principles in everything that we do.',
Expand All @@ -145,7 +113,7 @@ const OurPrinciples = (): React.ReactNode => {
{principles.map((principle, index) => (
<StyledContainer key={index}>
<Separator background={principle.separator} />
<StyledCardContainer jc="space-between">
<Flex jc="space-between" tablet={{ fd: 'column' }} mobileM={{ m: '0 0' }}>
<StyledFlex max_width="180px" m="10px">
<StyledImg src={principle.img} />
</StyledFlex>
Expand All @@ -155,12 +123,14 @@ const OurPrinciples = (): React.ReactNode => {
</ColorHeader>
{principle.description.map((description, key) => (
<Flex key={key} fd="column">
<StyledHeader as="h3">{description.title}</StyledHeader>
<Header as="h3" type="subtitle-1">
{description.title}
</Header>
<StyledText>{description.text} </StyledText>
</Flex>
))}
</Flex>
</StyledCardContainer>
</Flex>
</StyledContainer>
))}
</PrinciplesSection>
Expand Down