Design improvements

PIVX-Labs · Jul 21, 2023 · 3f6aee1 · 3f6aee1
1 parent e93aacc
commit 3f6aee1
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 29 deletions.
diff --git a/assets/style/style.css b/assets/style/style.css
@@ -3363,7 +3363,7 @@ select.form-control option {
 }
 
 .walletLanding .landBtn {
-    background-color:rgba(255,255,255,10%);
+    background-color:rgba(0, 0, 0, 0.45);
     border-radius:10px;
     aspect-ratio:1/1;
     flex-direction: column;
@@ -3373,8 +3373,14 @@ select.form-control option {
     margin: 10px;
 }
 
+@media (max-width: 992px) {
+    .walletLanding .landBtn {
+        aspect-ratio: 1/0.65;
+    }
+}
+
 .walletLanding .landBtn:hover {
-    background-color:rgba(255,255,255,15%);
+    background-color:rgba(0, 0, 0, 0.65);
     cursor:pointer;
 }
 
@@ -3396,13 +3402,12 @@ select.form-control option {
 
 .advancedLanding {
     width: 100%;
-    display: flex;
-    justify-content: flex-end;
     margin-top: -10px;
 }
 
-.advancedLanding .textIcon,
-.advancedLanding .textIconBack {
+.textIcon,
+.textIconBack {
+    display: inline-block;
     height: 35px;
     font-size: 16px;
     background-color: #ffffff17;
@@ -3413,27 +3418,28 @@ select.form-control option {
     padding-right:15px;
 }
 
-.advancedLanding .textIconBack {
+.textIconBack {
     width: 35px;
 }
 
-.advancedLanding .textIconBack i {
-    top: 9px;
+.textIconBack i {
+    top: 9px !important;
     left: 8px;
 }
 
-.advancedLanding .textIcon .textAdvanced {
+.textIcon .textAdvanced {
     position:relative;
     top:5px;
     margin-left:12px;
     font-size: 13px;
 }
 
-.advancedLanding .textIcon:hover {
+.textIcon:hover {
     background-color:#ffffff1f;
 }
 
-.advancedLanding span i {
+.advancedLanding span i,
+.textIcon i {
     position: relative;
     top: 6px;
     left: 8px;

diff --git a/index.template.html b/index.template.html
@@ -203,11 +203,6 @@ <h1 class="pivx-bold-title center-text">
                   <div class="col-12" id="walletLandingDiv">
                     <div class="advancedLanding">
                       <div id="landingBackBtn"></div>
-
-                      <span class="textIcon" onclick="MPW.showAdvancedLanding()">
-                        <i class="fa-solid fa-gears"></i>
-                        <span class="textAdvanced" id="textAdvanced">Advanced</span>
-                      </span>
                     </div>
 
                     <div class="settingsContent py-3px">
@@ -219,6 +214,13 @@ <h1 class="pivx-bold-title center-text">
                             <span>Create a new PIVX wallet, offering the most secure backup & security methods.</span>
                           </div>
                         </div>
+                        <div class="col-12 col-sm-6 col-lg-3 mb-0 p-0">
+                          <div class="d-flex justify-content-center landBtn text-center" onclick="MPW.switchLanding('importWalletLanding')">
+                            <div class="coinstat-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M33.722 29.626c-5.494 1.373-8.848 6.96-7.475 12.456a10.2 10.2 0 004.679 6.316 10.212 10.212 0 007.778 1.159 10.21 10.21 0 006.317-4.681 10.205 10.205 0 001.156-7.776c-1.372-5.494-6.959-8.847-12.455-7.474zm10.063 14.511a8.77 8.77 0 01-5.433 4.022 8.771 8.771 0 01-6.685-.994 8.778 8.778 0 01-4.024-5.433c-1.182-4.725 1.702-9.529 6.427-10.71a8.832 8.832 0 012.141-.265c3.958 0 7.569 2.684 8.57 6.692a8.776 8.776 0 01-.996 6.688z"></path><path d="M26.835 47.111H10.727v-3.539h13.229a.72.72 0 000-1.439H10.727v-3.46h12.787a.72.72 0 100-1.439H8.292v-3.461h17.216a.718.718 0 100-1.439h-7.512V30.5a.515.515 0 10-1.028 0v1.834h-6.24v-3.423h1.042V30.5a.514.514 0 101.028 0v-1.589h1.671V30.5a.514.514 0 101.028 0v-1.589h14.946a.72.72 0 100-1.439h-4.227v-10.61c0-1.086.136-2.098.355-3.031a9.03 9.03 0 001.901.037c1.952-.177 3.519-1.027 4.527-2.46C35.914 7.268 34.3.841 34.229.569a.718.718 0 00-.857-.521c-.112.025-2.776.646-5.324 2.137-3.532 2.069-5.09 4.802-4.508 7.905a.72.72 0 101.414-.266c-.464-2.477.812-4.624 3.797-6.38 1.605-.945 3.308-1.524 4.237-1.799.117.638.268 1.65.301 2.813.052 1.771-.161 4.271-1.466 6.124-.762 1.081-1.919 1.704-3.44 1.85a7.342 7.342 0 01-1.397-.002c1.253-3.551 3.606-5.621 3.639-5.647a.72.72 0 10-.936-1.094c-.156.133-3.046 2.654-4.317 7.018a.617.617 0 00-.046.129c-.007.027-.008.054-.012.081a14.777 14.777 0 00-.535 3.948v3.502a20.63 20.63 0 00-1.5-1.928c.199-.761.804-3.777-1.522-5.652-3.09-2.491-9.616-1.796-9.892-1.766a.719.719 0 00-.609.926c.12.388 2.883 9.168 8.321 9.168.205 0 .414-.012.626-.038a.72.72 0 00-.174-1.43c-1.896.231-3.704-1.017-5.368-3.71-.819-1.326-1.401-2.698-1.725-3.553a24.135 24.135 0 012.563.002c2.438.137 4.289.663 5.354 1.521 1.149.926 1.27 2.31 1.189 3.25-1.439-1.353-2.536-1.932-2.619-1.975a.719.719 0 10-.659 1.28c.034.018 3.374 1.782 6.015 6.661v4.352H10.007a.72.72 0 00-.72.72v4.142H7.572a.72.72 0 00-.72.72v4.897a.72.72 0 00.72.721h1.716v9.155c0 .398.322.72.72.72h16.828a.72.72 0 10-.001-1.439zM45.188 9.529a.72.72 0 00.721-.72v-.642a.72.72 0 00-1.441 0v.643a.72.72 0 00.72.719zm0 4.407a.72.72 0 00.721-.72v-.642a.72.72 0 00-1.441 0v.642c0 .397.322.72.72.72zm-2.525-2.525h.644a.72.72 0 000-1.439h-.644a.718.718 0 100 1.439zm4.406 0h.643a.72.72 0 100-1.439h-.643a.72.72 0 100 1.439zm-9.245 10.11a.721.721 0 00.721-.72v-.643a.72.72 0 00-1.44 0v.642a.72.72 0 00.719.721zm0 4.405a.72.72 0 00.721-.719v-.642a.72.72 0 10-1.44 0v.642a.72.72 0 00.719.719zm-2.523-2.524h.643a.72.72 0 000-1.44h-.643a.72.72 0 100 1.44zm4.406 0h.643a.72.72 0 000-1.44h-.643a.72.72 0 100 1.44zm-34.7-4.7a.72.72 0 00-.72.72v.642a.72.72 0 001.44 0v-.642a.72.72 0 00-.72-.72zm0 4.406a.72.72 0 00-.72.72v.642a.72.72 0 001.44 0v-.642a.72.72 0 00-.72-.72zm-1.882-1.881h-.642a.72.72 0 100 1.439h.642a.72.72 0 100-1.439zm4.407 1.439a.72.72 0 100-1.439h-.643a.72.72 0 100 1.439h.643z"></path><circle cx="47.213" cy="21.709" r=".92"></circle><circle cx="47.424" cy="30.334" r=".92"></circle><circle cx="5.033" cy="11.611" r=".92"></circle><path d="M19.612 29.966v.536a.514.514 0 101.028 0v-.536a.514.514 0 10-1.028 0zm-6.879 5.193v.759a.514.514 0 001.028 0v-.759a.515.515 0 00-.514-.515.516.516 0 00-.514.515zm-2.49 0v.759a.514.514 0 001.028 0v-.759a.515.515 0 00-.514-.515.516.516 0 00-.514.515zm5.189 0v.241a.514.514 0 001.028 0v-.241a.515.515 0 00-.514-.515.516.516 0 00-.514.515zm17.816 4.022c-.298.103-.597-.061-.717-.354l-.145-.354c-.047-.108-.073-.233.036-.275l3.179-1.313a.608.608 0 01.465 1.123l-2.828 1.173c-.001.002.013-.002.01 0z"></path><path d="M36.024 45.227c-.107.04-.237-.092-.279-.197l-1.68-4.067c-.11-.266-.013-.605.227-.744.022-.017.037-.024.064-.037l3.014-1.241c.997-.411 1.446-1.556 1.031-2.561a1.987 1.987 0 00-2.521-1.114l-.195.082-2.843 1.182a.583.583 0 01-.742-.339l-.147-.355c-.046-.106-.024-.219.086-.263l3.366-1.389c1.621-.668 3.441.143 4.114 1.759a3.21 3.21 0 01-1.592 4.11l-2.499 1.035 1.298 3.146c.125.3-.053.727-.347.847l-.355.146z"></path></svg></div>
+                            Import wallet
+                            <span>Import a PIVX wallet using a Private Key, xpriv, or Seed Phrase.</span>
+                          </div>
+                        </div>
                         <div class="col-auto mb-0 p-0" id="vanityCol">
                           <div class="d-none justify-content-center landBtn text-center vanityLedger p-0 m-0" id="vanityDiv" onclick="MPW.switchLanding('createVanityLanding')">
                             <div class="coinstat-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M45.936 22.101c-1.321-4.06-2.976-6.808-3.045-6.922a.754.754 0 00-1.39.506c.003.016.193 1.655-1.762 3.08-.671.49-1.896.378-2.569-.234-.828-.753-.744-2.081.237-3.738C40.95 8.818 35.582 1.034 35.352.707a.757.757 0 00-1.369.35c-.002.022-.264 2.274-1.601 4.499-1.747 2.906-4.447 4.417-8.026 4.491-5.056.105-8.143 1.798-9.843 3.201-1.885 1.556-2.542 3.111-2.569 3.176a.755.755 0 00.525 1.022c1.916.45 2.546 1.966 2.503 3.127-.038 1.027-.636 2.314-2.201 2.563-1.112.176-1.965-.002-2.535-.532-1.144-1.063-.975-3.236-.973-3.256a.755.755 0 00-1.232-.65c-4.492 3.706-6.797 10.581-5.735 17.109.468 2.875 1.59 5.545 3.247 7.724 1.854 2.437 4.333 4.266 7.372 5.434a.754.754 0 10.542-1.408C6.292 44.8 4.323 38.86 3.787 35.563a18.666 18.666 0 01.711-8.828c.754-2.28 1.901-4.258 3.354-5.803.154.907.518 1.99 1.352 2.77.928.866 2.208 1.176 3.805.922 2.001-.317 3.396-1.923 3.472-3.997.06-1.631-.775-3.485-2.732-4.342.97-1.445 3.855-4.591 10.639-4.732 5.173-.107 7.922-2.926 9.317-5.272.666-1.12 1.09-2.23 1.356-3.125.397.746.855 1.708 1.234 2.79 1.136 3.235 1.072 5.953-.187 8.077-1.94 3.273-.615 5.022.044 5.622 1.212 1.102 3.219 1.252 4.475.337.998-.728 1.583-1.517 1.924-2.229a37.385 37.385 0 011.962 4.852c1.156 3.565 2.237 8.886.819 13.997-1.352 4.873-4.731 8.762-10.044 11.56a.755.755 0 00.704 1.335c5.698-3.001 9.331-7.206 10.796-12.5 1.519-5.484.375-11.128-.852-14.896z"></path><path d="M40.953 11.943a.754.754 0 101.459-.376l-.294-1.143a.756.756 0 00-1.462.377l.297 1.142zM25.17 33.984a.848.848 0 000-1.694h-6.537a.117.117 0 00-.117.118v.729c0 .454.358.825.805.853l5.849-.006z"></path><path d="M26.779 27.343h-6.921a.117.117 0 00-.118.117v.73a.86.86 0 00.805.853l5.883-.015c.219 0 .419.007.419.007a4.106 4.106 0 013.896 4.103 4.083 4.083 0 01-3.957 4.08h-6.192c-.041 0-.083 0-.124.009a.838.838 0 00-.715.775v8.363c0 .066.055.115.117.115h.729a.859.859 0 00.854-.807v-6.651c0-.057.055-.105.109-.105l5.346-.008a6.014 6.014 0 001.334-.213 5.788 5.788 0 004.205-5.567 5.81 5.81 0 00-5.67-5.786z"></path></svg></div>
@@ -233,13 +235,6 @@ <h1 class="pivx-bold-title center-text">
                             <span>Use your Ledger Hardware wallet with MPW's familiar interface.</span>
                           </div>
                         </div>
-                        <div class="col-12 col-sm-6 col-lg-3 mb-0 p-0">
-                          <div class="d-flex justify-content-center landBtn text-center" onclick="MPW.switchLanding('importWalletLanding')">
-                            <div class="coinstat-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M33.722 29.626c-5.494 1.373-8.848 6.96-7.475 12.456a10.2 10.2 0 004.679 6.316 10.212 10.212 0 007.778 1.159 10.21 10.21 0 006.317-4.681 10.205 10.205 0 001.156-7.776c-1.372-5.494-6.959-8.847-12.455-7.474zm10.063 14.511a8.77 8.77 0 01-5.433 4.022 8.771 8.771 0 01-6.685-.994 8.778 8.778 0 01-4.024-5.433c-1.182-4.725 1.702-9.529 6.427-10.71a8.832 8.832 0 012.141-.265c3.958 0 7.569 2.684 8.57 6.692a8.776 8.776 0 01-.996 6.688z"></path><path d="M26.835 47.111H10.727v-3.539h13.229a.72.72 0 000-1.439H10.727v-3.46h12.787a.72.72 0 100-1.439H8.292v-3.461h17.216a.718.718 0 100-1.439h-7.512V30.5a.515.515 0 10-1.028 0v1.834h-6.24v-3.423h1.042V30.5a.514.514 0 101.028 0v-1.589h1.671V30.5a.514.514 0 101.028 0v-1.589h14.946a.72.72 0 100-1.439h-4.227v-10.61c0-1.086.136-2.098.355-3.031a9.03 9.03 0 001.901.037c1.952-.177 3.519-1.027 4.527-2.46C35.914 7.268 34.3.841 34.229.569a.718.718 0 00-.857-.521c-.112.025-2.776.646-5.324 2.137-3.532 2.069-5.09 4.802-4.508 7.905a.72.72 0 101.414-.266c-.464-2.477.812-4.624 3.797-6.38 1.605-.945 3.308-1.524 4.237-1.799.117.638.268 1.65.301 2.813.052 1.771-.161 4.271-1.466 6.124-.762 1.081-1.919 1.704-3.44 1.85a7.342 7.342 0 01-1.397-.002c1.253-3.551 3.606-5.621 3.639-5.647a.72.72 0 10-.936-1.094c-.156.133-3.046 2.654-4.317 7.018a.617.617 0 00-.046.129c-.007.027-.008.054-.012.081a14.777 14.777 0 00-.535 3.948v3.502a20.63 20.63 0 00-1.5-1.928c.199-.761.804-3.777-1.522-5.652-3.09-2.491-9.616-1.796-9.892-1.766a.719.719 0 00-.609.926c.12.388 2.883 9.168 8.321 9.168.205 0 .414-.012.626-.038a.72.72 0 00-.174-1.43c-1.896.231-3.704-1.017-5.368-3.71-.819-1.326-1.401-2.698-1.725-3.553a24.135 24.135 0 012.563.002c2.438.137 4.289.663 5.354 1.521 1.149.926 1.27 2.31 1.189 3.25-1.439-1.353-2.536-1.932-2.619-1.975a.719.719 0 10-.659 1.28c.034.018 3.374 1.782 6.015 6.661v4.352H10.007a.72.72 0 00-.72.72v4.142H7.572a.72.72 0 00-.72.72v4.897a.72.72 0 00.72.721h1.716v9.155c0 .398.322.72.72.72h16.828a.72.72 0 10-.001-1.439zM45.188 9.529a.72.72 0 00.721-.72v-.642a.72.72 0 00-1.441 0v.643a.72.72 0 00.72.719zm0 4.407a.72.72 0 00.721-.72v-.642a.72.72 0 00-1.441 0v.642c0 .397.322.72.72.72zm-2.525-2.525h.644a.72.72 0 000-1.439h-.644a.718.718 0 100 1.439zm4.406 0h.643a.72.72 0 100-1.439h-.643a.72.72 0 100 1.439zm-9.245 10.11a.721.721 0 00.721-.72v-.643a.72.72 0 00-1.44 0v.642a.72.72 0 00.719.721zm0 4.405a.72.72 0 00.721-.719v-.642a.72.72 0 10-1.44 0v.642a.72.72 0 00.719.719zm-2.523-2.524h.643a.72.72 0 000-1.44h-.643a.72.72 0 100 1.44zm4.406 0h.643a.72.72 0 000-1.44h-.643a.72.72 0 100 1.44zm-34.7-4.7a.72.72 0 00-.72.72v.642a.72.72 0 001.44 0v-.642a.72.72 0 00-.72-.72zm0 4.406a.72.72 0 00-.72.72v.642a.72.72 0 001.44 0v-.642a.72.72 0 00-.72-.72zm-1.882-1.881h-.642a.72.72 0 100 1.439h.642a.72.72 0 100-1.439zm4.407 1.439a.72.72 0 100-1.439h-.643a.72.72 0 100 1.439h.643z"></path><circle cx="47.213" cy="21.709" r=".92"></circle><circle cx="47.424" cy="30.334" r=".92"></circle><circle cx="5.033" cy="11.611" r=".92"></circle><path d="M19.612 29.966v.536a.514.514 0 101.028 0v-.536a.514.514 0 10-1.028 0zm-6.879 5.193v.759a.514.514 0 001.028 0v-.759a.515.515 0 00-.514-.515.516.516 0 00-.514.515zm-2.49 0v.759a.514.514 0 001.028 0v-.759a.515.515 0 00-.514-.515.516.516 0 00-.514.515zm5.189 0v.241a.514.514 0 001.028 0v-.241a.515.515 0 00-.514-.515.516.516 0 00-.514.515zm17.816 4.022c-.298.103-.597-.061-.717-.354l-.145-.354c-.047-.108-.073-.233.036-.275l3.179-1.313a.608.608 0 01.465 1.123l-2.828 1.173c-.001.002.013-.002.01 0z"></path><path d="M36.024 45.227c-.107.04-.237-.092-.279-.197l-1.68-4.067c-.11-.266-.013-.605.227-.744.022-.017.037-.024.064-.037l3.014-1.241c.997-.411 1.446-1.556 1.031-2.561a1.987 1.987 0 00-2.521-1.114l-.195.082-2.843 1.182a.583.583 0 01-.742-.339l-.147-.355c-.046-.106-.024-.219.086-.263l3.366-1.389c1.621-.668 3.441.143 4.114 1.759a3.21 3.21 0 01-1.592 4.11l-2.499 1.035 1.298 3.146c.125.3-.053.727-.347.847l-.355.146z"></path></svg></div>
-                            Import wallet
-                            <span>Import a PIVX wallet using a Private Key, xpriv, or Seed Phrase.</span>
-                          </div>
-                        </div>
                       </div>
 
 
@@ -282,6 +277,13 @@ <h1 class="pivx-bold-title center-text">
                         </button>
                       </div>
                     </div>
+                    <center>
+                      <br>
+                      <div class="custom-control custom-switch">
+                        <input type="checkbox" class="custom-control-input" id="advancedLandingToggler" onclick="MPW.showAdvancedLanding()">
+                        <label class="custom-control-label" for="advancedLandingToggler">Advanced</label>
+                      </div>
+                    </center>
                   </div>
 
 

diff --git a/scripts/global.js b/scripts/global.js
@@ -2785,22 +2785,21 @@ let switchAdvanceBusy = false;
  * Show the advanced elements on the landing page
  */
 export function showAdvancedLanding() {
+    const advancedToggle = document.getElementById('advancedLandingToggler');
     if (!switchAdvanceBusy) {
         const createDiv = document.getElementById('createDiv');
 
         const vanityCol = document.getElementById('vanityCol');
         const vanityDiv = document.getElementById('vanityDiv');
         const ledgerCol = document.getElementById('ledgerCol');
         const ledgerDiv = document.getElementById('ledgerDiv');
-        const textAdvanced = document.getElementById('textAdvanced');
 
         // Animation time in the css
         const aniTime = 300;
 
         if (advancedMode) {
             switchAdvanceBusy = true;
-            advancedMode = false;
-            textAdvanced.innerHTML = 'Advanced';
+            advancedToggle.checked = advancedMode = false;
 
             vanityDiv.style.opacity = 0;
             ledgerDiv.style.opacity = 0;
@@ -2838,8 +2837,7 @@ export function showAdvancedLanding() {
             }, aniTime);
         } else {
             switchAdvanceBusy = true;
-            advancedMode = true;
-            textAdvanced.innerHTML = 'Simple';
+            advancedToggle.checked = advancedMode = true;
 
             setTimeout(() => {
                 vanityDiv.classList.remove('p-0');
@@ -2872,6 +2870,8 @@ export function showAdvancedLanding() {
             ledgerDiv.style.width = createDiv.scrollWidth + 'px';
             ledgerDiv.style.height = createDiv.scrollHeight + 'px';
         }
+    } else {
+        advancedToggle.checked = advancedMode;
     }
 }