From c9725667c8a11d872d3d3bfccf956a06df30b9cb Mon Sep 17 00:00:00 2001
From: Pavel Ivanov <pavel.ivanov@limechain.tech>
Date: Thu, 1 Aug 2024 12:29:59 +0300
Subject: [PATCH] [UI/UX] - improve UI/UX

---
 packages/modal-ui-js/src/lib/render-modal.ts          |  8 ++++----
 packages/modal-ui-js/src/lib/styles.css               | 11 +++++++----
 .../modal-ui/src/lib/components/WalletOptions.tsx     |  4 ++--
 packages/modal-ui/src/lib/components/styles.css       | 11 +++++++----
 4 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/packages/modal-ui-js/src/lib/render-modal.ts b/packages/modal-ui-js/src/lib/render-modal.ts
index 7fb822215..fee984a8c 100644
--- a/packages/modal-ui-js/src/lib/render-modal.ts
+++ b/packages/modal-ui-js/src/lib/render-modal.ts
@@ -271,7 +271,7 @@ const renderWalletOptions = () => {
     optionsWrapper?.insertAdjacentHTML(
       "beforeend",
       `
-      <div class="options-list-section">
+      <div class="options-list-section-recent">
         <div class="options-list-section-header">Recent</div>
         <div class="options-list recent-options-list-content"></div>
       </div>
@@ -280,7 +280,7 @@ const renderWalletOptions = () => {
     optionsWrapper?.insertAdjacentHTML(
       "beforeend",
       `
-      <div class="options-list-section">
+      <div class="options-list-section-more">
         <div class="options-list-section-header">More</div>
         <div class="options-list more-options-list-content"></div>
       </div>
@@ -379,7 +379,7 @@ export function renderModal() {
     document.querySelector(".wallet-options-wrapper")?.insertAdjacentHTML(
       "beforeend",
       `
-      <div class="options-list-section">
+      <div class="options-list-section-recent">
         <div class="options-list-section-header">Recent</div>
         <div class="options-list recent-options-list-content"></div>
       </div>
@@ -388,7 +388,7 @@ export function renderModal() {
     document.querySelector(".wallet-options-wrapper")?.insertAdjacentHTML(
       "beforeend",
       `
-      <div class="options-list-section">
+      <div class="options-list-section-more">
         <div class="options-list-section-header">More</div>
         <div class="options-list more-options-list-content"></div>
       </div>
diff --git a/packages/modal-ui-js/src/lib/styles.css b/packages/modal-ui-js/src/lib/styles.css
index 402d22a4f..08aa338f4 100644
--- a/packages/modal-ui-js/src/lib/styles.css
+++ b/packages/modal-ui-js/src/lib/styles.css
@@ -199,7 +199,7 @@
   right: 0;
   z-index: 10;
   background: var(--content-bg);
-  padding: 32px 24px 0px 24px;
+  padding: 32px 24px 12px 24px;
 }
 
 .nws-modal-wrapper .nws-modal .modal-left::-webkit-scrollbar {
@@ -1286,8 +1286,11 @@
   font-size: 14px;
 }
 
+.options-list-section-recent {
+  margin-bottom: 20px;
+}
 
-.scan-qr-code .footer{
+.scan-qr-code .footer {
   position: relative;
   display: flex;
   align-items: center;
@@ -1433,7 +1436,7 @@ input:checked + .nws-slider:before {
 
   .nws-modal-wrapper .nws-modal .modal-left .modal-left-title {
     width: 39%;
-    padding: 32px 16px 0px 16px;
+    padding: 32px 16px 12px 16px;
   }
 }
 
@@ -1451,7 +1454,7 @@ input:checked + .nws-slider:before {
   .nws-modal-wrapper .nws-modal .modal-left .modal-left-title {
     position: relative;
     width: 100%;
-    padding: 0px;
+    padding: 32px 12px 12px 12px;
     z-index: 0;
   }
 
diff --git a/packages/modal-ui/src/lib/components/WalletOptions.tsx b/packages/modal-ui/src/lib/components/WalletOptions.tsx
index 4699129d2..746053034 100644
--- a/packages/modal-ui/src/lib/components/WalletOptions.tsx
+++ b/packages/modal-ui/src/lib/components/WalletOptions.tsx
@@ -133,13 +133,13 @@ export const WalletOptions: React.FC<WalletOptionsProps> = ({
       {selector.options.optimizeWalletOrder &&
       selector.store.getState().recentlySignedInWallets.length > 0 ? (
         <div className="wallet-options-wrapper">
-          <div className="options-list-section">
+          <div className="options-list-section-recent">
             <div className="options-list-section-header">Recent</div>
             <div className="options-list more-options-list-content">
               {renderOptionsList(recentModules)}
             </div>
           </div>
-          <div className="options-list-section">
+          <div className="options-list-section-more">
             <div className="options-list-section-header">More</div>
             <div className="options-list more-options-list-content">
               {renderOptionsList(moreModules)}
diff --git a/packages/modal-ui/src/lib/components/styles.css b/packages/modal-ui/src/lib/components/styles.css
index d00d4d490..68536505f 100644
--- a/packages/modal-ui/src/lib/components/styles.css
+++ b/packages/modal-ui/src/lib/components/styles.css
@@ -199,7 +199,7 @@
   right: 0;
   z-index: 10;
   background: var(--content-bg);
-  padding: 32px 24px 0px 24px;
+  padding: 32px 24px 12px 24px;
 }
 
 .nws-modal-wrapper .nws-modal .modal-left::-webkit-scrollbar {
@@ -1287,8 +1287,11 @@
   font-size: 14px;
 }
 
+.options-list-section-recent {
+  margin-bottom: 20px;
+}
 
-.scan-qr-code .footer{
+.scan-qr-code .footer {
   position: relative;
   display: flex;
   align-items: center;
@@ -1434,7 +1437,7 @@ input:checked + .nws-slider:before {
 
     .nws-modal-wrapper .nws-modal .modal-left .modal-left-title {
       width: 39%;
-      padding: 32px 16px 0px 16px;
+      padding: 32px 16px 12px 16px;
     }
 }
 
@@ -1451,7 +1454,7 @@ input:checked + .nws-slider:before {
 
     .nws-modal-wrapper .nws-modal .modal-left .modal-left-title {
       width: 100%;
-      padding: 32px 12px 0px 12px;
+      padding: 32px 12px 12px 12px;
       z-index: 0;
     }