From 14aeee888f4ab7cb3718ca31e093ef787ad13353 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
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)<TextInputProps>`
   }
 
   & .mantine-TextInput-label {
+    margin-bottom: 0.5rem;
     font-family: var(--label-font-faimly);
   }
 
@@ -127,6 +128,7 @@ const StyledNumberInput = styled(MantineNumberInput)<NumberInputProps>`
   }
 
   & .mantine-NumberInput-label {
+    margin-bottom: 0.5rem;
     font-family: var(--label-font-faimly);
   }
 
@@ -160,6 +162,7 @@ const StyledPasswordInput = styled(MantinePasswordInput)<PasswordInputProps>`
   }
 
   & .mantine-PasswordInput-label {
+    margin-bottom: 0.5rem;
     font-family: var(--label-font-faimly);
   }
 
@@ -193,6 +196,7 @@ const StyledFileInput = styled(MantineFileInput)<FileInputProps>`
   }
 
   & .mantine-FileInput-label {
+    margin-bottom: 0.5rem;
     font-family: var(--label-font-faimly);
   }
 
@@ -226,6 +230,7 @@ const StyledJsonInput = styled(MantineJsonInput)<JsonInputProps>`
   }
 
   & .mantine-JsonInput-label {
+    margin-bottom: 0.5rem;
     font-family: var(--label-font-faimly);
   }
 
@@ -255,6 +260,7 @@ const StyledTextarea = styled(MantineTextarea)<TextareaProps>`
   }
 
   & .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);