Skip to content
This repository was archived by the owner on Apr 18, 2024. It is now read-only.

Commit 979bb71

Browse files
prince-derivprince-deriv
authored
Merge pull request #3 from NikitK-deriv/layout
feat: add first implementation of layout
2 parents cf2d32a + 5190bfc commit 979bb71

File tree

17 files changed

+672
-93
lines changed

17 files changed

+672
-93
lines changed

‎package-lock.json

Lines changed: 1 addition & 91 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
"@types/node": "^17.0.8",
6262
"@types/react": "^17.0.38",
6363
"@types/react-dom": "^17.0.11",
64-
"@types/styled-components": "^5.1.19",
64+
"@types/styled-components": "^5.1.25",
6565
"@typescript-eslint/eslint-plugin": "^5.9.0",
6666
"@typescript-eslint/parser": "^5.9.0",
6767
"babel-eslint": "10.1.0",

‎src/common/components/containers/box.ts

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import styled, { css } from 'styled-components'
2+
import { Margins, Paddings } from 'themes/function'
3+
import { size } from 'themes/device'
4+
5+
export const mediaqueries = Object.keys(size)
6+
.sort(function (a, b) {
7+
return size[b] - size[a]
8+
})
9+
.reduce((accumulator, label) => {
10+
accumulator[label] = (...args) => css`
11+
@media (max-width: ${size[label]}px) {
12+
${css(...args)};
13+
}
14+
`
15+
return accumulator
16+
}, {})
17+
18+
export const generateResponsiveStyles = (stylesGenerator) => (props) => {
19+
return Object.keys(mediaqueries).reduce((rules, mq) => {
20+
if (!props[mq]) return rules
21+
const styles = mediaqueries[mq]`
22+
${stylesGenerator(props[mq])}
23+
`
24+
return [...rules, styles]
25+
}, [])
26+
}
27+
28+
const baseStyles = ({
29+
m,
30+
mt,
31+
ml,
32+
mr,
33+
mb,
34+
p,
35+
pt,
36+
pl,
37+
pr,
38+
pb,
39+
min_width,
40+
max_width,
41+
min_height,
42+
max_height,
43+
width,
44+
height,
45+
}) => css`
46+
min-width: ${min_width};
47+
max-width: ${max_width};
48+
min-height: ${min_height};
49+
max-height: ${max_height};
50+
width: ${width};
51+
height: ${height};
52+
${Margins({ m, mt, ml, mr, mb })}
53+
${Paddings({ p, pt, pl, pr, pb })}
54+
`
55+
56+
const responsiveStyles = generateResponsiveStyles(baseStyles)
57+
58+
const Box = styled.div`
59+
width: ${(props) => (props.width ? props.width : '')};
60+
height: ${(props) => (props.height ? props.height : '')};
61+
min-height: ${(props) => (props.min_height ? props.min_height : '')};
62+
max-width: ${(props) => (props.max_width ? props.max_width : '')};
63+
position: ${(props) => (props.position ? props.position : '')};
64+
background: ${(props) => (props.background || props.bg ? props.background || props.bg : '')};
65+
${baseStyles}
66+
${responsiveStyles}
67+
`
68+
export default Box

‎src/common/components/containers/container.ts

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import styled from 'styled-components'
2+
import Box, { generateResponsiveStyles } from './box'
3+
import { flexStyles } from './flex'
4+
import device from 'themes/device'
5+
6+
const responsiveStyles = generateResponsiveStyles(flexStyles)
7+
8+
const Container = styled(Box)`
9+
margin: 0 auto;
10+
display: flex;
11+
align-items: ${(props) => (props.align || props.ai ? props.align || props.ai : 'center')};
12+
justify-content: ${(props) =>
13+
props.justify || props.jc ? props.justify || props.jc : 'center'};
14+
flex-direction: ${(props) =>
15+
props.direction || props.fd ? props.direction || props.fd : 'row'};
16+
flex-wrap: ${(props) => (props.wrap || props.fw ? props.wrap || props.fw : '')};
17+
width: 80%;
18+
19+
@media ${device.desktop} {
20+
max-width: 1200px;
21+
}
22+
@media ${device.laptopL} {
23+
width: 84%;
24+
}
25+
@media ${device.laptopM} {
26+
flex-direction: ${(props) => props.laptop_direction};
27+
}
28+
@media ${device.desktopL} {
29+
max-width: 1600px;
30+
}
31+
@media ${device.tabletL} {
32+
width: 90%;
33+
padding-left: 0;
34+
padding-right: 0;
35+
flex-direction: ${(props) => props.tablet_direction};
36+
}
37+
38+
${responsiveStyles}
39+
`
40+
41+
export default Container

