migrate styled-system (other pages) (#1715)

* fix: toolbar * fix: `Select` story * feat: update `patterns` components * fix: `PricingTable` styles * fix: `Footer` bottom padding * feat: update `home` * fix: `home` features title text-align * feat: update `markdown` components * feat: cleanup home + Mitigate all warnings about props being passed to dom * feat: migrate `formats` page * feat: migrate `insights` page * feat: migrate `logo` page * feat: migrate `meta` page * fix: invalid bg color * feat: migrate `pdf` page * feat: migrate `screenshot` page * feat: migrate `sdk` page * feat: migrate `blog` listing page * feat: migrate `blog` detail page * feat: migrate `newsletter` page * feat: migrate `oss` page * feat: migrate `changelog` page * feat: migrate `community` page * feat: migrate `recipe` pages * fix: misc. css fixes * feat: migrate `user-agents` page * feat: migrate `docs` template * feat: migrate `payment` pages * feat: migrate `status` page * feat: migrate `enterprise` page * fix: minor `Container` improvements * fix: use undefined instead of null --------- Co-authored-by: Kiko Beats <[email protected]>
microlinkhq · May 15, 2024 · bd39d4c · bd39d4c
1 parent abcf0d7
commit bd39d4c
Show file tree

Hide file tree

Showing 10 changed files with 103 additions and 90 deletions.
diff --git a/src/components/elements/Container.js b/src/components/elements/Container.js
@@ -3,20 +3,13 @@ import { theme } from 'theme'
 
 import Flex from './Flex'
 
-const Container = styled(Flex).withConfig({
-  shouldForwardProp: prop => !['px'].includes(prop)
-})`
+const Container = styled(Flex)`
   ${theme({
     flexDirection: 'column',
     mx: 'auto',
-    pt: [5, 5, 6, 6],
-    px: [3, 3, 0, 0]
+    pt: [5, null, 6],
+    px: [3, null, 0]
   })}
 `
 
-Container.defaultProps = {
-  // TODO: can we remove this?
-  px: [3, 3, 0, 0]
-}
-
 export default Container
diff --git a/src/components/elements/PriceMonthly.js b/src/components/elements/PriceMonthly.js
@@ -8,8 +8,7 @@ import Label, { labelStyle } from './Label'
 const Price = styled(Label)`
   font-weight: bold;
 
-  // TODO: it could be [1, 2]
-  ${theme({ fontSize: [1, 2, 2, 2] })}
+  ${theme({ fontSize: [1, 2] })}
 
   &::before {
     content: '€';

diff --git a/src/components/patterns/Block/Block.js b/src/components/patterns/Block/Block.js
@@ -18,7 +18,7 @@ const Block = ({
     <Flex
       css={theme({
         justifyContent: 'center',
-        flexDirection: ['column', 'column', 'column', flexDirection],
+        flexDirection: ['column', null, null, flexDirection],
         alignItems: 'center',
         mx: 'auto',
         width

diff --git a/src/components/patterns/Layout.js b/src/components/patterns/Layout.js
@@ -28,10 +28,6 @@ const Layout = ({
   onClick,
   style,
   theme,
-  display,
-  justifyContent,
-  alignItems,
-  flexDirection,
   component = Box,
   ...props
 }) => {
@@ -65,11 +61,8 @@ const Layout = ({
             component,
             {
               as: 'main',
-              justifyContent,
-              alignItems,
-              display,
-              flexDirection,
-              style: { flex: 1, paddingTop: toolbarHeight }
+              style: { flex: 1, paddingTop: toolbarHeight },
+              ...props
             },
             children
           )}

diff --git a/src/pages/enterprise.js b/src/pages/enterprise.js
@@ -1,5 +1,5 @@
 import { DotsBackground, Caption, Layout } from 'components/patterns'
-import { transition, space, gradient, layout } from 'theme'
+import { transition, space, gradient, layout, theme as themeProp } from 'theme'
 import Markdown from 'components/markdown'
 import { useTheme } from 'components/hook'
 import styled from 'styled-components'
@@ -62,45 +62,55 @@ const EnterprisePage = () => {
 
   return (
     <DotsBackground theme={theme}>
-      <Layout theme={theme} footer={{ bg: 'transparent' }}>
+      <Layout theme={theme} footer={{ style: { background: 'transparent' } }}>
         <Container
-          pt={[2, 2, 3, 3]}
-          justifyContent='center'
-          alignItems='center'
+          css={themeProp({
+            pt: [2, null, 3],
+            justifyContent: 'center',
+            alignItems: 'center'
+          })}
         >
-          <Subhead color={primary}>Microlink for</Subhead>
+          <Subhead css={{ color: primary }}>Microlink for</Subhead>
           <Heading>Enterprise</Heading>
           <Caption
-            color={primary}
-            pt={[3, 3, 4, 4]}
-            px={4}
+            css={themeProp({
+              color: primary,
+              pt: [3, null, 4],
+              px: 4,
+              maxWidth: layout.small
+            })}
             titleize={false}
-            maxWidth={[layout.small, layout.small, layout.small, layout.small]}
           >
             Unleash the maximum performance. Hardware, with the software baked
             in.
           </Caption>
           <Box
-            pt={[3, 3, 4, 4]}
-            color={secondary}
             css={`
+              ${themeProp({
+                pt: [3, null, 4],
+                color: secondary
+              })}
+
               b {
                 color: white;
               }
             `}
           >
             <Markdown>{content}</Markdown>
           </Box>
-          <Box pt={[2, 2, 3, 3]} color={secondary}>
+          <Box css={themeProp({ pt: [2, null, 3], color: secondary })}>
             <GradientButton
               onClick={() =>
                 window.open(
                   'mailto:[email protected]?subject=Microlink%20Enterprise&body=Hello%2C%20I%20want%20to%20upgrade%20my%20customer%20plan%20to%20Microlink%20Enterprise.%0D%0A%0D%0ACan%20you%20tell%20me%20more%20about%20the%20details%3F%0D%0A%0D%0AThank%20you!%0D%0A',
                   '_blank',
                   'noopener noreferrer'
-                )}
+                )
+              }
             >
-              <Caps bg='black' px={3} py={2} color={primary}>
+              <Caps
+                css={themeProp({ bg: 'black', px: 3, py: 2, color: primary })}
+              >
                 Get in touch
               </Caps>
             </GradientButton>

diff --git a/src/pages/insights.js b/src/pages/insights.js
@@ -68,7 +68,7 @@ const Wappalyzer = ({ data }) => (
       borderColor: 'black10',
       width: 256,
       height: 96,
-      m: [1, 1, 2, 2],
+      m: [1, null, 2],
       p: 3,
       flexDirection: 'row',
       alignItems: 'center'

diff --git a/src/pages/payment/index.js b/src/pages/payment/index.js
@@ -2,7 +2,7 @@ import { Caption, Layout } from 'components/patterns'
 import React, { useState, useEffect } from 'react'
 import { useQueryState } from 'components/hook'
 import { encode } from 'helpers'
-import { layout } from 'theme'
+import { layout, theme } from 'theme'
 
 import {
   Confetti,
@@ -45,7 +45,7 @@ const getCaption = paymentState => {
         <>
           Payment not processed.{' '}
           <Link
-            pt={2}
+            css={theme({ pt: 2 })}
             href={`mailto:[email protected]?${encode(ERROR_MAIL_OPTS)}`}
           >
             Contact us
@@ -65,16 +65,21 @@ const PaymentPage = () => {
 
   return (
     <Layout>
-      <Container alignItems='center' pt={2}>
+      <Container css={theme({ alignItems: 'center', pt: 2 })}>
         {paymentState === PAYMENT_STATE.success && <Confetti />}
-        <Heading px={5} titleize={false} maxWidth={layout.large}>
+        <Heading
+          css={theme({ px: 5, maxWidth: layout.large })}
+          titleize={false}
+        >
           {getTitle(paymentState)}
         </Heading>
         <Caption
-          pt={[3, 3, 4, 4]}
-          px={[4, 4, 0, 0]}
+          css={theme({
+            pt: [3, null, 4],
+            px: [4, null, 0],
+            maxWidth: layout.small
+          })}
           titleize={false}
-          maxWidth={[layout.small, layout.small, layout.small, layout.small]}
         >
           {getCaption(paymentState)}
         </Caption>

diff --git a/src/pages/payment/update.js b/src/pages/payment/update.js
@@ -1,7 +1,15 @@
 /* global fetch */
 
 import { useFingerprint, useSiteMetadata, useQueryState } from 'components/hook'
-import { colors, fonts, fontWeights, layout, radii, transition } from 'theme'
+import {
+  colors,
+  fonts,
+  fontWeights,
+  layout,
+  radii,
+  transition,
+  theme
+} from 'theme'
 import { Caption, Layout } from 'components/patterns'
 import { loadStripe } from '@stripe/stripe-js/pure'
 import React, { useEffect, useState } from 'react'
@@ -69,7 +77,10 @@ const getCaption = paymentState => {
       return (
         <>
           Payment not updated.{' '}
-          <Link href={`mailto:[email protected]?${encode(ERROR_MAIL_OPTS)}`}>
+          <Link
+            css={theme({ pt: 2 })}
+            href={`mailto:[email protected]?${encode(ERROR_MAIL_OPTS)}`}
+          >
             Contact us
           </Link>
           .
@@ -133,11 +144,10 @@ const CheckoutForm = ({
       />
       <Button
         loading={!stripe || paymentState === PAYMENT_STATE.processing}
-        mt={3}
+        css={theme({ mt: 3, width: '100%' })}
         type='submit'
-        width='100%'
       >
-        <Caps fontSize={1}>Update Card</Caps>
+        <Caps css={theme({ fontSize: 1 })}>Update Card</Caps>
       </Button>
     </form>
   )
@@ -187,21 +197,28 @@ const PaymentUpdatePage = () => {
 
   return (
     <Layout>
-      <Container pt={2} justifyContent='center' alignItems='center'>
+      <Container
+        css={theme({ alignItems: 'center', justifyContent: 'center', pt: 2 })}
+      >
         {paymentState === PAYMENT_STATE.success && <Confetti />}
-        <Heading px={5} titleize={false} maxWidth={layout.large}>
+        <Heading
+          css={theme({ px: 5, maxWidth: layout.large })}
+          titleize={false}
+        >
           {getTitle(isLoading ? PAYMENT_STATE.redirected : paymentState)}
         </Heading>
         <Caption
-          pt={[3, 3, 4, 4]}
-          px={[4, 4, 0, 0]}
+          css={theme({
+            pt: [3, null, 4],
+            px: [4, null, 0],
+            maxWidth: layout.small
+          })}
           titleize={false}
-          maxWidth={layout.small}
         >
           {getCaption(isLoading ? PAYMENT_STATE.redirected : paymentState)}
         </Caption>
         {!isLoading && !query.status && (
-          <Box pt={[3, 3, 4, 4]} width={7}>
+          <Box css={theme({ pt: [3, null, 4], width: 7 })}>
             <Elements
               stripe={stripePromise}
               options={{

diff --git a/src/pages/recipes.js b/src/pages/recipes.js
@@ -41,7 +41,7 @@ export const Head = () => (
 
 const RecipesPage = () => {
   const [counters, setCounters] = useState()
-  const isLoaded = counters !== null
+  const isLoaded = counters !== undefined
 
   useEffect(() => {
     window

diff --git a/src/pages/status.js b/src/pages/status.js
@@ -2,33 +2,25 @@ import { ClusterMonitor, Layout } from 'components/patterns'
 import { useTheme, useQueryState } from 'components/hook'
 import { cdnUrl } from 'helpers'
 import React from 'react'
+import { theme as themeProp } from 'theme'
 
-import {
-  Box,
-  Choose,
-  Container,
-  DotSpinner,
-  Flex,
-  Meta,
-  Text
-} from 'components/elements'
+import { Box, Choose, DotSpinner, Flex, Meta, Text } from 'components/elements'
 
 const THEMES = {
   light: { color: 'black', bg: 'white' },
   dark: { color: 'white', bg: 'black' }
 }
 
-const Monospace = ({ style, ...props }) => (
+const Monospace = props => (
   <Text
-    fontFamily='monospace'
-    textAlign='center'
-    maxWidth={['95vw', '95vw', '100%', '100%']}
-    style={{
+    css={themeProp({
+      fontFamily: 'monospace',
+      textAlign: 'center',
+      maxWidth: ['95vw', '95vw', '100%', '100%'],
       whiteSpace: 'pre',
       overflowY: 'scroll',
-      margin: 'auto',
-      ...style
-    }}
+      m: 'auto'
+    })}
     {...props}
   />
 )
@@ -56,36 +48,40 @@ const StatusPage = () => {
             theme={theme}
             style={{ background: bg }}
             component={Flex}
-            justifyContent='center'
-            alignItems='center'
-            maxWidth='100%'
+            css={{ justifyContent: 'center', alignItems: 'center' }}
           >
-            <Box id='status' px={Container.defaultProps.px}>
+            <Box id='status' css={themeProp({ px: [3, null, 0] })}>
               <Choose>
                 <Choose.When condition={isLoading}>
                   <Flex
-                    justifyContent='center'
-                    alignItems='center'
-                    flexDirection={['column', 'column', 'row', 'row']}
+                    css={themeProp({
+                      justifyContent: 'center',
+                      alignItems: 'center',
+                      flexDirection: ['column', null, 'row']
+                    })}
                   >
                     <Text
-                      fontWeight='regular'
-                      fontFamily='mono'
-                      lineHeight={0}
-                      fontSize={[4, 4, 4, 7]}
-                      pt={[2, 2, 3, 3]}
-                      color={color}
+                      css={themeProp({
+                        fontWeight: 'regular',
+                        fontFamily: 'mono',
+                        lineHeight: 0,
+                        fontSize: [4, null, null, 7],
+                        pt: [2, null, 3],
+                        color
+                      })}
                     >
                       Loading <DotSpinner />
                     </Text>
                   </Flex>
                 </Choose.When>
                 <Choose.Otherwise>
-                  <Monospace color={color}>
+                  <Monospace css={themeProp({ color })}>
                     $ watch curl -sL {endpoint}
                   </Monospace>
-                  <Monospace color={color}>{`\n${resume}`}</Monospace>
-                  <Monospace color={color} fontSize={[0, 0, 1, 1]}>
+                  <Monospace
+                    css={themeProp({ color })}
+                  >{`\n${resume}`}</Monospace>
+                  <Monospace css={themeProp({ color, fontSize: [0, null, 1] })}>
                     {`\n${info}`}
                   </Monospace>
                 </Choose.Otherwise>