From 14aeee888f4ab7cb3718ca31e093ef787ad13353 Mon Sep 17 00:00:00 2001 From: jeffvli Date: Fri, 9 Jun 2023 14:46:41 -0700 Subject: [PATCH] Adjust header, input, and modal styles --- src/renderer/app.tsx | 9 ++++----- src/renderer/components/input/index.tsx | 6 ++++++ src/renderer/themes/default.scss | 1 + src/renderer/themes/light.scss | 1 + 4 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/renderer/app.tsx b/src/renderer/app.tsx index cc91f271..f252773b 100644 --- a/src/renderer/app.tsx +++ b/src/renderer/app.tsx @@ -119,13 +119,12 @@ export const App = () => { styles: { body: { background: 'var(--modal-bg)', padding: '1rem !important' }, close: { marginRight: '0.5rem' }, - content: { borderRadius: '10px' }, + content: { borderRadius: '5px' }, header: { - background: 'var(--modal-bg)', - borderBottom: '1px solid var(--generic-border-color)', + background: 'var(--modal-header-bg)', paddingBottom: '1rem', }, - title: { fontSize: 'medium', fontWeight: 'bold' }, + title: { fontSize: 'medium', fontWeight: 500 }, }, }, }, @@ -170,7 +169,7 @@ export const App = () => { transitionProps: { duration: 300, exitDuration: 300, - transition: 'slide-down', + transition: 'fade', }, }} modals={{ addToPlaylist: AddToPlaylistContextModal, base: BaseContextModal }} diff --git a/src/renderer/components/input/index.tsx b/src/renderer/components/input/index.tsx index e19309ee..6bf2e339 100644 --- a/src/renderer/components/input/index.tsx +++ b/src/renderer/components/input/index.tsx @@ -76,6 +76,7 @@ const StyledTextInput = styled(MantineTextInput)` } & .mantine-TextInput-label { + margin-bottom: 0.5rem; font-family: var(--label-font-faimly); } @@ -127,6 +128,7 @@ const StyledNumberInput = styled(MantineNumberInput)` } & .mantine-NumberInput-label { + margin-bottom: 0.5rem; font-family: var(--label-font-faimly); } @@ -160,6 +162,7 @@ const StyledPasswordInput = styled(MantinePasswordInput)` } & .mantine-PasswordInput-label { + margin-bottom: 0.5rem; font-family: var(--label-font-faimly); } @@ -193,6 +196,7 @@ const StyledFileInput = styled(MantineFileInput)` } & .mantine-FileInput-label { + margin-bottom: 0.5rem; font-family: var(--label-font-faimly); } @@ -226,6 +230,7 @@ const StyledJsonInput = styled(MantineJsonInput)` } & .mantine-JsonInput-label { + margin-bottom: 0.5rem; font-family: var(--label-font-faimly); } @@ -255,6 +260,7 @@ const StyledTextarea = styled(MantineTextarea)` } & .mantine-Textarea-label { + margin-bottom: 0.5rem; font-family: var(--label-font-faimly); } diff --git a/src/renderer/themes/default.scss b/src/renderer/themes/default.scss index 5fd3d1e8..8fe90a1d 100644 --- a/src/renderer/themes/default.scss +++ b/src/renderer/themes/default.scss @@ -103,6 +103,7 @@ --toast-bg: rgb(16, 16, 16); --modal-bg: var(--main-bg); + --modal-header-bg: var(--paper-bg); --badge-bg: rgb(80, 80, 80); --badge-fg: rgb(255, 255, 255); diff --git a/src/renderer/themes/light.scss b/src/renderer/themes/light.scss index f614bb1a..647f0e50 100644 --- a/src/renderer/themes/light.scss +++ b/src/renderer/themes/light.scss @@ -87,6 +87,7 @@ body[data-theme='defaultLight'] { --toast-bg: rgb(16, 16, 16); --modal-bg: rgb(255, 255, 255); + --modal-header-bg: var(--paper-bg); --paper-bg: rgb(240, 240, 240);