Add flex primitive, replace all instances of grid

package.json

@@ -48,13 +48,15 @@
  "react-markdown": "^4.3.1",
  "react-visibility-sensor": "^5.1.1",
  "rebass": "^4.0.7",
+ "reflexbox": "^4.0.6",
  "rehype-parse": "^6.0.2",
  "rehype-remark": "^8.0.0",
  "remark-stringify": "^8.0.0",
  "serve-favicon": "^2.5.0",
  "string-replace-to-array": "^1.0.3",
  "styled-components": "^4.4.1",
  "terser": "^4.7.0",
+ "theme-ui": "^0.3.1",
  "throttle-debounce": "^2.1.0",
  "timeago.js": "^4.0.2",
  "twilio": "^3.43.1",

src/components/AMAQuestions/AskQuestion.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
 import { useAddAmaQuestionMutation } from '~/graphql/types.generated'
 import { Small } from '~/components/Typography'
-import Grid from '../Grid'
 import Textarea from '../Textarea'
 import { PrimaryButton } from '../Button'
+import Flex from '~/components/Flex'
 
 export default function AddBookmark() {
  const [question, setQuestion] = React.useState('')
@@ -40,7 +40,7 @@ export default function AddBookmark() {
  }
 
  return (
- <Grid gap={12} as={'form'} onSubmit={onSubmit}>
+ <Flex flexDirection="column" gap={12} as={'form'} onSubmit={onSubmit}>
  <Textarea
  value={question}
  placeholder="Ask me anything..."
@@ -56,6 +56,6 @@ export default function AddBookmark() {
  Thanks for asking! I’ll reply soon, so feel free to check back 👋
  </Small>
  )}
- </Grid>
+ </Flex>
  )
 }

src/components/AMAQuestions/EditQuestion.tsx

