UI enhancements

css/main.css

@@ -25,7 +25,6 @@ body {
   scrollbar-gutter: stable;
   color: rgba(var(--text-color), 1);
   background-color: rgba(var(--background-color), 1);
-  transition: background-color 0.3s;
   --dark-red: #d40e1e;
   --red: #f50000;
   --kinda-pink: #e40273;
@@ -608,7 +607,6 @@ h3 {
   height: 100%;
   width: 100%;
   background-color: rgba(var(--foreground-color), 1);
-  transition: background-color 0.3s;
 }
 
 #pages_container {
@@ -647,10 +645,7 @@ h3 {
   border-radius: 0.3rem;
   text-align: center;
 }
-.nav-item .icon {
-  transition: transform 0.2s;
-}
-.nav-item__title {
+.nav-item .icon, .nav-item__title {
   transition: opacity 0.2s, transform 0.2s;
 }
 .nav-item--active {
@@ -667,6 +662,11 @@ h3 {
   background: var(--accent-color);
   border-radius: 1rem 1rem 0 0;
   z-index: 1;
+  view-transition-name: indicator;
+}
+
+::view-transition {
+  transition: 0.3s;
 }
 
 #fix_invalid_button {
@@ -1261,6 +1261,9 @@ legend,
     width: calc(100vw - 2rem);
     flex-wrap: wrap;
   }
+  #pagination_wrapper:empty {
+    display: none !important;
+  }
 }
 @media screen and (min-width: 40rem) {
   sm-popup {

css/main.scss

@@ -25,7 +25,6 @@ body {
   scrollbar-gutter: stable;
   color: rgba(var(--text-color), 1);
   background-color: rgba(var(--background-color), 1);
-  transition: background-color 0.3s;
   // Accent colors
   --dark-red: #d40e1e;
   --red: #f50000;
@@ -580,7 +579,6 @@ h3 {
   height: 100%;
   width: 100%;
   background-color: rgba(var(--foreground-color), 1);
-  transition: background-color 0.3s;
 }
 #pages_container {
   flex: 1;
@@ -616,9 +614,7 @@ h3 {
   font-size: 0.7rem;
   border-radius: 0.3rem;
   text-align: center;
-  .icon {
-    transition: transform 0.2s;
-  }
+  .icon,
   &__title {
     transition: opacity 0.2s, transform 0.2s;
   }
@@ -636,8 +632,12 @@ h3 {
     background: var(--accent-color);
     border-radius: 1rem 1rem 0 0;
     z-index: 1;
+    view-transition-name: indicator;
   }
 }
+::view-transition {
+  transition: 0.3s;
+}
 
 #fix_invalid_button {
   margin-bottom: 1rem !important;
@@ -1204,6 +1204,9 @@ legend,
     transform: translateX(-50%);
     width: calc(100vw - 2rem);
     flex-wrap: wrap;
+    &:empty {
+      display: none !important;
+    }
   }
 }
 @media screen and (min-width: 40rem) {

index.html

@@ -54,7 +54,7 @@
                         routeTo(window.location.hash, { firstLoad: true })
                     }).catch(e => {
                         console.error(e)
-                        routeTo(window.location.hash, { firstLoad: true, smartContractUnavailable: true })
+                        routeTo(window.location.hash, { firstLoad: true, smartContractsUnavailable: true })
                     }).finally(() => {
                         loader(false)
                     })
@@ -1178,7 +1178,7 @@
 
         let tempData
         async function routeTo(targetPage, options = {}) {
-            const { firstLoad, hashChange, smartContractUnavailable = false } = options
+            const { firstLoad, hashChange, smartContractsUnavailable = false } = options
             let pageId
             let params = {}
             let searchParams
@@ -1475,12 +1475,40 @@
                     }
                     break
             }
+            let previousActiveElement = getRef('main_navbar').querySelector('.nav-item--active')
+            const currentActiveElement = document.querySelector(`.nav-item[href="#/${pageId}"]`)
+            if (document.startViewTransition) {
+                document.startViewTransition(() => {
+                    if (previousActiveElement) {
+                        previousActiveElement.classList.remove('nav-item--active');
+                        previousActiveElement.querySelector('.nav-item__indicator')?.remove()
+                    }
+                    if (currentActiveElement) {
+                        if (getRef('main_navbar').classList.contains('hidden')) {
+                            getRef('main_navbar').classList.remove('hide-away')
+                            getRef('main_navbar').classList.remove('hidden')
+                        }
+                        getRef('main_header').classList.remove('hidden')
+                        currentActiveElement.classList.add('nav-item--active')
+                        currentActiveElement.append(createElement('div', { className: 'nav-item__indicator' }));
+                    } else {
+                        if (!getRef('main_navbar').classList.contains('hidden')) {
+                            getRef('main_navbar').classList.add('hide-away')
+                            getRef('main_navbar').classList.add('hidden')
+                            getRef('main_header').classList.add('hidden')
+                        }
+                    }
+                    if (pagesData.lastPage !== pageId) {
+                        document.querySelectorAll('.page').forEach(page => page.classList.add('hidden'))
+                        getRef(pageId).classList.remove('hidden')
+                        pagesData.lastPage = pageId
+                    }
+                })
+            } else {
                 const animOptions = {
                     duration: 100,
                     fill: 'forwards',
                 }
-            let previousActiveElement = getRef('main_navbar').querySelector('.nav-item--active')
-            const currentActiveElement = document.querySelector(`.nav-item[href="#/${pageId}"]`)
                 if (currentActiveElement) {
                     if (getRef('main_navbar').classList.contains('hidden')) {
                         getRef('main_navbar').classList.remove('hide-away')
@@ -1570,6 +1598,7 @@
                     getRef(pageId).animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300, fill: 'forwards', easing: 'ease' })
                     pagesData.lastPage = pageId
                 }
+            }
             document.querySelectorAll('sm-input[data-flo-address]').forEach(input => input.customValidation = floCrypto.validateFloID)
             document.querySelectorAll('sm-input[data-private-key]').forEach(input => input.customValidation = floCrypto.getPubKeyHex)
         }