[UI/UX] - improve UI/UX

near · Aug 1, 2024 · c972566 · c972566
1 parent c116dfe
commit c972566
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
     }