Merge pull request #7 from NikitK-deriv/careers

 Careers Page - Sinbad   Careers Page - Sinbad

Author: prince-deriv

src/common/components/containers/index.ts

@@ -1,4 +1,4 @@
 import Flex, { Box } from './flex'
-import { ContactUsButton, Header, Text, ImageContainer } from './main'
+import { ContactUsButton, SeeOurPositions, Header, Text, ImageContainer } from './main'
 
-export { Flex, Box, ContactUsButton, Header, Text, ImageContainer }
+export { Flex, Box, ContactUsButton, SeeOurPositions, Header, Text, ImageContainer }

src/common/components/containers/main.ts

@@ -1,4 +1,6 @@
 import styled from 'styled-components'
+import SeeOurPositionsImage from 'images/common/see-our-positions-image.png'
+import ContactUs from 'images/common/contact-us-button.png'
 
 type HeaderProps = {
     font_size?: string
@@ -12,19 +14,27 @@ type TextProps = {
     width?: string
     text_align?: string
     padding?: string
+    line_height?: string
 }
 type ImageProps = {
     width?: string
     height?: string
 }
 
-export const ContactUsButton = styled.button`
-    width: fit-content;
+export const ContactUsButton = styled.div`
+    width: 90px;
     height: 25px;
-    color: black;
-    background-color: orange;
-    border-radius: 10px;
-    font-size: 10px;
+    background-image: url(${ContactUs});
+    background-repeat: no-repeat;
+    background-size: 90px 25px;
+`
+
+export const SeeOurPositions = styled.div`
+    width: 150px;
+    height: 25px;
+    background-image: url(${SeeOurPositionsImage});
+    background-repeat: no-repeat;
+    background-size: 150px 25px;
 `
 
 export const ImageContainer = styled.img<ImageProps>`
@@ -41,7 +51,7 @@ export const Header = styled.div<HeaderProps>`
 `
 export const Text = styled.div<TextProps>`
     font-size: ${(props) => props.font_size || '16px'};
-    line-height: 18px;
+    line-height: ${(props) => props.line_height || '18px'};
     width: ${(props) => props.width || '300px'};
     text-align: ${(props) => props.text_align || 'left'};
     padding: ${(props) => props.padding || '15px 0'};

src/common/components/containers/table.tsx

@@ -0,0 +1,90 @@
+import React from 'react'
+import styled from 'styled-components'
+
+export type TermProps = {
+    index?: number
+    margin?: string
+    border_left?: boolean
+}
+
+type TermsServiceType = { header?: string; text: string; icon: string }
+
+type OurServiceType = {
+    first?: TermsServiceType
+    other?: TermsServiceType[]
+}
+
+type OurTermsType = {
+    first_column?: TermsServiceType[]
+    second_column?: TermsServiceType[]
+}
+
+export type PBType = {
+    our_terms?: OurTermsType
+}
+
+type DataType = {
+    data?: {
+        our_service?: OurServiceType
+        our_terms?: OurTermsType
+    }
+}
+const TableContainer = styled.div`
+    display: flex;
+    flex-direction: row;
+    padding: 15px;
+`
+
+const TableColumn = styled.div`
+    display: flex;
+    flex-direction: column;
+`
+
+const TermImage = styled.img`
+    width: 40px;
+    height: 40px;
+`
+const TermText = styled.div`
+    font-size: 14px;
+    padding-left: 20px;
+    font-weight: normal;
+    text-align: left;
+`
+
+const Term = styled.div<TermProps>`
+    display: flex;
+    align-items: center;
+    width: 170px;
+    height: 70px;
+    padding: 10px;
+    border-top: ${(props) =>
+        props.index === 0 ? 'unset' : props.index === 4 ? 'unset' : '1px solid gray'};
+    border-bottom: ${(props) =>
+        props.index === 3 ? 'unset' : props.index === 7 ? 'unset' : '1px solid gray'};
+    border-left: ${(props) => (props.border_left ? '1px solid gray' : 'unset')};
+`
+
+const Table = ({ data }: DataType) => {
+    return (
+        <TableContainer>
+            <TableColumn>
+                {data.our_terms.first_column.map((item, index) => (
+                    <Term key={index} index={index}>
+                        <TermImage src={item.icon} />
+                        <TermText>{item.text}</TermText>
+                    </Term>
+                ))}
+            </TableColumn>
+            <TableColumn>
+                {data.our_terms.second_column.map((item, index) => (
+                    <Term key={index} index={index} border_left={true}>
+                        <TermImage src={item.icon} />
+                        <TermText>{item.text}</TermText>
+                    </Term>
+                ))}
+            </TableColumn>
+        </TableContainer>
+    )
+}
+
+export default Table

src/common/components/layout/footer.tsx

@@ -38,7 +38,7 @@ const Footer = () => {
                         <div>
                             <StyledFooterLink to="/">Home | </StyledFooterLink>
                             <StyledFooterLink to="/careers"> Careers | </StyledFooterLink>
-                            <StyledFooterLink to="/openpositions">Open Positions</StyledFooterLink>
+                            <StyledFooterLink to="/open-positions">Open Positions</StyledFooterLink>
                         </div>
                     </PagesWrapper>
                 </DisclaimerWrapper>

src/common/components/layout/header.tsx

@@ -35,8 +35,12 @@ const StyledHeaderLink = styled(Link)`
 `
 
 export const PagesWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 360px;
     color: white;
-    padding-right: 15px;
+    padding-right: 35px;
 `
 
 const Header = () => {
@@ -47,10 +51,10 @@ const Header = () => {
                 <HeaderTitle>Software</HeaderTitle>
             </StyledHeader>
             <PagesWrapper>
-                <StyledHeaderLink to="/">Home | </StyledHeaderLink>
-                <StyledHeaderLink to="/careers"> Careers | </StyledHeaderLink>
-                <StyledHeaderLink to="/openpositions"> Open Positions </StyledHeaderLink>
-                <ContactUsButton> Contact us </ContactUsButton>
+                <StyledHeaderLink to="/">Home </StyledHeaderLink>
+                <StyledHeaderLink to="/careers"> Careers </StyledHeaderLink>
+                <StyledHeaderLink to="/open-positions"> Open Positions </StyledHeaderLink>
+                <ContactUsButton />
             </PagesWrapper>
         </HeaderContainer>
     )

src/common/components/layout/layout.tsx

@@ -3,7 +3,7 @@ import Footer from './footer'
 import Header from './header'
 
 type LayoutType = {
-    children: React.ReactChild
+    children: React.ReactChild | React.ReactChild[]
 }
 
 const Layout = ({ children }: LayoutType) => {

src/images/common/careers/index.ts

@@ -0,0 +1,6 @@
+import Sinbad0 from './sinbad-0.png'
+import Sinbad1 from './sinbad-1.png'
+import Sinbad2 from './sinbad-2.png'
+import Sinbad3 from './sinbad-2.png'
+
+export { Sinbad0, Sinbad1, Sinbad2, Sinbad3 }