From aa0d4103b1db881b2b2b853affd6ac2c625a12e2 Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Sat, 16 Sep 2023 14:09:49 +0200
Subject: [PATCH] style: tweaks on components

---
 .../src/features/modals/Modal.module.scss     |  4 ++--
 apps/client/src/theme/OntimeProgress.ts       |  8 +++++++
 apps/client/src/theme/ontimeModal.ts          | 22 ++++++++++++++-----
 apps/client/src/theme/theme.ts                |  9 +++++++-
 4 files changed, 35 insertions(+), 8 deletions(-)
 create mode 100644 apps/client/src/theme/OntimeProgress.ts

diff --git a/apps/client/src/features/modals/Modal.module.scss b/apps/client/src/features/modals/Modal.module.scss
index 10a97436b..aa2576fbe 100644
--- a/apps/client/src/features/modals/Modal.module.scss
+++ b/apps/client/src/features/modals/Modal.module.scss
@@ -41,8 +41,8 @@ $el-padding-with-compensation: 24px; // 16 + 8
 .title {
   font-size: $inner-section-text-size;
   color: $gray-500;
-  padding-left: 8px;
-  margin: 8px 0;
+  padding-left: 0.5rem;
+  margin: 0.5rem 0;
   text-transform: uppercase;
 }
 
diff --git a/apps/client/src/theme/OntimeProgress.ts b/apps/client/src/theme/OntimeProgress.ts
new file mode 100644
index 000000000..cb5c7bf2e
--- /dev/null
+++ b/apps/client/src/theme/OntimeProgress.ts
@@ -0,0 +1,8 @@
+export const ontimeProgressGray = {
+  track: {
+    background: '#f6f6f6', // $gray-500
+  },
+  filledTrack: {
+    background: '#578AF4', // $blue-500
+  },
+};
diff --git a/apps/client/src/theme/ontimeModal.ts b/apps/client/src/theme/ontimeModal.ts
index bba0429cd..6abae3dd5 100644
--- a/apps/client/src/theme/ontimeModal.ts
+++ b/apps/client/src/theme/ontimeModal.ts
@@ -2,8 +2,8 @@ export const ontimeModal = {
   header: {
     fontWeight: 400,
     letterSpacing: '0.3px',
-    padding: '16px 24px',
-    fontSize: '20px',
+    padding: '1rem 1.5rem',
+    fontSize: '1.25rem',
     color: '#202020', // $gray-50
   },
   dialog: {
@@ -20,17 +20,29 @@ export const ontimeModal = {
     color: '#202020', // $gray-50
   },
   footer: {
-    padding: '8px',
+    padding: '0.5rem',
   },
 };
 
 export const ontimeSmallModal = {
   ...ontimeModal,
   body: {
-    padding: '16px',
-    fontSize: '14px',
+    padding: '1rem',
+    fontSize: 'calc(1rem - 2px)',
   },
   dialog: {
     minHeight: 'min(200px, 10vh)',
   },
 };
+
+export const ontimeUploadModal = {
+  ...ontimeSmallModal,
+  body: {
+    padding: '1rem',
+    fontSize: 'calc(1rem - 2px)',
+  },
+  dialog: {
+    minHeight: 'min(200px, 10vh)',
+    maxWidth: 'min(800px, 80vh)',
+  },
+};
diff --git a/apps/client/src/theme/theme.ts b/apps/client/src/theme/theme.ts
index d1b89a58b..2378a270e 100644
--- a/apps/client/src/theme/theme.ts
+++ b/apps/client/src/theme/theme.ts
@@ -13,7 +13,8 @@ import {
 import { ontimeCheckboxOnDark } from './ontimeCheckbox';
 import { ontimeEditable } from './ontimeEditable';
 import { ontimeMenuOnDark } from './ontimeMenu';
-import { ontimeModal, ontimeSmallModal } from './ontimeModal';
+import { ontimeModal, ontimeSmallModal, ontimeUploadModal } from './ontimeModal';
+import { ontimeProgressGray } from './OntimeProgress';
 import { ontimeBlockRadio } from './ontimeRadio';
 import { ontimeSelect } from './ontimeSelect';
 import { lightSwitch, ontimeSwitch } from './ontimeSwitch';
@@ -79,6 +80,12 @@ const theme = extendTheme({
       variants: {
         ontime: { ...ontimeModal },
         'ontime-small': { ...ontimeSmallModal },
+        'ontime-upload': { ...ontimeUploadModal },
+      },
+    },
+    Progress: {
+      variants: {
+        'ontime-on-light': { ...ontimeProgressGray },
       },
     },
     Radio: {