prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #2818 from omnivore-app/fix/web-accounts-form-input

Browse source 
Fix styling of accounts without altering the default form controls
This commit is contained in:
Jackson Harper 2023-09-30 14:55:05 +08:00 committed by GitHub
commit 9124464c23
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/web/components/elements/FormElements.tsx
View file

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

20
packages/web/pages/settings/account.tsx
View file

@ -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('')