Finilazing project MVP

Author: migbash

src/main/resources/static/images/Vector 7.svg

@@ -7,7 +7,7 @@ var path_url = document.URL;
 if (path_url.includes('/block_explorer')) {
 
     // -------------------------
-    // Page UI/UX Changes
+    // Initial Page UI/UX Changes
     // -------------------------
 
     document.getElementsByTagName('footer')[0].getElementsByTagName('a')[1].style.color = '#00A3FF'
@@ -39,7 +39,7 @@ if (path_url.includes('/block_explorer')) {
 } else if (path_url.includes('/wallet')) {
 
     // -------------------------
-    // Page UI/UX Changes
+    // Initial Page UI/UX Changes
     // -------------------------
 
     document.getElementById('_btn_div_action_txt').innerHTML = `<p> hello </p>`
@@ -134,6 +134,12 @@ function copyClipboard(x) {
 }
 
 function switchLayout() {
+
+    // Change Button Styles
+    document.getElementById('simple_view_btn').classList.toggle('selected_dark')
+    document.getElementById('visual_view_btn').classList.toggle('selected_dark')
+
+    // Switch - Show/Hide Layouts
     document.getElementById('simple_view_div').classList.toggle('enabled')
     document.getElementById('visual_view_div').classList.toggle('enabled')
 }

src/main/resources/static/js/main.js

@@ -7,7 +7,8 @@
 
     &:hover, &:focus, &:active
         background-color: #708FFE;
-        color: $primary_light;  
+        color: $primary_light;
+        outline: none;
 
 .button_main_light
     @include button_struct($primary_light, $secondary_dark);
@@ -91,4 +92,8 @@
 
 .selected
     background-color: $primary_light;
-    color: #708FFE;
+    color: $secondary_light_v2;
+
+.selected_dark
+    background-color: $secondary_light_v2;
+    color: $primary_light;

src/main/resources/static/styles/main.css

@@ -34,7 +34,7 @@ <h4>Block Explorer</h4></span>
           </svg><span class="p-2" style="width: 35%; font-size: 12px;">Here you can find all of the details and in-depth information about the blockmatrix and discover all of the available RESTful APIs availble on the network.</span>
         </div>
         <div class="container m-2">
-          <button class="button_main" id="simple_view_btn" type="button">Simple</button>
+          <button class="button_main selected_dark" id="simple_view_btn" type="button">Simple</button>
           <button class="button_main" id="visual_view_btn" type="button">Visual</button>
         </div>
       </div>

src/main/resources/static/styles/main.css.map

@@ -16,7 +16,7 @@ mixin header_page(headText, img_src, info_txt1)
         //- Switch Between Visual & Simple Blockexplorer
         if (headText == "Block Explorer")    
             .container.m-2
-                button#simple_view_btn.button_main(type="button") Simple
+                button#simple_view_btn.button_main(type="button").selected_dark Simple
                 button#visual_view_btn.button_main(type="button") Visual
 
 //- ----------------------