From 927ec54775427e4e9e1a32e841effcabff85f0d1 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 13 Jun 2022 22:46:49 -0700
Subject: [PATCH 1/5] Use a <select for picking API expiration, fix some text
 color issues in dark mode

---
 .../web/components/elements/FormElements.tsx  |  8 ++++++
 packages/web/components/elements/Table.tsx    |  2 +-
 .../web/components/patterns/FormModal.tsx     |  4 +--
 packages/web/pages/settings/api.tsx           | 27 ++++++++++++++++---
 packages/web/pages/settings/emails.tsx        |  4 +--
 5 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/packages/web/components/elements/FormElements.tsx b/packages/web/components/elements/FormElements.tsx
index 03f501e7d..f5a391d4a 100644
--- a/packages/web/components/elements/FormElements.tsx
+++ b/packages/web/components/elements/FormElements.tsx
@@ -66,6 +66,14 @@ export function GeneralFormInput(props: FormInputProps): JSX.Element {
         ))}
       </VStack>
     )
+  } else if (props.type === 'select') {
+    return (
+      <select onChange={input.onChange}>
+        {input.options?.map((label, index) => (
+          <option key={index} value={label}>{label}</option>
+        ))}
+      </select>
+    )
   } else {
     return (
       <FormInput
diff --git a/packages/web/components/elements/Table.tsx b/packages/web/components/elements/Table.tsx
index c4e79ef36..9dc16e45c 100644
--- a/packages/web/components/elements/Table.tsx
+++ b/packages/web/components/elements/Table.tsx
@@ -150,7 +150,7 @@ export function Table(props: TableProps): JSX.Element {
           >
             <StyledText
               key={index}
-              style="highlightTitle"
+              style="menuTitle"
               css={{
                 color: '$grayTextContrast',
                 '@md': {
diff --git a/packages/web/components/patterns/FormModal.tsx b/packages/web/components/patterns/FormModal.tsx
index c6a3592c2..236f70e44 100644
--- a/packages/web/components/patterns/FormModal.tsx
+++ b/packages/web/components/patterns/FormModal.tsx
@@ -72,11 +72,11 @@ export function FormModal(props: FormModalProps): JSX.Element {
                       paddingTop: '5px',
                     }}
                   >
-                    <StyledText style={'highlightTitle'}>
+                    <StyledText style={'menuTitle'}>
                       {input.label}
                     </StyledText>
                   </Box>
-                  <Box css={{ width: '100%' }}>
+                  <Box css={{ width: '100%', marginRight: '20px' }}>
                     <GeneralFormInput {...input} />
                   </Box>
                 </HStack>
diff --git a/packages/web/pages/settings/api.tsx b/packages/web/pages/settings/api.tsx
index 38430bf83..5e6fb8396 100644
--- a/packages/web/pages/settings/api.tsx
+++ b/packages/web/pages/settings/api.tsx
@@ -128,12 +128,31 @@ export default function Api(): JSX.Element {
               required: true,
             },
             {
-              label: 'Expired on',
+              label: 'Expires in',
               name: 'expiredAt',
               required: true,
-              onChange: setExpiresAt,
-              type: 'date',
-              min: new Date().toISOString().split('T')[0], // today
+              onChange: (e) => {
+                var additionalDays = 0
+                switch(e.target.value) {
+                  case '7 days':
+                    additionalDays = 7
+                    break
+                  case '30 days':
+                    additionalDays = 30
+                    break
+                  case '90 days':
+                    additionalDays = 90
+                    break
+                  case '1 year':
+                    additionalDays = 365
+                    break
+                }
+                var newExpires = new Date()
+                newExpires.setDate(newExpires.getDate() + additionalDays)
+                setExpiresAt(newExpires)
+              },
+              type: 'select',
+              options: ['7 days', '30 days', '90 days', '1 year'],
               value: defaultExpiresAt,
             },
           ])
diff --git a/packages/web/pages/settings/emails.tsx b/packages/web/pages/settings/emails.tsx
index 229552e92..2232606e5 100644
--- a/packages/web/pages/settings/emails.tsx
+++ b/packages/web/pages/settings/emails.tsx
@@ -261,7 +261,7 @@ export default function EmailsPage(): JSX.Element {
               }}
             >
               <StyledText
-                style="highlightTitle"
+                style="menuTitle"
                 css={{
                   color: '$grayTextContrast',
                 }}
@@ -271,7 +271,7 @@ export default function EmailsPage(): JSX.Element {
             </Box>
             <Box style={{ flex: '51%' }}>
               <StyledText
-                style="highlightTitle"
+                style="menuTitle"
                 css={{
                   color: '$grayTextContrast',
                 }}

From 88aa4fb27b0a55c43874ea1b1c2d0b9d4e3bb18c Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 13 Jun 2022 23:00:00 -0700
Subject: [PATCH 2/5] Linting fixes

---
 packages/web/pages/settings/api.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web/pages/settings/api.tsx b/packages/web/pages/settings/api.tsx
index 5e6fb8396..340f6c26b 100644
--- a/packages/web/pages/settings/api.tsx
+++ b/packages/web/pages/settings/api.tsx
@@ -132,7 +132,7 @@ export default function Api(): JSX.Element {
               name: 'expiredAt',
               required: true,
               onChange: (e) => {
-                var additionalDays = 0
+                let additionalDays = 0
                 switch(e.target.value) {
                   case '7 days':
                     additionalDays = 7
@@ -147,7 +147,7 @@ export default function Api(): JSX.Element {
                     additionalDays = 365
                     break
                 }
-                var newExpires = new Date()
+                const newExpires = new Date()
                 newExpires.setDate(newExpires.getDate() + additionalDays)
                 setExpiresAt(newExpires)
               },

From c69eb3b5758562adadf7a333feea94d6fb1a7b73 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 14 Jun 2022 09:59:58 -0700
Subject: [PATCH 3/5] Make checkboxs left aligned

---
 .../web/components/elements/FormElements.tsx  | 41 +++++++++++--------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/packages/web/components/elements/FormElements.tsx b/packages/web/components/elements/FormElements.tsx
index f5a391d4a..2c26ec6b5 100644
--- a/packages/web/components/elements/FormElements.tsx
+++ b/packages/web/components/elements/FormElements.tsx
@@ -1,8 +1,8 @@
 import { styled } from '../tokens/stitches.config'
 import { useState } from 'react'
 import Checkbox from './Checkbox'
-import { Box, HStack, VStack } from './LayoutPrimitives'
-import { StyledText } from './StyledText'
+import { HStack, VStack } from './LayoutPrimitives'
+import { Label } from '@radix-ui/react-dropdown-menu'
 
 export interface FormInputProps {
   name: string
@@ -43,25 +43,30 @@ export function GeneralFormInput(props: FormInputProps): JSX.Element {
   const [input, setInput] = useState<FormInputProps>(props)
 
   if (props.type === 'checkbox') {
+    const StyledLabel = styled(Label, {
+      color: '$grayTextContrast',
+      fontSize: 13,
+      padding: '5px 10px',
+      cursor: 'default',
+    })
+
     return (
       <VStack>
         {input.options?.map((label, index) => (
-          <HStack key={index}>
-            <StyledText>{label}</StyledText>
-            <Box css={{ padding: '10px 0 0 10px' }}>
-              <Checkbox
-                key={index}
-                checked={input.value[index]}
-                setChecked={(arg) => {
-                  input.value[index] = arg
-                  setInput(input)
-                  props.onChange &&
-                    props.onChange(
-                      input.options?.filter((_, i) => input.value[i])
-                    )
-                }}
-              ></Checkbox>
-            </Box>
+          <HStack key={index} alignment='center'>
+            <Checkbox
+              key={index}
+              checked={input.value[index]}
+              setChecked={(arg) => {
+                input.value[index] = arg
+                setInput(input)
+                props.onChange &&
+                  props.onChange(
+                    input.options?.filter((_, i) => input.value[i])
+                  )
+              }}
+            ></Checkbox>
+            <StyledLabel>{label}</StyledLabel>
           </HStack>
         ))}
       </VStack>

From 00bbb993bcd1092e83aab088bf33301c698f44a7 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 14 Jun 2022 10:01:20 -0700
Subject: [PATCH 4/5] Consistent naming

---
 packages/web/components/elements/Table.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/components/elements/Table.tsx b/packages/web/components/elements/Table.tsx
index 9dc16e45c..d854dedb3 100644
--- a/packages/web/components/elements/Table.tsx
+++ b/packages/web/components/elements/Table.tsx
@@ -123,7 +123,7 @@ export function Table(props: TableProps): JSX.Element {
                   },
                 }}
               >
-                <SpanBox>Add More</SpanBox>
+                <SpanBox>Create</SpanBox>
               </SpanBox>
               <SpanBox
                 css={{

From 97418f549240f157cad2325d34d8826cf89bedec Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 14 Jun 2022 10:14:37 -0700
Subject: [PATCH 5/5] Right align buttons, no need for a Cancel button

---
 packages/web/components/patterns/FormModal.tsx | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/web/components/patterns/FormModal.tsx b/packages/web/components/patterns/FormModal.tsx
index 236f70e44..e9d56ac4a 100644
--- a/packages/web/components/patterns/FormModal.tsx
+++ b/packages/web/components/patterns/FormModal.tsx
@@ -82,19 +82,13 @@ export function FormModal(props: FormModalProps): JSX.Element {
                 </HStack>
               ))}
               <HStack
-                alignment={'center'}
-                distribution="center"
+                alignment="end"
+                distribution="end"
                 css={{
-                  padding: '20px 0 20px 0',
+                  width: '100%',
+                  padding: '32px 22px 20px 0',
                 }}
               >
-                <Button
-                  style={'ctaPill'}
-                  onClick={() => props.onOpenChange(false)}
-                  css={{ marginRight: '20px' }}
-                >
-                  Cancel
-                </Button>
                 <Button style={'ctaDarkYellow'}>
                   {props.acceptButtonLabel || 'Submit'}
                 </Button>