From c7e5421c77fe31bc7dd33464b9b739a811724164 Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Thu, 28 Sep 2023 15:04:27 +0300
Subject: [PATCH] uninstall-pop-up modal-dialog new styling

---
 src/common/ModalDialog/ModalDialog.js |  2 +-
 src/common/ModalDialog/styles.less    | 29 ++++++++++++++++++++++-----
 src/routes/Search/styles.less         |  2 +-
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/common/ModalDialog/ModalDialog.js b/src/common/ModalDialog/ModalDialog.js
index e7e2e8056..a3d390ef0 100644
--- a/src/common/ModalDialog/ModalDialog.js
+++ b/src/common/ModalDialog/ModalDialog.js
@@ -75,7 +75,7 @@ const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequ
                     Array.isArray(buttons) && buttons.length > 0 ?
                         <div className={styles['buttons-container']}>
                             {buttons.map(({ className, label, icon, props }, index) => (
-                                <Button title={label} {...props} key={index} className={classnames(className, styles['action-button'])}>
+                                <Button title={label} {...props} key={index} className={classnames(className, label === 'Uninstall' ? styles['uninstall-button'] : styles['action-button'])}>
                                     {
                                         typeof icon === 'string' && icon.length > 0 ?
                                             <Icon className={styles['icon']} name={icon} />
diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less
index 7a9dd621f..8fa45bda6 100644
--- a/src/common/ModalDialog/styles.less
+++ b/src/common/ModalDialog/styles.less
@@ -19,6 +19,7 @@
         padding: 0 2rem;
         border-radius: var(--border-radius);
         background-color: var(--modal-background-color);
+        box-shadow: 0px 0px 30px #7B5BF55E;
 
         .close-button-container {
             position: absolute;
@@ -33,11 +34,13 @@
                 display: block;
                 width: 100%;
                 height: 100%;
-                color: var(--overlay-color);
+                color: var(--primary-foreground-color);
+                opacity: 0.4;
             }
 
             &:hover, &:focus {
                 .icon {
+                    opacity: 1;
                     color: var(--primary-foreground-color);
                 }
             }
@@ -61,6 +64,7 @@
             flex: 1;
             align-self: stretch;
             overflow-y: auto;
+            padding: 32px  0;
 
             &:last-child {
                 margin-bottom: 2rem;
@@ -80,8 +84,7 @@
         }
     }
 }
-
-.action-button {
+.base-button() {
     flex: 1;
     display: flex;
     flex-direction: row;
@@ -90,10 +93,8 @@
     height: 3.5rem;
     border-radius: 3.5rem;
     padding: 1.2rem;
-    background-color: var(--secondary-accent-color);
 
     &:hover {
-        outline: var(--focus-outline-size) solid var(--secondary-accent-color);
         background-color: transparent;
     }
 
@@ -125,6 +126,24 @@
     }
 }
 
+.uninstall-button {
+    .base-button();
+    background-color: rgba(72, 69, 114, 1);
+
+    &:hover {
+        outline: var(--focus-outline-size) solid rgba(72, 69, 114, 1);
+    }
+}
+
+.action-button {
+    .base-button();
+    background-color: var(--secondary-accent-color);
+
+    &:hover {
+        outline: var(--focus-outline-size) solid var(--secondary-accent-color);
+    }
+}
+
 @media only screen and (max-width: @minimum) {
     .modal-container {
         .modal-dialog-container {
diff --git a/src/routes/Search/styles.less b/src/routes/Search/styles.less
index efcfbf500..e7ee2e0d4 100644
--- a/src/routes/Search/styles.less
+++ b/src/routes/Search/styles.less
@@ -240,7 +240,6 @@
     .search-container {
         .search-content {
             .search-hints-wrapper {
-                margin-top: 4rem;
                 .search-hints-container {
                     max-width: 100%;
                     .search-hint-container {
@@ -283,6 +282,7 @@
             }
 
             .search-hints-wrapper {
+                margin-top: 4rem;
                 .search-hints-container {
                     padding: 4rem 2rem;
                     .search-hint-container {