Merge pull request #427 from makerdao/rejon/BugBundleA

Bug Bundle A: Chocolate Box layout updates, Sidenav issue on mobile production, Typography audit wipe

content/en/funding/index.mdx

@@ -48,10 +48,6 @@ Develop infrastructure and applications for the Maker ecosystem.
 
 </Box>
 
-</Chocolate>
-
-<Chocolate>
-
 <Box>
 
 <Icon size={"40px"} name="people"/>

content/en/resources/technical-content/palette-recipes.mdx

@@ -948,6 +948,33 @@ It's possible to show videos here. They'll always be full width with no styles.
 
 ---
 
+### Text
+
+
+# Header 1
+
+## Header 2
+
+### Header 3
+
+#### Header 4
+
+##### Large Text
+
+**Bold text**
+
+Regular text
+
+<Text variant="smallText"> Small text </Text>
+
+<Text variant="microText"> Micro text </Text>
+
+<Text variant="caps">Caps</Text>
+
+<Link to="/">Link </Link>
+
+---
+
 ### This is a living document. Add or remove components as you change things. And always remember to have fun.
 
 <Authors author="@MaximumCrash" list />

src/gatsby-plugin-theme-ui/components.js

@@ -47,92 +47,60 @@ const MD_Overrides = {
       variant="h1"
       sx={{
         mb: "24px",
-        fontSize: ["48px", "48px", "64px"],
-        letterSpace: "64px",
-        fontWeight: ["500", "500"],
-        letterSpacing: ".03px",
         lineHeight: "normal",
-        '&:not(:first-of-type)': {
-          mt: '24px'
-        }
       }}
       {...props}
     />
   ),
   h2: (props) => (
     <Text
-      variant="h2"
       as="h2"
       sx={{
         mb: "32px",
-        fontSize: "48px",
-        fontWeight: "500",
-        letterSpacing: ".03px",
         lineHeight: "normal",
-        '&:not(:first-of-type)': {
-          mt: '32px'
-        }
       }}
       {...props}
     />
   ),
   h3: (props) => (
     <Text
-      variant="h3"
       as="h3"
       sx={{
         mb: "32px",
-        fontSize: "32px",
-        fontWeight: "500",
-        letterSpacing: ".03px",
         lineHeight: "normal",
-        '&:not(:first-of-type)': {
-          mt: '32px'
-        }
       }}
       {...props}
     />
   ),
   h4: (props) => (
     <Text
-      variant="h4"
       as="h4"
       sx={{
-        fontSize: "24px",
-        fontWeight: "500",
-        letterSpacing: ".03px",
         mb: "32px",
         lineHeight: "normal",
-        '&:not(:first-of-type)': {
-          mt: '32px'
-        }
       }}
       {...props}
     />
   ),
