Skip to content

Commit

Permalink
migrate styled-system (developers pages) (#1714)
Browse files Browse the repository at this point in the history
* 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

* fix: syntax

---------

Co-authored-by: Kiko Beats <[email protected]>
  • Loading branch information
breadadams and Kikobeats authored May 15, 2024
1 parent 939b1e1 commit abcf0d7
Show file tree
Hide file tree
Showing 11 changed files with 218 additions and 169 deletions.
7 changes: 1 addition & 6 deletions src/components/elements/MultiCodeEditor/MultiCodeEditor.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,7 @@ const ActionComponent = ({
<Box css={{ width: '100%' }}>
<SelectLanguage
isDark={isDark}
css={theme({
py: '2px',
mx: 'auto',
width: '4.8rem',
mb: 2
})}
css={theme({ py: '2px' })}
value={language}
onClick={setLanguage}
>
Expand Down
4 changes: 2 additions & 2 deletions src/components/elements/Toggle/Toggle.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const ButtonToggle = styled(Button)`
px: 0,
borderRadius: 0,
_hover: {
cursor: props => (props.active ? 'auto' : 'pointer'),
cursor: props => (props.$active ? 'auto' : 'pointer'),
boxShadow: 'none'
}
})}
Expand Down Expand Up @@ -46,7 +46,7 @@ function Toggle ({ onChange, children, defaultValue, ...props }) {
px: 3
})}
>
<ButtonToggle active={isActive} onClick={setAsActive(value)}>
<ButtonToggle $active={isActive} onClick={setAsActive(value)}>
<Caps
css={theme({
fontWeight: !isActive ? 'normal' : 'bold',
Expand Down
4 changes: 3 additions & 1 deletion src/components/markdown/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,9 @@ export const H1 = withTitle(
fontSize: `calc(${fontSizes[5]} * 0.75)`,
lineHeight: [1, 2],
textAlign: 'left',
mx: 'auto',
mt: 5,
mb: 4,
mx: 'auto'
})}
`)
)
Expand Down
2 changes: 1 addition & 1 deletion src/components/patterns/DemoLinks/DemoLinks.js
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const DemoLinks = ({ children, chunkSize, onClick }) => {
return (
<BackgroundSliderContainer
as='section'
css={theme({ p: 0, maxWidth: '100%' })}
css={theme({ py: 0, px: 0, maxWidth: '100%' })}
>
{chunk(links, chunkSize).map((chunkBrands, chunkIndex) => {
const isEven = chunkIndex % 2 === 0
Expand Down
26 changes: 17 additions & 9 deletions src/pages/changelog.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Caption, Layout } from 'components/patterns'
import Markdown, { H1 } from 'components/markdown'
import { useChangelog } from 'components/hook'
import { cdnUrl } from 'helpers'
import { layout } from 'theme'
import { layout, theme } from 'theme'
import React from 'react'

export const Head = () => (
Expand All @@ -18,20 +18,28 @@ const ChangelogPage = () => {

return (
<Layout>
<Container pt={[2, 2, 3, 3]} justifyContent='center' alignItems='center'>
<Heading maxWidth={layout.large}>Changelog</Heading>
<Container
css={theme({
pt: [2, null, 3],
justifyContent: 'center',
alignItems: 'center'
})}
>
<Heading css={{ maxWidth: layout.large }}>Changelog</Heading>
<Caption
as='h2'
pt={[3, 3, 4, 4]}
mb={['-16px', '-16px', '-32px', '-32px']}
px={[4, 4, 0, 0]}
forwardedAs='h2'
css={theme({
pt: [3, null, 4],
mb: ['-16px', null, '-32px'],
px: [4, null, 0],
maxWidth: layout.small
})}
titleize={false}
maxWidth={layout.small}
>
We’re constantly improving the platform. See here notable changes in
our lineup of products & improvements over the time.
</Caption>
<Box pt={[3, 3, 4, 4]}>
<Box css={theme({ pt: [3, null, 4] })}>
{changelog.map(({ date, notes }) => {
return (
<Box key={date}>
Expand Down
28 changes: 21 additions & 7 deletions src/pages/community.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Meta, Heading, Container, Flex } from 'components/elements'
import { Caption, Layout, Chat } from 'components/patterns'
import { cdnUrl } from 'helpers'
import { layout } from 'theme'
import { layout, theme } from 'theme'
import React from 'react'

export const Head = () => (
Expand All @@ -13,21 +13,35 @@ export const Head = () => (

const CommunityPage = () => (
<Layout>
<Container pt={[2, 2, 3, 3]} justifyContent='center' alignItems='center'>
<Container
css={theme({
pt: [2, null, 3],
justifyContent: 'center',
alignItems: 'center'
})}
>
<Heading>Community</Heading>

<Caption
as='h2'
pt={[3, 3, 4, 4]}
px={4}
forwardedAs='h2'
css={theme({
pt: [3, null, 4],
px: 4,
maxWidth: layout.small
})}
titleize={false}
maxWidth={[layout.small, layout.small, layout.small, layout.small]}
>
Direct support via chat with guaranteed response from exclusive top-tier
engineers.
</Caption>

<Flex alignItems='center' justifyContent='center' pt={[0, 0, 4, 4]}>
<Flex
css={theme({
alignItems: 'center',
justifyContent: 'center',
pt: [0, null, 4]
})}
>
<Chat />
</Flex>
</Container>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/oss.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const OssPage = () => {
const repositories = useOss()
return (
<DotsBackground>
<Layout footer={{ bg: 'transparent' }}>
<Layout footer={{ style: { background: 'transparent' } }}>
<Flex
css={theme({
pt: 2,
Expand Down
136 changes: 73 additions & 63 deletions src/pages/recipes.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { DotsBackground, Layout, Caption } from 'components/patterns'
import { colors, space, layout, toPx, toRaw, fontSizes } from 'theme'
import { colors, space, layout, toPx, toRaw, fontSizes, theme } from 'theme'
import { cdnUrl, issueUrl, formatNumber } from 'helpers'
import React, { useState, useEffect } from 'react'
import kebabCase from 'lodash/kebabCase'
import styled from 'styled-components'
import { Eye } from 'react-feather'
import { getDomain } from 'tldts'

Expand All @@ -14,7 +13,6 @@ import {
Button,
Caps,
Card,
Container,
Flex,
Heading,
Link,
Expand All @@ -34,13 +32,6 @@ const width = [...Array(4).keys()].map(() => CARD_WIDTH)

const maxWidth = width.map(w => toPx(toRaw(space[3]) * 4 + w * CARDS_PER_ROW))

const CustomLink = styled(Link)`
color: inherit;
:hover:not([disabled]) {
color: inherit;
}
`

export const Head = () => (
<Meta
description='Just start with code. Instant integration, automating any site in a few lines.'
Expand All @@ -49,7 +40,7 @@ export const Head = () => (
)

const RecipesPage = () => {
const [counters, setCounters] = useState(null)
const [counters, setCounters] = useState()
const isLoaded = counters !== null

useEffect(() => {
Expand All @@ -61,46 +52,48 @@ const RecipesPage = () => {
}, [])

return (
<DotsBackground alignItems='center' justifyContent='center'>
<Layout footer={{ bg: 'transparent' }}>
<DotsBackground>
<Layout footer={{ style: { background: 'transparent' } }}>
<Flex
width='100%'
flexDirection='column'
justifyContent='center'
alignItems='center'
pt={2}
px={3}
css={theme({
width: '100%',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
pt: 2,
px: 3
})}
>
<Flex
flexDirection='column'
alignItems='center'
justifyContent='center'
css={{
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
}}
>
<Heading titleize={false} maxWidth={layout.large}>
<Heading titleize={false} css={{ maxWidth: layout.large }}>
Recipes
</Heading>
<Caption
as='h2'
pt={[3, 3, 4, 4]}
pb={[3, 3, 4, 4]}
px={[4, 4, 0, 0]}
forwardedAs='h2'
css={theme({
py: [3, null, 4],
px: [4, null, 0],
maxWidth: layout.small
})}
titleize={false}
maxWidth={[
layout.small,
layout.small,
layout.small,
layout.small
]}
>
Just start with code — Instant integration, automating any site in
a few lines.
</Caption>
</Flex>
<Flex
pt={[3, 3, 4, 4]}
maxWidth={maxWidth}
justifyContent='center'
flexWrap='wrap'
css={theme({
pt: [3, null, 4],
maxWidth,
justifyContent: 'center',
flexWrap: 'wrap'
})}
>
{recipes.map(([recipeName, meta], index) => {
const count = isLoaded && counters[index]
Expand All @@ -114,64 +107,81 @@ const RecipesPage = () => {
return (
<Card
key={recipeName}
flexDirection='column'
p={3}
width={width}
height='inherit'
mb={3}
mr={[0, 3, 3, 3]}
css={theme({
flexDirection: 'column',
p: 3,
width,
height: 'inherit',
mb: 3,
mr: [0, 3],
color: 'black',
_hover: {
color: 'black'
}
})}
>
<CustomLink href={`/recipes/${kebabCase(recipeName)}`}>
<Flex alignItems='center'>
<Box pr={2}>
<Link
css={theme({
color: 'inherit',
_hover: { color: 'inherit' }
})}
href={`/recipes/${kebabCase(recipeName)}`}
>
<Flex css={{ alignItems: 'center' }}>
<Box css={theme({ pr: 2 })}>
<Logo
isProvider={isProvider}
domain={domain}
{...meta}
/>
</Box>
<Text fontSize={1} fontWeight='bold'>
<Text css={theme({ fontSize: 1, fontWeight: 'bold' })}>
{meta.name}
</Text>
</Flex>
<Flex>
<Text
mt={3}
fontSize={0}
css={`
min-height: 56px;
`}
css={theme({
mt: 3,
fontSize: 0,
minHeight: '56px'
})}
>
{description}
</Text>
</Flex>
<Flex
alignItems='center'
css={{ alignItems: 'center' }}
style={{ visibility: isLoaded ? 'inherit' : 'hidden' }}
>
<Eye size={fontSizes[0]} color={colors.black50} />
<Text pl={1} color={colors.black50} fontSize={0}>
<Text
css={theme({ pl: 1, color: 'black50', fontSize: 0 })}
>
{formatNumber(count)}
</Text>
</Flex>
</CustomLink>
</Link>
</Card>
)
})}
</Flex>
<Flex
pt={Container.defaultProps.pt}
justifyContent='space-between'
alignItems='center'
flexDirection={['column', 'column', 'row', 'row']}
width='100%'
maxWidth={layout.large}
css={theme({
pt: [5, null, 6],
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: ['column', null, 'row'],
width: '100%',
maxWidth: layout.large
})}
>
<Subhead>Miss something?</Subhead>
<Box pt={[4, 4, 0, 0]}>
<Box css={theme({ pt: [4, null, 0] })}>
<Button
onClick={() =>
window.open(issueUrl.bug(), '_blank', 'noopener noreferrer')}
window.open(issueUrl.bug(), '_blank', 'noopener noreferrer')
}
>
<Caps>Request an Integration</Caps>
</Button>
Expand Down
Loading

0 comments on commit abcf0d7

Please sign in to comment.