Change the Responsive react semantic ui to artsy/fresnel (Semantic-Or…

…g/Semantic-UI-React#4008) + Site base structure upgrade
thecointech · Oct 16, 2020 · 45ef8ec · 45ef8ec
1 parent 5e84700
commit 45ef8ec
Show file tree

Hide file tree

Showing 11 changed files with 97 additions and 59 deletions.
diff --git a/apps/site/app/containers/App/index.tsx b/apps/site/app/containers/App/index.tsx
@@ -8,7 +8,7 @@
  */
 
 import * as React from 'react';
-import { Container, Responsive, Segment } from 'semantic-ui-react';
+import { Container, Segment } from 'semantic-ui-react';
 import { useLocation } from 'react-router';
 
 import MainNavigation from 'containers/MainNavigation';
@@ -25,6 +25,23 @@ import { useAccountMapStore } from '@the-coin/shared/containers/AccountMap';
 import { useFxRatesStore } from '@the-coin/shared/containers/FxRate/reducer';
 import styles from './styles.module.css';
 
+import { createMedia } from "@artsy/fresnel";
+
+const AppMedia = createMedia({
+  breakpoints: {
+    mobile: 320,
+    tablet: 768,
+    computer: 992,
+    largeScreen: 1200,
+    widescreen: 1920
+  }
+});
+
+const mediaStyles = AppMedia.createMediaStyle();
+export const { Media, MediaContextProvider } = AppMedia;
+
+
+
 export const App = ( ) => {
   usePrismic();
   useFxRatesStore();
@@ -33,17 +50,19 @@ export const App = ( ) => {
 
   return (
     <>
-      <Responsive as={Segment} {...Responsive.onlyComputer}>
+    <MediaContextProvider>
+      <style>{mediaStyles}</style>
+      <Segment as={Media} greaterThan="mobile">
         <MainNavigation />
-      </Responsive>
-      <Responsive as={Segment} {...Responsive.onlyMobile}>
+      </Segment>
+
+      <Segment as={Media} at="mobile">
         <MainNavigationMobile />
-      </Responsive>
+      </Segment>
 
-      <Container
+      <Container className="appContainer"
         style={{
-          backgroundColor: '#fffff f',
-          width: '100%',
+          width: '100%'
         }}
       >
         <PageSidebar>
@@ -55,6 +74,7 @@ export const App = ( ) => {
         </PageSidebar>
       </Container>
       <Footer />
+    </MediaContextProvider>
     </>
   );
 }
diff --git a/apps/site/app/containers/CreateAccountBanner/index.tsx b/apps/site/app/containers/CreateAccountBanner/index.tsx
@@ -8,7 +8,7 @@ import { NavLink } from 'react-router-dom';
 
 export const CreateAccountBanner = () => {
   return (
-    <Grid className={styles.content} columns='equal' textAlign='center' verticalAlign='middle' stackable>
+    <Grid className={styles.content} id={styles.createAccountBanner} columns='equal' textAlign='center' verticalAlign='middle' stackable>
         <Grid.Row>
             <Grid.Column>
                 <Header as='h3'>

diff --git a/apps/site/app/containers/CreateAccountBanner/styles.module.less b/apps/site/app/containers/CreateAccountBanner/styles.module.less
@@ -1,4 +1,7 @@
+#createAccountBanner{
+    margin-top: 100px;
+}
+
 .content{
     text-align: center;
-
 }
diff --git a/apps/site/app/containers/Healthier/index.tsx b/apps/site/app/containers/Healthier/index.tsx
@@ -1,5 +1,6 @@
+import { Media } from 'containers/App';
 import * as React from 'react';
-import { Grid, Header, Responsive, Segment } from 'semantic-ui-react';
+import { Grid, Header, Segment } from 'semantic-ui-react';
 
 import { CreateAccountBanner } from '../CreateAccountBanner';
 import { HealthierMobile } from '../HealthierMobile';
@@ -25,40 +26,42 @@ export function Healthier() {
                   description:"The remaining 1/10th is used to pay off our carbon debt" }
 
   return (
-    <div className={styles.wrapper} id="healthier">
-      <Responsive as={Segment} {...Responsive.onlyComputer}>
-        <img src={illustration} className={styles.illustration} />
-        <Grid className={styles.content} columns='equal' textAlign='left' verticalAlign='middle' stackable>
-        <Header as="h1" className={styles.center}>
-            Earth’s Healthier
-        </Header>
-          <p className={styles.center}>
-            Our non-profits mission is to fully use a neglected resource to fight climate change - your bank account.
-          </p>
-          <Grid.Row>
-            <Grid.Column>
-              <ColumnWithTwoTitles 
-                FirstTitle = "$1000"
-                FirstHeaderMessage = { majorBanks }
-                SecondTitle= "90%"
-                SecondHeaderMessage = { investments }/>
-            </Grid.Column>
-            <Grid.Column className={styles.rightColumn} textAlign='left'>
-              <ColumnWithTwoTitles 
-                  FirstTitle = "$100"
-                  FirstHeaderMessage = { lifestyle }
-                  SecondTitle= "1/10"
-                  SecondHeaderMessage = { carbon }/>
+    <>
+      <div className={styles.wrapper} id={styles.healthier}>
+        <Segment as={Media} greaterThan="mobile">
+          <img src={illustration} className={styles.illustration} />
+          <Grid className={styles.content} columns='equal' textAlign='left' verticalAlign='middle' stackable>
+          <Header as="h1" className={styles.center}>
+              Earth’s Healthier
+          </Header>
+            <p className={styles.center}>
+              Our non-profits mission is to fully use a neglected resource to fight climate change - your bank account.
+            </p>
+            <Grid.Row>
+              <Grid.Column>
+                <ColumnWithTwoTitles 
+                  FirstTitle = "$1000"
+                  FirstHeaderMessage = { majorBanks }
+                  SecondTitle= "90%"
+                  SecondHeaderMessage = { investments }/>
               </Grid.Column>
-          </Grid.Row>
-        </Grid>
-      </Responsive>
+              <Grid.Column className={styles.rightColumn} textAlign='left'>
+                <ColumnWithTwoTitles 
+                    FirstTitle = "$100"
+                    FirstHeaderMessage = { lifestyle }
+                    SecondTitle= "1/10"
+                    SecondHeaderMessage = { carbon }/>
+                </Grid.Column>
+            </Grid.Row>
+          </Grid>
+        </Segment>
 
-      <Responsive as={Segment} {...Responsive.onlyMobile}>
-        <HealthierMobile />
-      </Responsive>
+        <Segment as={Media} at="mobile">
+          <HealthierMobile />
+        </Segment>
+      </div>
 
-      <CreateAccountBanner />
-    </div>
+        <CreateAccountBanner />
+      </>
   );
 }
diff --git a/apps/site/app/containers/HomePage/index.tsx b/apps/site/app/containers/HomePage/index.tsx
@@ -17,14 +17,15 @@ import { Wealthier } from './wealthier';
 import { CreateAccountSmall } from './createAccountSmall';
 import { Underwater } from './underwater';
 import { CreateAccountBig } from './createAccountBig';
-import { Responsive, Segment } from 'semantic-ui-react';
+import { Segment } from 'semantic-ui-react';
+import { Media } from 'containers/App';
 
 export const HomePage = () => {
 
   return (
     <React.Fragment>
 
-      <Responsive as={Segment} {...Responsive.onlyComputer}>
+      <Segment as={Media} greaterThan="mobile">
         <div>
           <Landscape />
           <Advantages />
@@ -33,9 +34,9 @@ export const HomePage = () => {
           <Underwater />
           <CreateAccountBig />
         </div>
-      </Responsive>
+      </Segment>
 
-      <Responsive as={Segment} {...Responsive.onlyMobile}>
+      <Segment as={Media} at="mobile">
         <div id="mobile">
           <Landscape />
           <Advantages />
@@ -44,7 +45,7 @@ export const HomePage = () => {
           <Underwater />
           <CreateAccountBig />
         </div>
-      </Responsive>
+      </Segment>
 
     </React.Fragment>
   );

diff --git a/apps/site/app/containers/HomePage/landscape/index.tsx b/apps/site/app/containers/HomePage/landscape/index.tsx
@@ -14,6 +14,7 @@ import Sun from './images/sun.svg';
 import SunAura from './images/sunAura.svg';
 import landscapeGreenPart from './images/landscape.svg'
 import landscapeGreenPartMobile from './images/illustration_header_mob.svg'
+import { Media } from 'containers/App';
 
 
 export const Landscape = () => {
@@ -47,7 +48,7 @@ export const Landscape = () => {
 
       <Stickers />
 
-      <Responsive as={Segment} {...Responsive.onlyComputer}>
+      <Segment as={Media} greaterThan="mobile">
         <div className={styles.landscape}>
           <img className={styles.sky} src={sky} />
           <img className={styles.cloudsHigh} src={landscapeSkyCloudsHigh} />
@@ -57,11 +58,11 @@ export const Landscape = () => {
           <img className={styles.sun} src={Sun} />
           <img className={styles.greenery} src={landscapeGreenPart} />
         </div>
-      </Responsive>
+      </Segment>
 
-      <Responsive as={Segment} {...Responsive.onlyMobile}>
+      <Segment as={Media} at="mobile">
         <img className={styles.landscapeMobile} src={landscapeGreenPartMobile} />
-      </Responsive>
+      </Segment>
 
     </React.Fragment>
   );

diff --git a/apps/site/app/containers/HomePage/underwater/index.tsx b/apps/site/app/containers/HomePage/underwater/index.tsx
@@ -10,14 +10,15 @@ import trees from './images/icon_5_3.svg';
 import backgroundMobile from './images/full_background_mobile.svg';
 
 import { Grid, Header, Responsive, Segment } from 'semantic-ui-react';
+import { Media } from 'containers/App';
 
 export const Underwater = () => {
 
   return (
     <React.Fragment>
-      <Responsive as={Segment} {...Responsive.onlyComputer}>
+      <Segment as={Media} greaterThan="mobile">
         <img className={styles.illustration} src={illustration} />
-      </Responsive>
+      </Segment>
       <div className={styles.landscape}>
         <div className={styles.header}>
               <Header as='h2'>
@@ -103,13 +104,13 @@ export const Underwater = () => {
           </Grid.Row>
         </Grid>
 
-        <Responsive as={Segment} {...Responsive.onlyComputer}>
+        <Segment as={Media} greaterThan="mobile">
           <img className={styles.water} src={background} />
-        </Responsive>
+        </Segment>
 
-        <Responsive as={Segment} {...Responsive.onlyMobile}>
+        <Segment as={Media} at="mobile">
           <img className={styles.waterMobile} src={backgroundMobile} />
-        </Responsive>
+        </Segment>
       </div>
     </React.Fragment>
   );

diff --git a/apps/site/app/styles/semantic/elements/segment.overrides b/apps/site/app/styles/semantic/elements/segment.overrides
@@ -4,4 +4,7 @@
 .ui.segments .segment, .ui.container .ui.segment, .ui.container{
     margin: 0;
     padding: 0;
+}
+.ui.segment{
+    margin-top: 0;
 }
diff --git a/apps/site/app/styles/semantic/globals/reset.overrides b/apps/site/app/styles/semantic/globals/reset.overrides
@@ -1,3 +1,3 @@
 /*******************************
          Site Overrides
-*******************************/
+*******************************/
diff --git a/apps/site/package.json b/apps/site/package.json
@@ -55,6 +55,7 @@
     ]
   },
   "dependencies": {
+    "@artsy/fresnel": "^1.2.2",
     "@formatjs/intl-pluralrules": "^1.4.1",
     "@nivo/line": "^0.61.1",
     "@the-coin/shared": "*",

diff --git a/yarn.lock b/yarn.lock
@@ -12,6 +12,11 @@
   resolved "https://registry.yarnpkg.com/7zip/-/7zip-0.0.6.tgz#9cafb171af82329490353b4816f03347aa150a30"
   integrity sha1-nK+xca+CMpSQNTtIFvAzR6oVCjA=
 
+"@artsy/fresnel@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@artsy/fresnel/-/fresnel-1.2.2.tgz#612ecbf93602f7b01e9b5fc0489330767b7971ea"
+  integrity sha512-NndGZyDPZS2XSiYsq+q2oCVHfe6J7N4W1m+i6DgYXONI3q7Yk1EHLVyjJp8S3NBAx/x27gio4MRdCDZfBR3x8Q==
+
 "@babel/cli@7.5.0":
   version "7.5.0"
   resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.5.0.tgz#f403c930692e28ecfa3bf02a9e7562b474f38271"