Adjust header, input, and modal styles
This commit is contained in:
parent
cbc08d6f03
commit
14aeee888f
4 changed files with 12 additions and 5 deletions
|
@ -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 }}
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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);
|
||||||
|
|
||||||
|
|
Reference in a new issue