Merge pull request #4 from NikitK-deriv/homepage

Homepage - Sinbad

Author: prince-deriv

gatsby-config.js

@@ -5,6 +5,7 @@ require('dotenv').config({
 const site_url = 'https://sinbad.dev'
 
 module.exports = {
+    pathPrefix: '/sinbad',
     flags: {
         FAST_DEV: true,
     },
@@ -28,7 +29,7 @@ module.exports = {
             resolve: 'gatsby-source-filesystem',
             options: {
                 name: 'images',
-                path: `${__dirname}/src/images/common`,
+                path: `${__dirname}/src/images`,
             },
         },
         'gatsby-transformer-sharp',

package-lock.json

@@ -44,7 +44,8 @@
         "react-ticker": "^1.3.1",
         "use-query-params": "^1.2.3",
         "web-push-notifications": "^3.24.0",
-        "webpack": "^5.65.0"
+        "webpack": "^5.65.0",
+        "webpack-cli": "^4.9.2"
     },
     "devDependencies": {
         "@commitlint/cli": "^16.2.1",

package.json

@@ -1,15 +1,11 @@
 import styled from 'styled-components'
-import CssGrid from '../../../containers/css-grid'
-import Flex from '../../../containers/flex'
+import Flex from 'common/components/containers/flex'
 import device from 'themes/device'
 
 export const DefaultFooter = styled.footer`
     background-color: #22365e;
     color: white;
     width: 100%;
-    margin: 0 auto;
-    margin-bottom: ${(props) => props.is_eu_country && '7.3rem'};
-    padding-bottom: 1.6rem;
 
     @media ${device.mobileL} {
         padding-bottom: 6rem;
@@ -19,31 +15,12 @@ export const DefaultFooter = styled.footer`
         }
     }
 `
-export const FooterGrid = styled(CssGrid)`
-    width: 100%;
-    grid-template-columns: 2fr;
-    grid-template-areas:
-        'links links'
-        'disclaimer disclaimer'
-        'copyright social'
-        'copyright pages';
-
-    @media ${device.tabletL} {
-        grid-template-columns: 1fr;
-        grid-template-areas:
-            'links'
-            'social'
-            'disclaimer'
-            'pages'
-            'copyright';
-    }
-`
 
 export const SocialWrapper = styled.div`
-    grid-area: links;
+    align-items: center;
+    height: 175px;
     background: #22365e;
     color: white;
-    margin: 1.6rem 0;
     display: flex;
     justify-content: space-between;
 
@@ -65,13 +42,17 @@ export const SocialWrapper = styled.div`
 `
 
 export const DisclaimerWrapper = styled.div`
-    grid-area: disclaimer;
+    height: 100px;
     background: #22365e;
     color: white;
+    border-top: 1px solid gray;
+    display: flex;
 `
 
 export const PagesWrapper = styled(Flex)`
-    grid-area: pages;
     align-items: center;
     color: white;
+    display: flex;
+    justify-content: space-between;
+    width: 1000px;
 `

src/common/components/containers/box.ts

@@ -1,17 +1,69 @@
 import styled, { css } from 'styled-components'
-import Box, { generateResponsiveStyles } from './box'
-import device from 'themes/device'
+import device, { size } from 'themes/device'
 
-export const flexStyles = ({ jc, ai, fw, fd }) => css`
+type FlexBoxProps = {
+    width?: string
+    height?: string
+    min_height?: string
+    max_width?: string
+    position?: string
+    background?: string
+    wrap?: string
+    jc?: string
+    fw?: string
+    bg?: string
+    fd?: string
+    ai?: string
+    direction?: string
+    tablet_direction?: string
+    tablet_ai?: string
+    tablet_jc?: string
+    tablet_fw?: string
+}
+
+const flexStyles = ({ jc, ai, fw, fd }) => css`
     justify-content: ${jc};
     align-items: ${ai};
     flex-wrap: ${fw};
     flex-direction: ${fd};
 `
 
+const mediaqueries = Object.keys(size)
+    .sort(function (a, b) {
+        return size[b] - size[a]
+    })
+    .reduce((accumulator, label) => {
+        accumulator[label] = (...args) => css`
+            @media (max-width: ${size[label]}px) {
+                ${css(...args)};
+            }
+        `
+        return accumulator
+    }, {})
+
+const generateResponsiveStyles = (stylesGenerator) => (props) => {
+    return Object.keys(mediaqueries).reduce((rules, mq) => {
+        if (!props[mq]) return rules
+        const styles = mediaqueries[mq]`        
+        ${stylesGenerator(props[mq])}
+        `
+        return [...rules, styles]
+    }, [])
+}
+
 const responsiveStyles = generateResponsiveStyles(flexStyles)
 
-const Flex = styled(Box)`
+export const Box = styled.div<FlexBoxProps>`
+    width: ${(props) => (props.width ? props.width : '')};
+    height: ${(props) => (props.height ? props.height : '')};
+    min-height: ${(props) => (props.min_height ? props.min_height : '')};
+    max-width: ${(props) => (props.max_width ? props.max_width : '')};
+    position: ${(props) => (props.position ? props.position : '')};
+    background: ${(props) => (props.background || props.bg ? props.background || props.bg : '')};
+    ${responsiveStyles}
+`
+
+const Flex = styled(Box)<FlexBoxProps>`
     display: flex;
     width: ${(props) => (props.width ? props.width : '100%')};
     height: ${(props) => (props.height ? props.height : '100%')};

src/common/components/layout/footer/common/style.ts src/common/components/containers/common/style.ts

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