From ffe9dfdd89badc74ed81aaeb3f8bb196d432d4c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cpavel-latyshou-deriv=E2=80=9D?=
 <“pavel.latyshou@regentmarkets.com”>
Date: Thu, 13 Jan 2022 16:00:22 +0300
Subject: [PATCH 1/3] fixes to locations

---
 .../careers/locations/_location-layout-new-offices.tsx |  9 ++++++---
 src/pages/careers/locations/_location-layout.tsx       | 10 +++++++---
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/pages/careers/locations/_location-layout-new-offices.tsx b/src/pages/careers/locations/_location-layout-new-offices.tsx
index 7f33c7b9d24..d3b307f4153 100644
--- a/src/pages/careers/locations/_location-layout-new-offices.tsx
+++ b/src/pages/careers/locations/_location-layout-new-offices.tsx
@@ -37,6 +37,8 @@ const SecondStyledHeader = styled(Header)`
     margin-bottom: 0 24px;
 `
 const StyledLinkButton = styled(LinkButton)`
+    padding: 15px 24px;
+    border-radius: 6px;
     font-size: 20px;
     line-height: 30px;
     @media ${device.tablet} {
@@ -240,11 +242,12 @@ export const NewLocationLayout = ({ location, images }: LocationLayoutProps) =>
                     align="center"
                     as="h2"
                     size="var(--text-size-header-5)"
+                    color="black-6"
                 >
                     Deriv in {display_name}
                 </SecondStyledHeader>
                 <Flex tablet_direction="column">
-                    <Text>{location.first_p}</Text>
+                    <Text color="black-6">{location.first_p}</Text>
                     <StyledImageWrapper>
                         <QueryImage
                             data={images[location.first_img]}
@@ -266,10 +269,10 @@ export const NewLocationLayout = ({ location, images }: LocationLayoutProps) =>
                         />
                         <WorkingInformation p="3.2rem 6rem" direction="column">
                             <StyledDiv>
-                                <Header as="h3" type="subtitle-1">
+                                <Header as="h3" type="subtitle-1" color="black-6">
                                     {`Working at Deriv ${map_office_name}`}
                                 </Header>
-                                <CardText>{location.map_text}</CardText>
+                                <CardText color="black-6">{location.map_text}</CardText>
                             </StyledDiv>
                         </WorkingInformation>
                     </WorkingFlex>
diff --git a/src/pages/careers/locations/_location-layout.tsx b/src/pages/careers/locations/_location-layout.tsx
index c25b4683674..72f62b247a0 100644
--- a/src/pages/careers/locations/_location-layout.tsx
+++ b/src/pages/careers/locations/_location-layout.tsx
@@ -47,6 +47,8 @@ const SecondStyledHeader = styled(Header)`
     margin-bottom: 0 24px;
 `
 const StyledLinkButton = styled(LinkButton)`
