Use a <select for picking API expiration, fix some text color issues in dark mode

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

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': {

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>

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,
             },
           ])

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',
                 }}