‎src/common/components/containers/css-grid.ts

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import styled from 'styled-components'
2+
import PropTypes from 'prop-types'
3+
import Box from './box'
4+
import device from 'themes/device'
5+
6+
const CssGrid = styled(Box)`
7+
display: grid;
8+
height: ${(props) => props.height || '100%'};
9+
margin: ${(props) => props.margin || '0'};
10+
grid-template-columns: ${(props) => props.columns || 'auto'};
11+
grid-gap: ${(props) => props.grid_gap || ''};
12+
grid-template-rows: ${(props) => props.rows || 'auto'};
13+
grid-column-gap: ${(props) => props.column_gap || ''};
14+
grid-row-gap: ${(props) => props.row_gap || ''};
15+
align-items: ${(props) => props.align || 'start'};
16+
justify-items: ${(props) => props.justify || 'unset'};
17+
background-color: ${(props) => props.bgcolor || 'none'};
18+
@media ${device.laptopL} {
19+
grid-template-columns: ${(props) =>
20+
props.laptop_columns ? props.laptop_columns : props.columns};
21+
grid-gap: ${(props) => (props.laptop_grid_gap ? props.laptop_grid_gap : props.grid_gap)};
22+
grid-template-rows: ${(props) => (props.laptop_rows ? props.laptop_rows : props.rows)};
23+
grid-column-gap: ${(props) =>
24+
props.laptop_column_gap ? props.laptop_column_gap : props.column_gap};
25+
grid-row-gap: ${(props) => (props.laptop_row_gap ? props.laptop_row_gap : props.row_gap)};
26+
}
27+
@media ${device.tabletL} {
28+
grid-template-columns: ${(props) =>
29+
props.tablet_columns ? props.tablet_columns : props.columns};
30+
grid-gap: ${(props) => (props.tablet_grid_gap ? props.tablet_grid_gap : props.grid_gap)};
31+
grid-template-rows: ${(props) => (props.tablet_rows ? props.tablet_rows : props.rows)};
32+
grid-column-gap: ${(props) =>
33+
props.tablet_column_gap ? props.tablet_column_gap : props.column_gap};
34+
grid-row-gap: ${(props) => (props.tablet_row_gap ? props.tablet_row_gap : props.row_gap)};
35+
}
36+
@media ${device.tabletS} {
37+
grid-template-columns: ${(props) =>
38+
props.mobile_columns ? props.mobile_columns : props.columns};
39+
grid-gap: ${(props) => (props.mobile_grid_gap ? props.mobile_grid_gap : props.grid_gap)};
40+
grid-template-rows: ${(props) => (props.mobile_rows ? props.mobile_rows : props.rows)};
41+
grid-column-gap: ${(props) =>
42+
props.mobile_column_gap ? props.mobile_column_gap : props.column_gap};
43+
grid-row-gap: ${(props) => (props.mobile_row_gap ? props.mobile_row_gap : props.row_gap)};
44+
}
45+
`
46+
47+
export const CssGridColumn = styled.div`
48+
padding: ${(props) => props.padding || '0'};
49+
align-self: ${(props) => props.align || 'stretch'};
50+
justify-self: ${(props) => props.justify || 'initial'};
51+
background-color: ${(props) => props.bgcolor || 'none'};
52+
height: ${(props) => props.height || 'auto'};
53+
`
54+
55+
export default CssGrid
56+
57+
CssGrid.propTypes = {
58+
align: PropTypes.string,
59+
bgcolor: PropTypes.string,
60+
column_gap: PropTypes.string,
61+
columns: PropTypes.string,
62+
justify: PropTypes.string,
63+
margin: PropTypes.string,
64+
row_gap: PropTypes.string,
65+
}
66+
CssGridColumn.propTypes = {
67+
align: PropTypes.string,
68+
bgcolor: PropTypes.string,
69+
height: PropTypes.string,
70+
justify: PropTypes.string,
71+
padding: PropTypes.string,
72+
}

‎src/common/components/containers/flex.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import styled, { css } from 'styled-components'
2+
import Box, { generateResponsiveStyles } from './box'
3+
import device from 'themes/device'
4+
5+
export const flexStyles = ({ jc, ai, fw, fd }) => css`
6+
justify-content: ${jc};
7+
align-items: ${ai};
8+
flex-wrap: ${fw};
9+
flex-direction: ${fd};
10+
`
11+
12+
const responsiveStyles = generateResponsiveStyles(flexStyles)
13+
14+
const Flex = styled(Box)`
15+
display: flex;
16+
width: ${(props) => (props.width ? props.width : '100%')};
17+
height: ${(props) => (props.height ? props.height : '100%')};
18+
flex-wrap: ${(props) => (props.wrap || props.fw ? props.wrap || props.fw : '')};
19+
justify-content: ${(props) => (props.jc ? props.jc : 'center')};
20+
align-items: ${(props) => (props.ai ? props.ai : '')};
21+
flex-direction: ${(props) => (props.direction || props.fd ? props.direction || props.fd : '')};
22+
23+
@media ${device.tablet} {
24+
flex-direction: ${(props) => (props.tablet_direction ? props.tablet_direction : '')};
25+
align-items: ${(props) => (props.tablet_ai ? props.tablet_ai : '')};
26+
justify-content: ${(props) => (props.tablet_jc ? props.tablet_jc : '')};
27+
flex-wrap: ${(props) => props.tablet_fw};
28+
}
29+
30+
${responsiveStyles}
31+
`
32+
33+
export default Flex

‎src/common/components/layout/footer.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Link } from 'gatsby'
2+
import React from 'react'
3+
import styled from 'styled-components'
4+
import Container from '../containers/container'
5+
import { DefaultFooter, DisclaimerWrapper, FooterGrid, PagesWrapper } from './footer/common/style'
6+
import SocialWrapperComponent from './footer/social-wrapper'
7+
8+
const StyledFooterLink = styled(Link)`
9+
text-decoration: none;
10+
color: white;
11+
`
12+
13+
const Footer = () => {
14+
return (
15+
<DefaultFooter>
16+
<Container>
17+
<FooterGrid>
18+
<SocialWrapperComponent />
19+
<DisclaimerWrapper>
20+
2022 Sinbad Software LLC. All rights reserved.
21+
</DisclaimerWrapper>
22+
<PagesWrapper>
23+
<StyledFooterLink to="/">Home | </StyledFooterLink>
24+
<StyledFooterLink to="/careers"> Careers | </StyledFooterLink>
25+
<StyledFooterLink to="/openpositions"> Open Positions </StyledFooterLink>
26+
</PagesWrapper>
27+
</FooterGrid>
28+
</Container>
29+
</DefaultFooter>
30+
)
31+
}
32+
33+
export default Footer

0 commit comments

Comments
 (0)