From d5939b3feccc34e0f648ce2181d8fb2dd74994e3 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 21 Jun 2022 17:04:59 -0700
Subject: [PATCH] Use same checkmark as labels for font selection. Clean up
 layout of title

---
 .../templates/article/FontFamiliesOptions.tsx | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/packages/web/components/templates/article/FontFamiliesOptions.tsx b/packages/web/components/templates/article/FontFamiliesOptions.tsx
index a12c6a1e7..c6e0297b2 100644
--- a/packages/web/components/templates/article/FontFamiliesOptions.tsx
+++ b/packages/web/components/templates/article/FontFamiliesOptions.tsx
@@ -1,7 +1,7 @@
 import { HStack, Box } from '../../elements/LayoutPrimitives'
 import { StyledText } from '../../elements/StyledText'
 import { theme } from '../../tokens/stitches.config'
-import { CaretLeft, CheckCircle } from 'phosphor-react'
+import { CaretLeft, Check, CheckCircle } from 'phosphor-react'
 
 const FONT_FAMILIES = [
   'Inter',
@@ -38,7 +38,7 @@ function FontOption(props: FontOptionProps):JSX.Element {
         {props.family}
       </StyledText>
       {isSelected && (
-        <CheckCircle color={theme.colors.grayTextContrast.toString()} />
+        <Check color={theme.colors.grayTextContrast.toString()} weight='bold' />
       )}
     </HStack>
   )
@@ -48,24 +48,19 @@ export function FontFamiliesOptions(props: FontFamiliesListProps): JSX.Element {
   return (
     <>
       <Box css={{borderBottom: `1px solid ${theme.colors.grayLine.toString()}`, width: '100%'}}>
-        <HStack alignment='center' distribution='between' css={{width: '70%', py: 10, px: 15}}>
+        <HStack alignment='center' distribution='between' css={{width: '100%', py: 10, px: 15}}>
           <HStack
             alignment='center'
             distribution='start'
-            css={{cursor: 'pointer'}}
+            css={{ cursor: 'pointer', py: '4px', width: '100%' }}
             onClick={() => props.setShowFontFamilies(false)}
           >
-            <Box css={{position: 'relative', top: 2, right: 5}}>
-              <CaretLeft color={theme.colors.textSubtle.toString()} size={15} />
-            </Box>
-            <StyledText css={{m: 0, pt: 4, fontSize: 12, color: theme.colors.textSubtle.toString()}}>
-              Back
-            </StyledText>
+            <CaretLeft color={theme.colors.textSubtle.toString()} size={15} />
+            <StyledText css={{ textAlign: 'center', m: 0, fontSize: 14, fontWeight: 'bold', width: '100%', wordWrap: 'revert' }}>Choose Font</StyledText>
           </HStack>
-          {/* <StyledText css={{m: 0, fontSize: 16, fontWeight: '600'}}>Select Font</StyledText> */}
         </HStack>
       </Box>
-      <Box css={{px: 15, width: '100%', pb: 15}}>
+      <Box css={{ pl: 15, pb: 15}}>
         {FONT_FAMILIES.map((family) => (
           <FontOption selected={props.selected} family={family} onSelect={props.onSelect} key={`font-${family}`} />
         ))}