@@ -8,7 +8,7 @@ import {
 import { Small } from '~/components/Typography'
 import { GET_AMA_QUESTIONS } from '~/graphql/queries'
 import Textarea from '~/components/Textarea'
-import Grid from '~/components/Grid'
+import Flex from '~/components/Flex'
 
 interface Props {
  question: Ama
@@ -162,7 +162,7 @@ export default function EditQuestion(props: Props) {
  }
 
  return (
- <Grid gap={12} as={'form'} onSubmit={handleSave}>
+ <Flex flexDirection="column" gap={12} as={'form'} onSubmit={handleSave}>
  <Textarea
  placeholder="Question"
  value={state.question}
@@ -183,13 +183,15 @@ export default function EditQuestion(props: Props) {
  <Small style={{ color: 'var(--accent-red)' }}>{state.error}</Small>
  )}
 
- <Grid gap={12} columns={'min-content 1fr min-content'}>
- <Small style={{ cursor: 'pointer' }} onClick={handleSave}>
- Save
- </Small>
- <Small style={{ cursor: 'pointer' }} onClick={onDone}>
- Cancel
- </Small>
+ <Flex justifyContent="space-between">
+ <Flex gap={12}>
+ <Small style={{ cursor: 'pointer' }} onClick={handleSave}>
+ Save
+ </Small>
+ <Small style={{ cursor: 'pointer' }} onClick={onDone}>
+ Cancel
+ </Small>
+ </Flex>
  <Small
  onClick={handleDelete}
  style={{
@@ -199,7 +201,7 @@ export default function EditQuestion(props: Props) {
  >
  Delete
  </Small>
- </Grid>
- </Grid>
+ </Flex>
+ </Flex>
  )
 }

src/components/AMAQuestions/PendingQuestions.tsx

@@ -3,6 +3,7 @@ import Divider from '../Divider'
 import { QuestionItem } from './QuestionItem'
 import { useGetAmaQuestionsQuery, AmaStatus } from '~/graphql/types.generated'
 import LoadingSpinner from '../LoadingSpinner'
+import Flex from '~/components/Flex'
 
 export default function PendingQuestion() {
  const { data, loading } = useGetAmaQuestionsQuery({
@@ -18,12 +19,12 @@ export default function PendingQuestion() {
  if (!data || !data.amaQuestions) return null
 
  return (
- <React.Fragment>
+ <Flex flexDirection="column" gap={32}>
  {data.amaQuestions.map((question) => (
  <QuestionItem editable={true} key={question.id} question={question} />
  ))}
 
  <Divider />
- </React.Fragment>
+ </Flex>
  )
 }

src/components/AMAQuestions/QuestionItem.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react'
 import { Ama } from '~/graphql/types.generated'
 import { Small, P } from '~/components/Typography'
-import Grid from '~/components/Grid'
 import { format } from 'timeago.js'
 import QuestionReaction from './QuestionReaction'
 import EditQuestion from './EditQuestion'
 import MarkdownRenderer from '../MarkdownRenderer'
+import Flex from '~/components/Flex'
 
 interface Props {
  editable: boolean
@@ -30,17 +30,15 @@ export const QuestionItem = React.memo((props: Props) => {
  }
 
  return (
- <Grid gap={8}>
+ <Flex flexDirection="column" gap={question.answer ? 8 : 4}>
  <P style={{ fontWeight: '700' }}>{question.question}</P>
  {question.answer && (
- <Grid style={{ alignItems: 'start' }}>
- <Grid className={'markdown'}>
- <MarkdownRenderer>{question.answer}</MarkdownRenderer>
- </Grid>
- </Grid>
+ <Flex className={'markdown'}>
+ <MarkdownRenderer>{question.answer}</MarkdownRenderer>
+ </Flex>
  )}
 
- <Grid columns={'repeat(5, max-content)'} gap={12}>
+ <Flex gap={12} alignItems="center">
  <QuestionReaction question={question} />
 
  <Small style={{ color: 'var(--text-placeholder)' }}>/</Small>
@@ -56,17 +54,17 @@ export const QuestionItem = React.memo((props: Props) => {
  </Small>
 
  {editable && (
- <React.Fragment>
+ <Flex gap={8}>
  <Small style={{ color: 'var(--text-placeholder)' }}>/</Small>
  <Small
  style={{ cursor: 'pointer' }}
  onClick={() => setIsEditing(true)}
  >
  Edit
  </Small>
- </React.Fragment>
+ </Flex>
  )}
- </Grid>
- </Grid>
+ </Flex>
+ </Flex>
  )
 })

src/components/AMAQuestions/QuestionReaction.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Ama, useAddAmaReactionMutation } from '~/graphql/types.generated'
 import { Small } from '~/components/Typography'
-import Grid from '~/components/Grid'
+import Flex from '~/components/Flex'
 
 interface Props {
  question: Ama
@@ -29,11 +29,10 @@ export default function QuestionReaction(props: Props) {
  }
 
  return (
- <Grid
+ <Flex
  onClick={handleReaction}
  style={{ alignItems: 'center', cursor: 'pointer' }}
- gap={2}
- columns={'16px auto'}
+ gap={8}
  >
  <svg
  xmlns="http://www.w3.org/2000/svg"
@@ -54,6 +53,6 @@ export default function QuestionReaction(props: Props) {
  ></path>
  </svg>
  <Small>{question.reactions.toLocaleString()}</Small>
- </Grid>
+ </Flex>
  )
 }

src/components/AMAQuestions/index.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
 import { useGetAmaQuestionsQuery, AmaStatus } from '~/graphql/types.generated'
 import { useAuth } from '~/hooks/useAuth'
-import Grid from '~/components/Grid'
 import { Small } from '~/components/Typography'
 import Divider from '~/components/Divider'
 import { Button } from '~/components/Button'
@@ -11,7 +10,7 @@ import { QuestionItem } from './QuestionItem'
 import AskQuestion from './AskQuestion'
 import PendingQuestions from './PendingQuestions'
 import FullscreenLoading from '../FullscreenLoading'
-import GlobalMarkdownStyles from '../GlobalStyles/markdown'
+import Flex from '~/components/Flex'
 
 export default function QuestionsList() {
  const { isMe } = useAuth()
@@ -66,9 +65,7 @@ export default function QuestionsList() {
  }
 
  return (
- <Grid gap={32}>
- <GlobalMarkdownStyles />
-
+ <Flex flexDirection="column" gap={32}>
  <AskQuestion />
 
  <Divider />
@@ -86,6 +83,6 @@ export default function QuestionsList() {
  {loading ? <LoadingSpinner size={16} /> : 'Show me more'}
  </Button>
  )}
- </Grid>
+ </Flex>
  )
 }

src/components/Bookmarks/AddBookmark.tsx

@@ -3,8 +3,8 @@ import { useAddBookmarkMutation } from '~/graphql/types.generated'
 import { GET_BOOKMARKS } from '~/graphql/queries'
 import { Small } from '~/components/Typography'
 import Input from '~/components/Input'
-import Grid from '../Grid'
 import Textarea from '../Textarea'
+import Flex from '~/components/Flex'
 
 export default function AddBookmark() {
  const [url, setUrl] = React.useState('')
@@ -66,7 +66,7 @@ export default function AddBookmark() {
  }
 
  return (
- <Grid gap={12} as={'form'} onSubmit={onSubmit}>
+ <Flex flexDirection="column" gap={12} as={'form'} onSubmit={onSubmit}>
  <Input
  autoFocus
  type="text"
@@ -89,6 +89,6 @@ export default function AddBookmark() {
  </React.Fragment>
  )}
  {error && <Small style={{ color: 'var(--accent-red)' }}>{error}</Small>}
- </Grid>
+ </Flex>
  )
 }

src/components/Bookmarks/BookmarkListItem.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
 import { Bookmark } from '~/graphql/types.generated'
 import { Small, A } from '~/components/Typography'
-import Grid from '~/components/Grid'
 import Linkify from '~/components/Linkify'
 import EditingBookmarkListItem from './EditingBookmarkListItem'
 import BookmarkReaction from './BookmarkReaction'
+import Flex from '~/components/Flex'
 
 interface Props {
  editable: boolean
@@ -25,7 +25,7 @@ export const BookmarkListItem = React.memo((props: Props) => {
  }
 
  return (
- <Grid gap={bookmark.notes ? 8 : 4}>
+ <Flex flexDirection="column" gap={bookmark.notes ? 8 : 4}>
  <A
  href={`${bookmark.url}?ref=brianlovin.com`}
  target="_blank"
@@ -34,19 +34,17 @@ export const BookmarkListItem = React.memo((props: Props) => {
  {bookmark.title || bookmark.url}
  </A>
  {bookmark.notes && (
- <Grid style={{ alignItems: 'start' }} columns={'1fr'}>
- <Small
- style={{
- borderLeft: '2px solid var(--border-primary)',
- paddingLeft: '12px',
- whiteSpace: 'pre-wrap',
- }}
- >
- <Linkify>{bookmark.notes}</Linkify>
- </Small>
- </Grid>
+ <Small
+ style={{
+ borderLeft: '2px solid var(--border-primary)',
+ paddingLeft: '12px',
+ whiteSpace: 'pre-wrap',
+ }}
+ >
+ <Linkify>{bookmark.notes}</Linkify>
+ </Small>
  )}
- <Grid columns={`repeat(5, min-content)`} gap={12}>
+ <Flex gap={12} alignItems="center">
  <BookmarkReaction bookmark={bookmark} />
 
  <Small style={{ color: 'var(--text-placeholder)' }}>/</Small>
@@ -60,7 +58,7 @@ export const BookmarkListItem = React.memo((props: Props) => {
  </A>
 
  {editable && (
- <React.Fragment>
+ <Flex gap={8} alignItems="center">
  <Small style={{ color: 'var(--text-placeholder)' }}>/</Small>
 
  <Small
@@ -69,9 +67,9 @@ export const BookmarkListItem = React.memo((props: Props) => {
  >
  Edit
  </Small>
- </React.Fragment>
+ </Flex>
  )}
- </Grid>
- </Grid>
+ </Flex>
+ </Flex>
  )
 })

src/components/Bookmarks/BookmarkReaction.tsx

@@ -4,7 +4,7 @@ import {
  useAddBookmarkReactionMutation,
 } from '~/graphql/types.generated'
 import { Small } from '~/components/Typography'
-import Grid from '~/components/Grid'
+import Flex from '~/components/Flex'
 
 interface Props {
  bookmark: Bookmark
@@ -32,11 +32,11 @@ export default function BookmarkReaction(props: Props) {
  }
 
  return (
- <Grid
+ <Flex
  onClick={handleReaction}
  style={{ alignItems: 'center', cursor: 'pointer' }}
- gap={2}
- columns={'16px auto'}
+ gap={8}
+ alignItems="center"
  >
  <svg
  xmlns="http://www.w3.org/2000/svg"
@@ -57,6 +57,6 @@ export default function BookmarkReaction(props: Props) {
  ></path>
  </svg>
  <Small>{bookmark.reactions.toLocaleString()}</Small>
- </Grid>
+ </Flex>
  )
 }