explorer: update design of version commit hash and build date

dusk-network · Jun 13, 2024 · b0f5559 · b0f5559
1 parent b294ab8
commit b0f5559
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 79 deletions.
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/Footer.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/Footer.spec.js.snap
@@ -6,16 +6,24 @@ exports[`Footer > renders the Footer component 1`] = `
     class="footer"
   >
     <div
-      class="footer__content"
+      class="footer__copyright"
     >
-      <div
-        class="footer__copyright"
-      >
-        <span>
-          © 2018 - 2024 Dusk Network B.V. All Rights Reserved.
-        </span>
-      </div>
+      <span>
+        © 2018 - 2024 Dusk Network B.V. All Rights Reserved.
+      </span>
        
+      <span>
+        Explorer v
+        0.0.0
+         (
+        hash1234 2024-01-12
+        )
+      </span>
+    </div>
+     
+    <div
+      class="footer__links-test"
+    >
       <div
         class="footer__links"
       >
@@ -25,15 +33,13 @@ exports[`Footer > renders the Footer component 1`] = `
         >
           Privacy policy
         </a>
-        <!--&lt;Anchor&gt;-->
          
         <a
           class="dusk-anchor dusk-anchor--off-surface footer__links-link"
           href="https://dusk.network/terms-of-use"
         >
           Terms of use
         </a>
-        <!--&lt;Anchor&gt;-->
       </div>
        
       <a
@@ -45,31 +51,15 @@ exports[`Footer > renders the Footer component 1`] = `
             media="(max-width:768px)"
             srcset="/some-base-path/dusk_logo_icon.svg"
           />
-          <!--&lt;AppSource&gt;-->
            
           <img
             alt="Dusk Logo"
             class="footer__logo-image"
             sizes="(max-width:768px) 20px, 86px"
             src="/some-base-path/dusk_logo.svg"
           />
-          <!--&lt;AppImage&gt;-->
         </picture>
       </a>
-      <!--&lt;Anchor&gt;-->
-      <!--&lt;AppAnchor&gt;-->
-    </div>
-     
-    <div
-      class="footer__build-info"
-    >
-      <span>
-        Explorer v
-        0.0.0
-         (
-        hash1234 2024-01-12
-        )
-      </span>
     </div>
   </div>
 </div>

diff --git a/explorer/src/lib/components/footer/Footer.css b/explorer/src/lib/components/footer/Footer.css
@@ -1,26 +1,27 @@
 .footer {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   padding: 1.25rem 0;
   font-size: 0.875rem;
-  align-items: flex-end;
-  gap: 0.625rem;
+  justify-content: space-between;
 }
 
-.footer__content {
+.footer__copyright {
   display: flex;
+  gap: 0.625rem;
+  order: 1;
 }
 
-.footer__copyright {
-  order: 1;
+.footer__links-test {
+  display: flex;
+  gap: 1.25rem;
+  order: 2;
 }
 
 .footer__links {
-  padding-left: 1.25rem;
-  padding-right: 1.875rem;
   display: flex;
   gap: 1.25rem;
-  order: 2;
+  order: 1;
 }
 
 .footer__links-link {
@@ -37,19 +38,21 @@
 }
 
 .footer__logo {
-  order: 3;
+  order: 2;
 }
 
 .footer__logo-image {
   width: 5.375rem;
 }
 
-@media (max-width: 768px) {
-  .footer {
-    align-items: center;
+@media (max-width: 1200px) {
+  .footer__copyright {
+    flex-direction: column;
   }
+}
 
-  .footer__content {
+@media (max-width: 768px) {
+  .footer {
     flex-wrap: wrap;
     justify-content: space-between;
     gap: 0.625rem;
@@ -59,7 +62,13 @@
     order: 3;
     width: 100%;
     display: flex;
-    justify-content: flex-end;
+    flex-direction: column;
+  }
+
+  .footer__links-test {
+    justify-content: space-between;
+    width: 100%;
+    padding: 0;
   }
 
   .footer__links {

diff --git a/explorer/src/lib/components/footer/Footer.svelte b/explorer/src/lib/components/footer/Footer.svelte
@@ -7,10 +7,15 @@
 </script>
 
 <div class="footer">
-  <div class="footer__content">
-    <div class="footer__copyright">
-      <span>© 2018 - 2024 Dusk Network B.V. All Rights Reserved.</span>
-    </div>
+  <div class="footer__copyright">
+    <span>© 2018 - 2024 Dusk Network B.V. All Rights Reserved.</span>
+    <span
+      >Explorer v{import.meta.env.APP_VERSION} ({import.meta.env
+        .APP_BUILD_INFO})</span
+    >
+  </div>
+
+  <div class="footer__links-test">
     <div class="footer__links">
       <Anchor
         onSurface={false}
@@ -35,10 +40,4 @@
       </picture>
     </AppAnchor>
   </div>
-  <div class="footer__build-info">
-    <span
-      >Explorer v{import.meta.env.APP_VERSION} ({import.meta.env
-        .APP_BUILD_INFO})</span
-    >
-  </div>
 </div>
diff --git a/explorer/src/routes/__tests__/__snapshots__/layout.spec.js.snap b/explorer/src/routes/__tests__/__snapshots__/layout.spec.js.snap
@@ -145,44 +145,56 @@ exports[`Main layout > should render the app's main layout 1`] = `
         <span>
           © 2018 - 2024 Dusk Network B.V. All Rights Reserved.
         </span>
+         
+        <span>
+          Explorer v
+          0.0.0
+           (
+          hash1234 2024-01-12
+          )
+        </span>
       </div>
        
       <div
-        class="footer__links"
+        class="footer__links-test"
       >
-        <a
-          class="dusk-anchor dusk-anchor--off-surface footer__links-link"
-          href="https://dusk.network/privacy-policy"
+        <div
+          class="footer__links"
         >
-          Privacy policy
-        </a>
+          <a
+            class="dusk-anchor dusk-anchor--off-surface footer__links-link"
+            href="https://dusk.network/privacy-policy"
+          >
+            Privacy policy
+          </a>
+           
+          <a
+            class="dusk-anchor dusk-anchor--off-surface footer__links-link"
+            href="https://dusk.network/terms-of-use"
+          >
+            Terms of use
+          </a>
+        </div>
          
         <a
-          class="dusk-anchor dusk-anchor--off-surface footer__links-link"
-          href="https://dusk.network/terms-of-use"
+          class="dusk-anchor dusk-anchor--on-surface footer__logo"
+          href="https://dusk.network"
         >
-          Terms of use
+          <picture>
+            <source
+              media="(max-width:768px)"
+              srcset="/some-base-path/dusk_logo_icon.svg"
+            />
+             
+            <img
+              alt="Dusk Logo"
+              class="footer__logo-image"
+              sizes="(max-width:768px) 20px, 86px"
+              src="/some-base-path/dusk_logo.svg"
+            />
+          </picture>
         </a>
       </div>
-       
-      <a
-        class="dusk-anchor dusk-anchor--on-surface footer__logo"
-        href="https://dusk.network"
-      >
-        <picture>
-          <source
-            media="(max-width:768px)"
-            srcset="/some-base-path/dusk_logo_icon.svg"
-          />
-           
-          <img
-            alt="Dusk Logo"
-            class="footer__logo-image"
-            sizes="(max-width:768px) 20px, 86px"
-            src="/some-base-path/dusk_logo.svg"
-          />
-        </picture>
-      </a>
     </div>
   </footer>