Merge pull request #796 from omnivore-app/api-key-selection

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

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,29 +43,42 @@ 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>
     )
+  } 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

@@ -123,7 +123,7 @@ export function Table(props: TableProps): JSX.Element {
                   },
                 }}
               >
-                <SpanBox>Add More</SpanBox>
+                <SpanBox>Create</SpanBox>
               </SpanBox>
               <SpanBox
                 css={{
@@ -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,29 +72,23 @@ 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>
               ))}
               <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>

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) => {
+                let 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
+                }
+                const 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',
                 }}