-  h5: (props) => (
+  h5: ({children,...props}) => (
     <Text
-      variant="h5"
       as="h5"
       sx={{
         mb: '32px',
-        fontSize: "20px",
-        fontWeight: "normal",
-        letterSpacing: ".03px",
+        fontSize: '20px',
+        fontWeight: 'normal',
         lineHeight: "normal" ,
-        '&:not(:first-of-type)': {
-          mt: '32px'
-        }
       }}
-      {...props}
-    />
+    >
+      {children}
+    </Text>
   ),
   table: (props) => <Table {...props} />,
   thematicBreak: (props) => <Divider sx={{ my: 4 }} />,
   hr: (props) => <Divider sx={{ my: 4 }} />,
   p: (props) => (
     <Text
-      sx={{ mb: "16px", fontSize: "18px", letterSpacing: ".03px", lineHeight: "150%", "& .button": { display: "inline-block" } }}
+      sx={{ mb: "16px", fontSize: "16px", letterSpacing: "0.3px", lineHeight: "150%", "& .button": { display: "inline-block" } }}
       {...props}
     />
   ), //NOTE(Rejon): Don't add the as="p" prop to this text component, else you'll get warnings about our interweaving.

src/gatsby-plugin-theme-ui/index.js

@@ -325,6 +325,44 @@ export default {
     transDash_regionBG:
       "linear-gradient(rgb(248, 237, 216), rgb(244, 227, 194))",
   },
+  text: {
+    ...maker.text,
+    h1: {
+      fontSize: '64px',
+      letterSpacing: "0.3px",
+      fontWeight: "600",
+      fontFamily: 'heading'
+    },
+    h2: {
+      fontSize: '48px',
+      fontWeight: "600",
+      letterSpacing: '0.3px',
+      fontFamily: 'heading',
+    },
+    h3: {
+      fontSize: '32px',
+      fontWeight: '600',
+      letterSpacing: "0.3px",
+      fontFamily: 'heading'
+    },
+    h4: {
+      fontSize: '24px',
+      fontWeight: '600',
+      letterSpacing: '0.3px',
+      fontFamily: 'heading'
+    },
+    largeText: {
+      fontSize: '20px',
+      fontWeight: 'normal',
+      letterSpacing: '0.3px',
+      fontFamily: 'heading'
+    },
+    smallText: {
+      fontSize: '14px',
+      lineHeight: '17px',
+      letterSpacing: '0.1px'
+    }
+  },
   shadows: {
     high: "0px 2px 17px rgba(35, 21, 54, 0.46)",
     raised: "0px 2px 15px rgba(35, 21, 54, 0.15)",
@@ -336,7 +374,8 @@ export default {
   },
   fonts: {
 	  ...maker.fonts,
-    body: "FT Base, system-ui, Arial, sans-serif",
+    body: 'FT Base, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif',
+    heading: 'FT Base, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif',
     transparencyDashboard: 'system-ui,"Helvetica Neue",sans-serif',
   },
   styles: {

src/modules/layouts/site_layout.js

@@ -45,7 +45,7 @@ const Layout = ({ children, pageContext, uri, ...props }) => {
             dontUpdateHolderHeightWhenSticky={true}
             style={{ position: "relative" }}
             hideOnBoundaryHit={false}
-            sx={{minWidth: "307px"}}
+            sx={{minWidth: "307px", display: ["none", "none", "initial"]}}
           >
             <Sidenav />
           </Sticky>

src/modules/navigation/Footer.js

@@ -115,7 +115,7 @@ const Footer = () => {
               sx={{ width: "217px", height: "30px", display: "block" }}
             />
           </Link>
-          <Box sx={{ "& > a:not(:last-of-type)": { mr: "24px" } }}>
+          <Box sx={{ "& > *:not(:last-of-type)": { mr: "18px" }, '& > a': {mr: 0} }}>
             {_socialLinks.map((s, index) => {
               const link = s.match(/\(([^)]+)\)/)[1];
 

src/modules/ui/Chocolate.js

@@ -1,26 +1,45 @@
 /** @jsx jsx */
+import {Children} from 'react';
 import { jsx, Grid } from "theme-ui";
 
-const Chocolate = ({ children }) => (
-  <Grid
-    gap={3}
-    columns={[
-      `minmax(100px, 1fr)`,
-      `minmax(100px, 1fr) minmax(100px, 1fr)`,
-      `minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr)`,
-    ]}
-    sx={{
-      "& > * > * > img": {
-        width: "100%",
-        height: "100%",
-        objectFit: "cover",
-        objectPosition: "center",
-      },
-      mb: 4,
-    }}
-  >
-    {children}
-  </Grid>
-);
+const Chocolate = ({ children }) => {
+  const _Children = Children.toArray(children);
+
+  //Column Widths based on item count
+  const columnWidth = () => {
+    if (_Children.length === 1) {
+      //1 item, full width
+      return `minmax(100px, 1fr)`;
+    }
+
+    if (_Children.length === 2 || _Children.length === 4) {
+      // 2 or 4 items (2 x 2)
+      return `minmax(100px, 1fr) minmax(100px, 1fr)`;
+    }
+
+    //3 - Infinity Items (3 x 3)
+    return `minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr)`;
+  };
+
+  return (
+    (
+      <Grid
+        gap={4}
+        columns={columnWidth()}
+        sx={{
+          "& > * > * > img": {
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+            objectPosition: "center",
+          },
+          mb: 4,
+        }}
+      >
+        {children}
+      </Grid>
+    )
+  )
+};
 
 export default Chocolate;