fix landing page styling (#9584)

Co-authored-by: Ashleigh Simonelli <[email protected]>

packages/reapit-connect/package.json

@@ -32,6 +32,7 @@
     "@sentry/browser": "^7.53.0",
     "dayjs": "^1.11.7",
     "just-debounce-it": "^1.5.0",
+    "normalize-css": "^2.3.1",
     "qrcode": "^1.5.1",
     "query-string": "5.1.1",
     "react": "^18.2.0",

packages/reapit-connect/src/components/pages/welcome/__styles__/index.ts

@@ -16,6 +16,18 @@ export const buttonStyle = css`
   border-color: transparent;
   color: white;
   min-width: 200px;
+  padding: 1em;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  align-self: flex-start;
+  text-align: center;
+
+  @media screen and (max-width: 768px) {
+    align-self: stretch;
+    padding-top: 1em;
+    padding-bottom: 1em;
+
+  }
 
   &:active {
     color: white;

packages/reapit-connect/src/components/pages/welcome/welcome.tsx

@@ -33,7 +33,7 @@ export const Welcome: React.FC<WelcomeProps> = () => {
 
   return (
     <MainContainer>
-      <PageContainer>
+      <PageContainer style={{ paddingLeft: 0, paddingRight: 0 }}>
         <div className={logoWrapStyle}>
           <img className={logoStyle} src={logo} alt="logo" />
         </div>

packages/reapit-connect/src/components/ui/section/__styles__/index.ts

@@ -4,6 +4,10 @@ export const sectionContainer = css`
   @media screen and (min-width: 768px) {
     height: 400px;
   }
+  display: flex;
+  justify-content: space-between;
+  padding-left: 2em;
+  padding-right: 2em;
 
   &:nth-child(odd) {
     flex-direction: row-reverse;
@@ -12,6 +16,12 @@ export const sectionContainer = css`
   &:nth-child(even) {
     flex-direction: row;
   }
+  @media screen and (max-width: 768px) {
+    &:nth-child(odd),
+    &:nth-child(even) {
+      flex-direction: column-reverse;
+    }
+  }
 `
 
 export const gridItem = css`
@@ -27,6 +37,18 @@ export const gridItem = css`
     padding-left: 2.5em;
     padding-right: 2.5em;
   }
+
+  @media screen and (max-width: 768px) {
+    max-height: 240px;
+    overflow: hidden;
+    margin-bottom: 1.2em;
+  }
+`
+
+export const sectionContent = css`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 `
 
 export const hasBackgroundSection = css`

packages/reapit-connect/src/components/ui/section/section.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { cx } from '@linaria/core'
-import { sectionContainer, hasBackgroundSection, gridItem } from './__styles__'
+import { sectionContainer, hasBackgroundSection, gridItem, sectionContent } from './__styles__'
 import { BodyText, elPy7, Subtitle, Title } from '@reapit/elements'
 
 export type SectionProps = {
@@ -27,7 +27,7 @@ export const Section: React.FC<SectionProps> = ({
         background: background || 'white',
       }}
     >
-      <div className={cx(!!background && hasBackgroundSection)}>
+      <div className={cx(sectionContent, !!background && hasBackgroundSection)}>
         <Title>{heading}</Title>
         <Subtitle>{subheading}</Subtitle>
         <BodyText>{description}</BodyText>

packages/reapit-connect/src/core/app.tsx

@@ -14,6 +14,20 @@ export const globals = css`
       height: 100%;
       background-color: #fff;
     }
+
+    * {
+      box-sizing: border-box !important;
+      line-height: 20px;
+    }
+
+    html {
+      font-size: 16px !important;
+      font-family: 'Roboto', Helvetica, Arial, sans-serif;
+
+      &.is-desktop {
+        font-size: 14px !important;
+      }
+    }
   }
 `
 

packages/reapit-connect/src/core/index.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import * as Sentry from '@sentry/react'
 import { createRoot } from 'react-dom/client'
 import { getMarketplaceGlobalsByKey } from '@reapit/utils-react'
+import 'normalize-css'
 import App from './app'
 
 const rootElement = document.querySelector('#root') as Element

yarn.lock

@@ -29123,6 +29123,13 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"insert-css@npm:0.0.0":
+  version: 0.0.0
+  resolution: "insert-css@npm:0.0.0"
+  checksum: d0441ad656674fe971a594dcf6f53f53cdb8d469668344a7dd15dfa7f2805829d553f3cf799d967256cead4d960f884ffcd27e45df9732916a3c8b7763a16f7b
+  languageName: node
+  linkType: hard
+
 "insights@workspace:packages/insights":
   version: 0.0.0-use.local
   resolution: "insights@workspace:packages/insights"
@@ -34643,6 +34650,15 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"normalize-css@npm:^2.3.1":
+  version: 2.3.1
+  resolution: "normalize-css@npm:2.3.1"
+  dependencies:
+    insert-css: 0.0.0
+  checksum: abf27f95fdecd81fe5e3bcb91dfa1af064babe11e5fd93ba6b96b1e9ced82836e7956f6158e6a2f945eba0ff89c3498e55d0d79729f46c0592ee3d7b260a2f89
+  languageName: node
+  linkType: hard
+
 "normalize-package-data@npm:^2.3.2, normalize-package-data@npm:^2.3.4, normalize-package-data@npm:^2.5.0":
   version: 2.5.0
   resolution: "normalize-package-data@npm:2.5.0"
@@ -38865,6 +38881,7 @@ fsevents@^1.2.7:
     jest: ^29.5.0
     jest-coverage-badges: ^1.1.2
     just-debounce-it: ^1.5.0
+    normalize-css: ^2.3.1
     qrcode: ^1.5.1
     query-string: 5.1.1
     react: ^18.2.0