Adjust header, input, and modal styles

This commit is contained in:
jeffvli 2023-06-09 14:46:41 -07:00 committed by Jeff
parent cbc08d6f03
commit 14aeee888f
4 changed files with 12 additions and 5 deletions

View file

@ -119,13 +119,12 @@ export const App = () => {
styles: { styles: {
body: { background: 'var(--modal-bg)', padding: '1rem !important' }, body: { background: 'var(--modal-bg)', padding: '1rem !important' },
close: { marginRight: '0.5rem' }, close: { marginRight: '0.5rem' },
content: { borderRadius: '10px' }, content: { borderRadius: '5px' },
header: { header: {
background: 'var(--modal-bg)', background: 'var(--modal-header-bg)',
borderBottom: '1px solid var(--generic-border-color)',
paddingBottom: '1rem', paddingBottom: '1rem',
}, },
title: { fontSize: 'medium', fontWeight: 'bold' }, title: { fontSize: 'medium', fontWeight: 500 },
}, },
}, },
}, },
@ -170,7 +169,7 @@ export const App = () => {
transitionProps: { transitionProps: {
duration: 300, duration: 300,
exitDuration: 300, exitDuration: 300,
transition: 'slide-down', transition: 'fade',
}, },
}} }}
modals={{ addToPlaylist: AddToPlaylistContextModal, base: BaseContextModal }} modals={{ addToPlaylist: AddToPlaylistContextModal, base: BaseContextModal }}

View file

@ -76,6 +76,7 @@ const StyledTextInput = styled(MantineTextInput)<TextInputProps>`
} }
& .mantine-TextInput-label { & .mantine-TextInput-label {
margin-bottom: 0.5rem;
font-family: var(--label-font-faimly); font-family: var(--label-font-faimly);
} }
@ -127,6 +128,7 @@ const StyledNumberInput = styled(MantineNumberInput)<NumberInputProps>`
} }
& .mantine-NumberInput-label { & .mantine-NumberInput-label {
margin-bottom: 0.5rem;
font-family: var(--label-font-faimly); font-family: var(--label-font-faimly);
} }
@ -160,6 +162,7 @@ const StyledPasswordInput = styled(MantinePasswordInput)<PasswordInputProps>`
} }
& .mantine-PasswordInput-label { & .mantine-PasswordInput-label {
margin-bottom: 0.5rem;
font-family: var(--label-font-faimly); font-family: var(--label-font-faimly);
} }
@ -193,6 +196,7 @@ const StyledFileInput = styled(MantineFileInput)<FileInputProps>`
} }
& .mantine-FileInput-label { & .mantine-FileInput-label {
margin-bottom: 0.5rem;
font-family: var(--label-font-faimly); font-family: var(--label-font-faimly);
} }
@ -226,6 +230,7 @@ const StyledJsonInput = styled(MantineJsonInput)<JsonInputProps>`
} }
& .mantine-JsonInput-label { & .mantine-JsonInput-label {
margin-bottom: 0.5rem;
font-family: var(--label-font-faimly); font-family: var(--label-font-faimly);
} }
@ -255,6 +260,7 @@ const StyledTextarea = styled(MantineTextarea)<TextareaProps>`
} }
& .mantine-Textarea-label { & .mantine-Textarea-label {
margin-bottom: 0.5rem;
font-family: var(--label-font-faimly); font-family: var(--label-font-faimly);
} }

View file

@ -103,6 +103,7 @@
--toast-bg: rgb(16, 16, 16); --toast-bg: rgb(16, 16, 16);
--modal-bg: var(--main-bg); --modal-bg: var(--main-bg);
--modal-header-bg: var(--paper-bg);
--badge-bg: rgb(80, 80, 80); --badge-bg: rgb(80, 80, 80);
--badge-fg: rgb(255, 255, 255); --badge-fg: rgb(255, 255, 255);

View file

@ -87,6 +87,7 @@ body[data-theme='defaultLight'] {
--toast-bg: rgb(16, 16, 16); --toast-bg: rgb(16, 16, 16);
--modal-bg: rgb(255, 255, 255); --modal-bg: rgb(255, 255, 255);
--modal-header-bg: var(--paper-bg);
--paper-bg: rgb(240, 240, 240); --paper-bg: rgb(240, 240, 240);