Fix styling of accounts without altering the default form controls

packages/web/components/elements/FormElements.tsx

@@ -25,7 +25,7 @@ export interface FormInputProps {
 }
 
 export const FormInput = styled('input', {
-  border: '1px solid $textNonessential',
+  border: 'none',
   width: '100%',
   bg: 'transparent',
   fontSize: '16px',
@@ -38,8 +38,7 @@ export const FormInput = styled('input', {
   height: '38px',
   color: '$grayTextContrast',
   '&:focus': {
-    border: '1px solid transparent',
-    outline: '2px solid $omnivoreCtaYellow',
+    outline: 'none',
   },
 })
 

packages/web/pages/settings/account.tsx

@@ -2,7 +2,6 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
 import { applyStoredTheme } from '../../lib/themeUpdater'
 
-import { FormInput } from '../../components/elements/FormElements'
 import { StyledText } from '../../components/elements/StyledText'
 import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
 import { SettingsLayout } from '../../components/templates/SettingsLayout'
@@ -23,6 +22,25 @@ const StyledLabel = styled('label', {
   fontSize: '16px',
 })
 
+export const FormInput = styled('input', {
+  border: '1px solid $textNonessential',
+  width: '100%',
+  bg: 'transparent',
+  fontSize: '16px',
+  fontFamily: 'inter',
+  fontWeight: 'normal',
+  lineHeight: '1.35',
+  borderRadius: '5px',
+  textIndent: '8px',
+  marginBottom: '2px',
+  height: '38px',
+  color: '$grayTextContrast',
+  '&:focus': {
+    border: '1px solid transparent',
+    outline: '2px solid $omnivoreCtaYellow',
+  },
+})
+
 export default function Account(): JSX.Element {
   const { viewerData } = useGetViewerQuery()
   const [name, setName] = useState('')