+    padding: 15px 24px;
+    border-radius: 6px;
     font-size: 20px;
     line-height: 30px;
     @media ${device.tablet} {
@@ -358,6 +360,7 @@ export const LocationLayout = ({ location, images }: LocationLayoutProps) => {
             <Hero display_name={display_name} img_data={images[location.name]} />
             <FirstSection>
                 <SecondStyledHeader
+                    color="black-6"
                     type="unset"
                     align="center"
                     as="h2"
@@ -366,7 +369,7 @@ export const LocationLayout = ({ location, images }: LocationLayoutProps) => {
                     Deriv in {display_name}
                 </SecondStyledHeader>
                 <Flex tablet_direction="column">
-                    <Text>{location.first_p}</Text>
+                    <Text color="black-6">{location.first_p}</Text>
                     <StyledImageWrapper>
                         <QueryImage
                             data={images[location.first_img]}
@@ -380,6 +383,7 @@ export const LocationLayout = ({ location, images }: LocationLayoutProps) => {
             <SecondSection padding="0px 16px">
                 <SectionContainer padding="0">
                     <Header
+                        color="black-6"
                         type="unset"
                         align="center"
                         as="h2"
@@ -457,10 +461,10 @@ export const LocationLayout = ({ location, images }: LocationLayoutProps) => {
                             max_width="44.4rem"
                         >
                             <StyledDiv>
-                                <Header as="h3" type="subtitle-1">
+                                <Header as="h3" type="subtitle-1" color="black-6">
                                     {`Working at Deriv ${map_office_name}`}
                                 </Header>
-                                <CardText>{location.map_text}</CardText>
+                                <CardText color="black-6">{location.map_text}</CardText>
                                 <Flex jc="unset">
                                     <Pin src={MapPin} alt="map pin" />
                                     {location.google_map_link ? (

From cc8c0e78b0cbc7a1a1fd73a7cb297eead8950060 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cpavel-latyshou-deriv=E2=80=9D?=
 <“pavel.latyshou@regentmarkets.com”>
Date: Fri, 14 Jan 2022 10:24:52 +0300
Subject: [PATCH 2/3] fix border radius

---
 src/pages/careers/locations/_location-layout-new-offices.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/careers/locations/_location-layout-new-offices.tsx b/src/pages/careers/locations/_location-layout-new-offices.tsx
index d3b307f4153..4c39e744fbc 100644
--- a/src/pages/careers/locations/_location-layout-new-offices.tsx
+++ b/src/pages/careers/locations/_location-layout-new-offices.tsx
@@ -38,7 +38,7 @@ const SecondStyledHeader = styled(Header)`
 `
 const StyledLinkButton = styled(LinkButton)`
     padding: 15px 24px;
-    border-radius: 6px;
+    border-radius: 8px;
     font-size: 20px;
     line-height: 30px;
     @media ${device.tablet} {

From 1d60db529d803292045491dba7f148e7d607f618 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cpavel-latyshou-deriv=E2=80=9D?=
 <“pavel.latyshou@regentmarkets.com”>
Date: Fri, 14 Jan 2022 10:48:29 +0300
Subject: [PATCH 3/3] add border radius to hero

---
 src/components/form/button.js                 |  1 +
 .../_location-layout-new-offices.tsx          | 20 ++++---------------
 .../careers/locations/_location-layout.tsx    | 20 ++++---------------
 3 files changed, 9 insertions(+), 32 deletions(-)

diff --git a/src/components/form/button.js b/src/components/form/button.js
index bb77fa24da4..1dae9325065 100644
--- a/src/components/form/button.js
+++ b/src/components/form/button.js
@@ -101,6 +101,7 @@ export const SharedButtonStyle = css`
                 padding: 17px 24px;
                 font-size: 20px;
                 line-height: 30px;
+                border-radius: 8px;
 
                 &:hover {
                     background-color: var(--color-red-3);
diff --git a/src/pages/careers/locations/_location-layout-new-offices.tsx b/src/pages/careers/locations/_location-layout-new-offices.tsx
index 4c39e744fbc..65b512f977d 100644
--- a/src/pages/careers/locations/_location-layout-new-offices.tsx
+++ b/src/pages/careers/locations/_location-layout-new-offices.tsx
@@ -36,19 +36,7 @@ const SecondStyledHeader = styled(Header)`
 
     margin-bottom: 0 24px;
 `
-const StyledLinkButton = styled(LinkButton)`
-    padding: 15px 24px;
-    border-radius: 8px;
-    font-size: 20px;
-    line-height: 30px;
-    @media ${device.tablet} {
-        font-size: 18px;
-        max-width: 317px;
-    }
-    @media (max-width: 340px) {
-        font-size: 15px;
-    }
-`
+
 type HeroProps = {
     display_name: string
     img_data: string
@@ -59,16 +47,16 @@ const Hero = ({ display_name, img_data }: HeroProps) => {
         <StyledBackground data={img_data} alt={display_name}>
             <StyledContainer>
                 <StyledHeader as="h1">{display_name}</StyledHeader>
-                <StyledLinkButton
+                <LinkButton
+                    hero
                     has_no_end_slash
-                    secondary="true"
                     to={zoho_url}
                     target="_blank"
                     rel="noopener noreferrer"
                     external
                 >
                     View open positions in {display_name}
-                </StyledLinkButton>
+                </LinkButton>
             </StyledContainer>
         </StyledBackground>
     )
diff --git a/src/pages/careers/locations/_location-layout.tsx b/src/pages/careers/locations/_location-layout.tsx
index 72f62b247a0..ded23108471 100644
--- a/src/pages/careers/locations/_location-layout.tsx
+++ b/src/pages/careers/locations/_location-layout.tsx
@@ -46,19 +46,7 @@ const SecondStyledHeader = styled(Header)`
 
     margin-bottom: 0 24px;
 `
-const StyledLinkButton = styled(LinkButton)`
-    padding: 15px 24px;
-    border-radius: 6px;
-    font-size: 20px;
-    line-height: 30px;
-    @media ${device.tablet} {
-        font-size: 18px;
-        max-width: 317px;
-    }
-    @media (max-width: 340px) {
-        font-size: 15px;
-    }
-`
+
 type HeroProps = {
     display_name: string
     img_data: string
@@ -69,16 +57,16 @@ const Hero = ({ display_name, img_data }: HeroProps) => {
         <StyledBackground data={img_data} alt={display_name}>
             <StyledContainer>
                 <StyledHeader as="h1">{display_name}</StyledHeader>
-                <StyledLinkButton
+                <LinkButton
+                    hero
                     has_no_end_slash
-                    secondary="true"
                     to={zoho_url}
                     target="_blank"
                     rel="noopener noreferrer"
                     external
                 >
                     View open positions in {display_name}
-                </StyledLinkButton>
+                </LinkButton>
             </StyledContainer>
         </StyledBackground>
     )