From 817a894d64c468cde2ce748843f6794d7ef5b353 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Sat, 30 Sep 2023 14:20:03 +0800
Subject: [PATCH] Fix styling of accounts without altering the default form
 controls

---
 .../web/components/elements/FormElements.tsx  |  5 ++---
 packages/web/pages/settings/account.tsx       | 20 ++++++++++++++++++-
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/web/components/elements/FormElements.tsx b/packages/web/components/elements/FormElements.tsx
index 1c00bded2..1d22715dd 100644
--- a/packages/web/components/elements/FormElements.tsx
+++ b/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',
   },
 })
 
diff --git a/packages/web/pages/settings/account.tsx b/packages/web/pages/settings/account.tsx
index 3e34236aa..6e82f4dc4 100644
--- a/packages/web/pages/settings/account.tsx
+++ b/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('')