From 00e7a987ff3e4ecabfc6dcb46d427f88bc0fa23b Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 6 Mar 2020 16:21:38 +0200
Subject: [PATCH] ModalDialog styles adapted to design changes

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

diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less
index d14526017..3ceaafe69 100644
--- a/src/common/ModalDialog/styles.less
+++ b/src/common/ModalDialog/styles.less
@@ -1,66 +1,59 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 .modal-container {
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: var(--color-backgrounddark40);
+    background-color: @color-background-dark5-40;
 
     .modal-dialog-container {
         flex: none;
         display: flex;
         flex-direction: column;
-        max-width: 80%;
+        width: 38rem;
         max-height: 80%;
-        background-color: var(--color-surfacelighter);
+        background-color: @color-surface-light5;
 
-        .header-container {
+        .close-button-container {
             flex: none;
-            align-self: stretch;
-            display: flex;
-            flex-direction: row;
-            justify-content: flex-end;
-            padding: 0.2rem 0.2rem 0;
+            align-self: flex-end;
+            width: 2rem;
+            height: 2rem;
+            margin: 0.2rem 0.2rem 0 0;
+            padding: 0.5rem;
 
-            .title-container {
-                flex: 1;
-                align-self: center;
-                max-height: 2.4em;
-                padding: 0 0.5rem;
-                font-size: 1.2rem;
-                color: var(--color-backgrounddarker);
+            .icon {
+                display: block;
+                width: 100%;
+                height: 100%;
+                fill: @color-surface-dark1;
             }
 
-            .close-button-container {
-                flex: none;
-                align-self: flex-start;
-                width: 2rem;
-                height: 2rem;
-                padding: 0.5rem;
-
+            &:hover, &:focus {
                 .icon {
-                    display: block;
-                    width: 100%;
-                    height: 100%;
-                    fill: var(--color-surfacedark);
-                }
-
-                &:hover, &:focus {
-                    background-color: var(--color-surfacelight);
-
-                    .icon {
-                        fill: var(--color-surfacedarker);
-                    }
-                }
-
-                &:focus {
-                    outline-color: var(--color-surfacedark);
+                    fill: @color-surface-light1;
                 }
             }
+
+            &:focus {
+                outline-color: @color-background-dark5;
+            }
+        }
+
+        .title-container {
+            flex: 1 0 auto;
+            max-height: 2.4em;
+            margin: 0 2rem;
+            font-size: 1.2rem;
+            font-weight: 500;
+            opacity: 0.9;
+            color: @color-background-dark5;
         }
 
         .modal-dialog-content {
             flex: 1;
             align-self: stretch;
-            margin: 2rem 1rem 0;
+            margin: 1.5rem 1rem 0;
             padding: 0 1rem;
             overflow-y: auto;
 
@@ -72,7 +65,7 @@
         .buttons-container {
             flex: none;
             align-self: stretch;
-            margin: 1rem 2rem 0;
+            margin: 2rem 2rem 0;
             display: flex;
             flex-direction: row;
             flex-wrap: wrap;
@@ -90,17 +83,15 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    padding: 1rem;
-    background-color: var(--color-signal5);
-
-    &:focus {
-        outline-width: calc(1.5 * var(--focus-outline-size));
-        outline-color: var(--color-surfacelighter);
-        outline-offset: calc(-2 * var(--focus-outline-size));
-    }
+    padding: 1.2rem;
+    background-color: @color-accent3;
 
     &:hover {
-        filter: brightness(1.2);
+        background-color: @color-accent3-light2;
+    }
+
+    &:focus {
+        outline-color: @color-background-dark5;
     }
 
     &:not(:last-child) {
@@ -112,7 +103,7 @@
         width: 1.2rem;
         height: 1.2rem;
         margin-right: .5rem;
-        fill: var(--color-surfacelighter);
+        fill: @color-surface-light5;
     }
 
     .label {
@@ -122,6 +113,6 @@
         max-height: 3.6em;
         font-size: 1.1rem;
         text-align: center;
-        color: var(--color-surfacelighter);
+        color: @color-surface-light5;
     }
 }
\ No newline at end of file