From 4b4fb9761baab5f30ac18344ac9c6b9656ec1783 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Tue, 4 Jul 2023 13:50:48 +0200
Subject: [PATCH] refactor(ModalDialog): style

---
 src/common/ModalDialog/styles.less | 80 +++++++++++-------------------
 1 file changed, 28 insertions(+), 52 deletions(-)

diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less
index 86c6e8108..f73f3c768 100644
--- a/src/common/ModalDialog/styles.less
+++ b/src/common/ModalDialog/styles.less
@@ -10,53 +10,56 @@
     background-color: @color-background-dark5-40;
 
     .modal-dialog-container {
+        position: relative;
         flex: none;
         display: flex;
         flex-direction: column;
         max-width: 80%;
         max-height: 80%;
-        background-color: @color-surface-light5;
+        padding: 0 2rem;
+        border-radius: var(--border-radius);
+        background-color: var(--tertiary-background-color);
 
         .close-button-container {
-            flex: none;
-            align-self: flex-end;
-            width: 2rem;
-            height: 2rem;
-            margin: 0.2rem 0.2rem 0 0;
+            position: absolute;
+            top: 0.5rem;
+            right: 0.5rem;
+            width: 3rem;
+            height: 3rem;
             padding: 0.5rem;
+            border-radius: var(--border-radius);
 
             .icon {
                 display: block;
                 width: 100%;
                 height: 100%;
-                color: @color-surface-dark1-90;
+                color: var(--primary-overlay-color);
             }
 
             &:hover, &:focus {
                 .icon {
-                    color: @color-surface-light1-90;
+                    color: var(--primary-foreground-color);
                 }
             }
 
             &:focus {
-                outline-color: @color-background-dark5;
+                outline-color: var(--primary-foreground-color);
             }
         }
 
         .title-container {
             flex: 1 0 auto;
-            max-height: 2.4em;
-            margin: 0 2rem;
+            display: flex;
+            align-items: center;
+            height: 4.5rem;
             font-size: 1.2rem;
             font-weight: 500;
-            color: @color-background-dark5-90;
+            color: var(--primary-foreground-color);
         }
 
         .modal-dialog-content {
             flex: 1;
             align-self: stretch;
-            margin: 1.5rem 1rem 0;
-            padding: 0 1rem;
             overflow-y: auto;
 
             &:last-child {
@@ -67,13 +70,12 @@
         .buttons-container {
             flex: none;
             align-self: stretch;
-            margin: 2rem 2rem 0;
             display: flex;
             flex-direction: row;
             flex-wrap: wrap;
 
             &:last-child {
-                margin-bottom: 2rem;
+                margin: 2rem 0;
             }
         }
     }
@@ -85,15 +87,18 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
+    height: 3.5rem;
+    border-radius: 3.5rem;
     padding: 1.2rem;
-    background-color: @color-accent3;
+    background-color: var(--secondary-accent-color);
 
     &:hover {
-        background-color: @color-accent3-light1;
+        box-shadow: 0 0 0 0.15rem var(--secondary-accent-color) inset;
+        background-color: transparent;
     }
 
     &:focus {
-        outline-color: @color-background-dark5;
+        outline-color: var(--primary-foreground-color);
     }
 
     &:not(:last-child) {
@@ -105,7 +110,7 @@
         width: 1.2rem;
         height: 1.2rem;
         margin-right: .5rem;
-        color: @color-surface-light5-90;
+        color: var(--primary-foreground-color);
     }
 
     .label {
@@ -114,9 +119,9 @@
         flex-basis: auto;
         max-height: 3.6em;
         font-size: 1.1rem;
-        font-weight: 500;
+        font-weight: 700;
         text-align: center;
-        color: @color-surface-light5-90;
+        color: var(--primary-foreground-color);
     }
 }
 
@@ -127,36 +132,7 @@
             width: 90%;
             max-width: initial;
             z-index: 0;
-
-            .close-button-container {
-                position: absolute;
-                top: 0;
-                right: 0;
-                margin: 0.75rem 0.75rem 0 0;
-                padding: 0.25rem;
-            }
-
-            .title-container {
-                max-height: 4.8em;
-                margin: 1rem 3rem 1rem 1.5rem;
-            }
-
-            .modal-dialog-content {
-                margin: 0 0.5rem;
-                padding: 0 0.5rem;
-
-                &:last-child {
-                    margin-bottom: 1rem;
-                }
-            }
-
-            .buttons-container {
-                margin: 1rem 1rem 0;
-
-                &:last-child {
-                    margin-bottom: 1rem;
-                }
-            }
+            padding: 0 1.5rem;
         }
     }
 }
\ No newline at end of file