Adjust header, input, and modal styles

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 }}

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);
   }
 

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);

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);