Repository: dusk-network/rusk (language: rust)

Issue:
web-wallet: Wrong size of network status icon
<img width="979" alt="Screenshot 2024-12-10 at 20 15 40" src="https://github.com/user-attachments/assets/2bd92e78-b443-4e54-bc41-6bf8bebce85a">

Should be the same as the buttons on the right.


Discussion / hints:
The icons were actually of different sizes, but in width (by a very tiny amount) and not in height.
The discrepancy in height we see above is because the gear icon is contained in an anchor with an extra padding.

@laremas said that we should leave them as they are for now, as the one on the left is a status icon, while the one on the right is an interactive element: we'll codify better these cases when we define our design language properly.

I'll make a fix for the width, and while I'm there I'll remove an extra container and some unnecessary generated css module classes (as we use BEM conventions and not css modules).

Fix patch:
diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
index f4220430a6..a5d285e6d1 100644
--- a/web-wallet/CHANGELOG.md
+++ b/web-wallet/CHANGELOG.md
@@ -20,6 +20,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- Fix width discrepancy in footer icons [#3163]
+
 ## [1.3.0] - 2025-01-28
 
 ### Added
@@ -544,6 +546,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#3129]: https://github.com/dusk-network/rusk/issues/3129
 [#3156]: https://github.com/dusk-network/rusk/issues/3156
 [#3160]: https://github.com/dusk-network/rusk/issues/3160
+[#3163]: https://github.com/dusk-network/rusk/issues/3163
 [#3164]: https://github.com/dusk-network/rusk/issues/3164
 [#3178]: https://github.com/dusk-network/rusk/issues/3178
 [#3179]: https://github.com/dusk-network/rusk/issues/3179
diff --git a/web-wallet/src/routes/(app)/dashboard/+layout.svelte b/web-wallet/src/routes/(app)/dashboard/+layout.svelte
index ac9c5fe0a4..0bb11c9a8e 100644
--- a/web-wallet/src/routes/(app)/dashboard/+layout.svelte
+++ b/web-wallet/src/routes/(app)/dashboard/+layout.svelte
@@ -91,141 +91,138 @@
     <slot />
   </div>
   <footer class="footer">
-    <nav class="footer__navigation">
-      <div class="footer__network-status">
-        <Icon
-          className="footer__network-status-icon footer__network-status-icon--{iconVariant}"
-          data-tooltip-disabled={!syncStatus.error}
-          data-tooltip-id="main-tooltip"
-          data-tooltip-text={syncStatus.error?.message}
-          data-tooltip-type="error"
-          path={networkStatusIconPath}
-          size="large"
-        />
-        <div class="footer__network-message">
-          {#if syncStatusLabel && !syncStatus.isInProgress}
-            <span>{syncStatusLabel}</span>
-          {/if}
-          {#if syncStatus.isInProgress}
-            <span>
-              {syncStatusLabel} –
-              <b
-                >Syncing... {syncStatus.progress
-                  ? `${(syncStatus.progress * 100).toFixed(0)}%`
-                  : ""}</b
-              >
-            </span>
-            {#if syncStatus.progress}
-              <SyncBar
-                from={syncStatus.from}
-                last={syncStatus.last}
-                progress={syncStatus.progress}
-              />
-            {/if}
+    <div class="footer__network-status">
+      <Icon
+        className="footer__network-status-icon footer__network-status-icon--{iconVariant}"
+        data-tooltip-disabled={!syncStatus.error}
+        data-tooltip-id="main-tooltip"
+        data-tooltip-text={syncStatus.error?.message}
+        data-tooltip-type="error"
+        path={networkStatusIconPath}
+        size="large"
+      />
+      <div class="footer__network-message">
+        {#if syncStatusLabel && !syncStatus.isInProgress}
+          <span>{syncStatusLabel}</span>
+        {/if}
+        {#if syncStatus.isInProgress}
+          <span>
+            {syncStatusLabel} –
+            <b
+              >Syncing... {syncStatus.progress
+                ? `${(syncStatus.progress * 100).toFixed(0)}%`
+                : ""}</b
+            >
+          </span>
+          {#if syncStatus.progress}
+            <SyncBar
+              from={syncStatus.from}
+              last={syncStatus.last}
+              progress={syncStatus.progress}
+            />
           {/if}
-        </div>
-      </div>
-      <div class="footer__actions">
-        {#if syncStatus.error}
-          <Button
-            aria-label="Retry synchronization"
-            className="footer__actions-button footer__actions-button--retry"
-            data-tooltip-id="main-tooltip"
-            data-tooltip-text="Retry synchronization"
-            icon={{ path: mdiRestore, size: "large" }}
-            on:click={() => {
-              walletStore.sync();
-            }}
-            variant="secondary"
-          />
         {/if}
-        <AppAnchorButton
-          variant="secondary"
-          className="footer__actions-button footer__actions-button--settings"
-          icon={{ path: mdiCogOutline, size: "large" }}
-          href="/settings"
-          aria-label="Settings"
+      </div>
+    </div>
+    <div class="footer__actions">
+      {#if syncStatus.error}
+        <Button
+          aria-label="Retry synchronization"
+          className="footer__actions-button footer__actions-button--retry"
           data-tooltip-id="main-tooltip"
-          data-tooltip-text="Settings"
+          data-tooltip-text="Retry synchronization"
+          icon={{ path: mdiRestore, size: "large" }}
+          on:click={() => {
+            walletStore.sync();
+          }}
+          variant="secondary"
         />
-      </div>
-    </nav>
+      {/if}
+      <AppAnchorButton
+        variant="secondary"
+        className="footer__actions-button footer__actions-button--settings"
+        icon={{ path: mdiCogOutline, size: "large" }}
+        href="/settings"
+        aria-label="Settings"
+        data-tooltip-id="main-tooltip"
+        data-tooltip-text="Settings"
+      />
+    </div>
   </footer>
 </section>
 
 <style lang="postcss">
-  .dashboard {
-    position: relative;
-    display: flex;
-    align-content: space-between;
-    gap: 1.375rem;
-    flex: 1;
-    flex-direction: column;
-    max-height: 100%;
-  }
-
-  .dashboard-content {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 1.375rem;
-    overflow-y: auto;
-    flex: 1;
-  }
-
-  .footer {
-    width: 100%;
-
-    &__navigation {
-      display: flex;
-      justify-content: space-between;
-      gap: 0.75rem;
-      align-items: center;
-      width: 100%;
-    }
-
-    &__actions {
+  :global {
+    .dashboard {
+      position: relative;
       display: flex;
-      flex-direction: row;
-      gap: 0.75em;
-      align-items: center;
+      align-content: space-between;
+      gap: 1.375rem;
+      flex: 1;
+      flex-direction: column;
+      max-height: 100%;
     }
 
-    &__network-status {
-      display: flex;
-      align-items: center;
-      gap: var(--small-gap);
-      line-height: 150%;
-      text-transform: capitalize;
+    .dashboard-content {
       width: 100%;
-    }
-
-    &__network-message {
       display: flex;
       flex-direction: column;
-      align-items: flex-start;
-      width: 100%;
+      gap: 1.375rem;
+      overflow-y: auto;
+      flex: 1;
     }
 
-    :global(.footer__network-status-icon) {
-      border-radius: 50%;
-      padding: 0.2em;
-    }
-
-    :global(.footer__network-status-icon--error) {
-      cursor: help;
-      color: var(--on-error-color);
-      background: var(--error-color);
-    }
-
-    :global(.footer__network-status-icon--success) {
-      color: var(--on-success-color);
-      background: var(--success-color);
-    }
+    .footer {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      gap: 0.75rem;
+      align-items: center;
 
-    :global(.footer__network-status-icon--warning) {
-      color: var(--on-warning-color);
-      background: var(--warning-color);
+      &__actions {
+        display: flex;
+        flex-direction: row;
+        gap: 0.75em;
+        align-items: center;
+      }
+
+      &__network-status {
+        display: flex;
+        height: 100%;
+        align-items: center;
+        gap: var(--small-gap);
+        line-height: 150%;
+        text-transform: capitalize;
+        flex: 1;
+      }
+
+      &__network-message {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        flex: 1;
+      }
+
+      .footer__network-status-icon {
+        border-radius: 50%;
+        padding: 0.2em;
+      }
+
+      .footer__network-status-icon--error {
+        cursor: help;
+        color: var(--on-error-color);
+        background: var(--error-color);
+      }
+
+      .footer__network-status-icon--success {
+        color: var(--on-success-color);
+        background: var(--success-color);
+      }
+
+      .footer__network-status-icon--warning {
+        color: var(--on-warning-color);
+        background: var(--warning-color);
+      }
     }
   }
 </style>


Test patch:
diff --git a/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap b/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap
index c8d5556c7d..43361258da 100644
--- a/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap
+++ b/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/layout.spec.js.snap
@@ -3,10 +3,10 @@
 exports[`Dashboard Layout > should render the dashboard layout 1`] = `
 <div>
   <section
-    class="dashboard svelte-krh9k4"
+    class="dashboard"
   >
     <div
-      class="dashboard-content svelte-krh9k4"
+      class="dashboard-content"
     >
       <h2
         class="sr-only"
@@ -162,66 +162,62 @@ exports[`Dashboard Layout > should render the dashboard layout 1`] = `
     </div>
      
     <footer
-      class="footer svelte-krh9k4"
+      class="footer"
     >
-      <nav
-        class="footer__navigation svelte-krh9k4"
+      <div
+        class="footer__network-status"
       >
+        <svg
+          class="dusk-icon dusk-icon--size--large footer__network-status-icon footer__network-status-icon--success"
+          data-tooltip-disabled="true"
+          data-tooltip-id="main-tooltip"
+          data-tooltip-type="error"
+          role="graphics-symbol"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z"
+          />
+        </svg>
+        
+         
         <div
-          class="footer__network-status svelte-krh9k4"
+          class="footer__network-message"
+        >
+          <span>
+            Dusk unknown
+          </span>
+           
+        </div>
+      </div>
+       
+      <div
+        class="footer__actions"
+      >
+         
+        <a
+          aria-disabled="false"
+          aria-label="Settings"
+          class="dusk-anchor dusk-anchor--on-surface dusk-anchor-button dusk-anchor-button--variant--secondary dusk-anchor-button--size--default dusk-icon-button footer__actions-button footer__actions-button--settings"
+          data-tooltip-id="main-tooltip"
+          data-tooltip-text="Settings"
+          href="/some-base-path/settings"
         >
           <svg
-            class="dusk-icon dusk-icon--size--large footer__network-status-icon footer__network-status-icon--success"
-            data-tooltip-disabled="true"
-            data-tooltip-id="main-tooltip"
-            data-tooltip-type="error"
+            class="dusk-icon dusk-icon--size--large dusk-anchor-button__icon"
             role="graphics-symbol"
             viewBox="0 0 24 24"
           >
             <path
-              d="M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z"
+              d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z"
             />
           </svg>
           
            
-          <div
-            class="footer__network-message svelte-krh9k4"
-          >
-            <span>
-              Dusk unknown
-            </span>
-             
-          </div>
-        </div>
-         
-        <div
-          class="footer__actions svelte-krh9k4"
-        >
-           
-          <a
-            aria-disabled="false"
-            aria-label="Settings"
-            class="dusk-anchor dusk-anchor--on-surface dusk-anchor-button dusk-anchor-button--variant--secondary dusk-anchor-button--size--default dusk-icon-button footer__actions-button footer__actions-button--settings"
-            data-tooltip-id="main-tooltip"
-            data-tooltip-text="Settings"
-            href="/some-base-path/settings"
-          >
-            <svg
-              class="dusk-icon dusk-icon--size--large dusk-anchor-button__icon"
-              role="graphics-symbol"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z"
-              />
-            </svg>
-            
-             
-            
-            
-          </a>
-        </div>
-      </nav>
+          
+          
+        </a>
+      </div>
     </footer>
   </section>
 </div>
@@ -229,10 +225,10 @@ exports[`Dashboard Layout > should render the dashboard layout 1`] = `
 
 exports[`Dashboard Layout > should render the dashboard layout and show a throbber while balance is loading 1`] = `
 <section
-  class="dashboard svelte-krh9k4"
+  class="dashboard"
 >
   <div
-    class="dashboard-content svelte-krh9k4"
+    class="dashboard-content"
   >
     <h2
       class="sr-only"
@@ -388,66 +384,62 @@ exports[`Dashboard Layout > should render the dashboard layout and show a throbb
   </div>
    
   <footer
-    class="footer svelte-krh9k4"
+    class="footer"
   >
-    <nav
-      class="footer__navigation svelte-krh9k4"
+    <div
+      class="footer__network-status"
     >
+      <svg
+        class="dusk-icon dusk-icon--size--large footer__network-status-icon footer__network-status-icon--success"
+        data-tooltip-disabled="true"
+        data-tooltip-id="main-tooltip"
+        data-tooltip-type="error"
+        role="graphics-symbol"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z"
+        />
+      </svg>
+      
+       
       <div
-        class="footer__network-status svelte-krh9k4"
+        class="footer__network-message"
+      >
+        <span>
+          Dusk unknown
+        </span>
+         
+      </div>
+    </div>
+     
+    <div
+      class="footer__actions"
+    >
+       
+      <a
+        aria-disabled="false"
+        aria-label="Settings"
+        class="dusk-anchor dusk-anchor--on-surface dusk-anchor-button dusk-anchor-button--variant--secondary dusk-anchor-button--size--default dusk-icon-button footer__actions-button footer__actions-button--settings"
+        data-tooltip-id="main-tooltip"
+        data-tooltip-text="Settings"
+        href="/some-base-path/settings"
       >
         <svg
-          class="dusk-icon dusk-icon--size--large footer__network-status-icon footer__network-status-icon--success"
-          data-tooltip-disabled="true"
-          data-tooltip-id="main-tooltip"
-          data-tooltip-type="error"
+          class="dusk-icon dusk-icon--size--large dusk-anchor-button__icon"
           role="graphics-symbol"
           viewBox="0 0 24 24"
         >
           <path
-            d="M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z"
+            d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z"
           />
         </svg>
         
          
-        <div
-          class="footer__network-message svelte-krh9k4"
-        >
-          <span>
-            Dusk unknown
-          </span>
-           
-        </div>
-      </div>
-       
-      <div
-        class="footer__actions svelte-krh9k4"
-      >
-         
-        <a
-          aria-disabled="false"
-          aria-label="Settings"
-          class="dusk-anchor dusk-anchor--on-surface dusk-anchor-button dusk-anchor-button--variant--secondary dusk-anchor-button--size--default dusk-icon-button footer__actions-button footer__actions-button--settings"
-          data-tooltip-id="main-tooltip"
-          data-tooltip-text="Settings"
-          href="/some-base-path/settings"
-        >
-          <svg
-            class="dusk-icon dusk-icon--size--large dusk-anchor-button__icon"
-            role="graphics-symbol"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z"
-            />
-          </svg>
-          
-           
-          
-          
-        </a>
-      </div>
-    </nav>
+        
+        
+      </a>
+    </div>
   </footer>
 </section>
 `;
@@ -455,10 +447,10 @@ exports[`Dashboard Layout > should render the dashboard layout and show a throbb
 exports[`Dashboard Layout > should render the dashboard layout in the error state 1`] = `
 <div>
   <section
-    class="dashboard svelte-krh9k4"
+    class="dashboard"
   >
     <div
-      class="dashboard-content svelte-krh9k4"
+      class="dashboard-content"
     >
       <h2
         class="sr-only"
@@ -614,87 +606,83 @@ exports[`Dashboard Layout > should render the dashboard layout in the error stat
     </div>
      
     <footer
-      class="footer svelte-krh9k4"
+      class="footer"
     >
-      <nav
-        class="footer__navigation svelte-krh9k4"
+      <div
+        class="footer__network-status"
       >
+        <svg
+          class="dusk-icon dusk-icon--size--large footer__network-status-icon footer__network-status-icon--error"
+          data-tooltip-disabled="false"
+          data-tooltip-id="main-tooltip"
+          data-tooltip-text=""
+          data-tooltip-type="error"
+          role="graphics-symbol"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"
+          />
+        </svg>
+        
+         
         <div
-          class="footer__network-status svelte-krh9k4"
+          class="footer__network-message"
+        >
+          <span>
+            Dusk unknown - Sync Failed
+          </span>
+           
+        </div>
+      </div>
+       
+      <div
+        class="footer__actions"
+      >
+        <button
+          aria-label="Retry synchronization"
+          class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--default dusk-icon-button footer__actions-button footer__actions-button--retry"
+          data-tooltip-id="main-tooltip"
+          data-tooltip-text="Retry synchronization"
+          type="button"
         >
           <svg
-            class="dusk-icon dusk-icon--size--large footer__network-status-icon footer__network-status-icon--error"
-            data-tooltip-disabled="false"
-            data-tooltip-id="main-tooltip"
-            data-tooltip-text=""
-            data-tooltip-type="error"
+            class="dusk-icon dusk-icon--size--large dusk-button__icon"
             role="graphics-symbol"
             viewBox="0 0 24 24"
           >
             <path
-              d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"
+              d="M13,3A9,9 0 0,0 4,12H1L4.89,15.89L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3Z"
             />
           </svg>
           
            
-          <div
-            class="footer__network-message svelte-krh9k4"
-          >
-            <span>
-              Dusk unknown - Sync Failed
-            </span>
-             
-          </div>
-        </div>
+          
+        </button>
          
-        <div
-          class="footer__actions svelte-krh9k4"
+        <a
+          aria-disabled="false"
+          aria-label="Settings"
+          class="dusk-anchor dusk-anchor--on-surface dusk-anchor-button dusk-anchor-button--variant--secondary dusk-anchor-button--size--default dusk-icon-button footer__actions-button footer__actions-button--settings"
+          data-tooltip-id="main-tooltip"
+          data-tooltip-text="Settings"
+          href="/some-base-path/settings"
         >
-          <button
-            aria-label="Retry synchronization"
-            class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--default dusk-icon-button footer__actions-button footer__actions-button--retry"
-            data-tooltip-id="main-tooltip"
-            data-tooltip-text="Retry synchronization"
-            type="button"
+          <svg
+            class="dusk-icon dusk-icon--size--large dusk-anchor-button__icon"
+            role="graphics-symbol"
+            viewBox="0 0 24 24"
           >
-            <svg
-              class="dusk-icon dusk-icon--size--large dusk-button__icon"
-              role="graphics-symbol"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M13,3A9,9 0 0,0 4,12H1L4.89,15.89L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3Z"
-              />
-            </svg>
-            
-             
-            
-          </button>
+            <path
+              d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z"
+            />
+          </svg>
+          
            
-          <a
-            aria-disabled="false"
-            aria-label="Settings"
-            class="dusk-anchor dusk-anchor--on-surface dusk-anchor-button dusk-anchor-button--variant--secondary dusk-anchor-button--size--default dusk-icon-button footer__actions-button footer__actions-button--settings"
-            data-tooltip-id="main-tooltip"
-            data-tooltip-text="Settings"
-            href="/some-base-path/settings"
-          >
-            <svg
-              class="dusk-icon dusk-icon--size--large dusk-anchor-button__icon"
-              role="graphics-symbol"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z"
-              />
-            </svg>
-            
-             
-            
-            
-          </a>
-        </div>
-      </nav>
+          
+          
+        </a>
+      </div>
     </footer>
   </section>
 </div>
@@ -702,10 +690,10 @@ exports[`Dashboard Layout > should render the dashboard layout in the error stat
 
 exports[`Dashboard Layout > should render the dashboard layout in the sync state when no progress is reported 1`] = `
 <section
-  class="dashboard svelte-krh9k4"
+  class="dashboard"
 >
   <div
-    class="dashboard-content svelte-krh9k4"
+    class="dashboard-content"
   >
     <h2
       class="sr-only"
@@ -861,74 +849,70 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
   </div>
    
   <footer
-    class="footer svelte-krh9k4"
+    class="footer"
   >
-    <nav
-      class="footer__navigation svelte-krh9k4"
+    <div
+      class="footer__network-status"
     >
+      <svg
+        class="dusk-icon dusk-icon--size--large footer__network-status-icon footer__network-status-icon--warning"
+        data-tooltip-disabled="true"
+        data-tooltip-id="main-tooltip"
+        data-tooltip-type="error"
+        role="graphics-symbol"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M6,2H18V8H18V8L14,12L18,16V16H18V22H6V16H6V16L10,12L6,8V8H6V2M16,16.5L12,12.5L8,16.5V20H16V16.5M12,11.5L16,7.5V4H8V7.5L12,11.5M10,6H14V6.75L12,8.75L10,6.75V6Z"
+        />
+      </svg>
+      
+       
       <div
-        class="footer__network-status svelte-krh9k4"
+        class="footer__network-message"
+      >
+         
+        <span>
+          Dusk unknown
+           –
+            
+          <b>
+            Syncing... 
+            
+          </b>
+        </span>
+         
+        
+      </div>
+    </div>
+     
+    <div
+      class="footer__actions"
+    >
+       
+      <a
+        aria-disabled="false"
+        aria-label="Settings"
+        class="dusk-anchor dusk-anchor--on-surface dusk-anchor-button dusk-anchor-button--variant--secondary dusk-anchor-button--size--default dusk-icon-button footer__actions-button footer__actions-button--settings"
+        data-tooltip-id="main-tooltip"
+        data-tooltip-text="Settings"
+        href="/some-base-path/settings"
       >
         <svg
-          class="dusk-icon dusk-icon--size--large footer__network-status-icon footer__network-status-icon--warning"
-          data-tooltip-disabled="true"
-          data-tooltip-id="main-tooltip"
-          data-tooltip-type="error"
+          class="dusk-icon dusk-icon--size--large dusk-anchor-button__icon"
           role="graphics-symbol"
           viewBox="0 0 24 24"
         >
           <path
-            d="M6,2H18V8H18V8L14,12L18,16V16H18V22H6V16H6V16L10,12L6,8V8H6V2M16,16.5L12,12.5L8,16.5V20H16V16.5M12,11.5L16,7.5V4H8V7.5L12,11.5M10,6H14V6.75L12,8.75L10,6.75V6Z"
+            d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z"
           />
         </svg>
         
          
-        <div
-          class="footer__network-message svelte-krh9k4"
-        >
-           
-          <span>
-            Dusk unknown
-             –
-              
-            <b>
-              Syncing... 
-              
-            </b>
-          </span>
-           
-          
-        </div>
-      </div>
-       
-      <div
-        class="footer__actions svelte-krh9k4"
-      >
-         
-        <a
-          aria-disabled="false"
-          aria-label="Settings"
-          class="dusk-anchor dusk-anchor--on-surface dusk-anchor-button dusk-anchor-button--variant--secondary dusk-anchor-button--size--default dusk-icon-button footer__actions-button footer__actions-button--settings"
-          data-tooltip-id="main-tooltip"
-          data-tooltip-text="Settings"
-          href="/some-base-path/settings"
-        >
-          <svg
-            class="dusk-icon dusk-icon--size--large dusk-anchor-button__icon"
-            role="graphics-symbol"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z"
-            />
-          </svg>
-          
-           
-          
-          
-        </a>
-      </div>
-    </nav>
+        
+        
+      </a>
+    </div>
   </footer>
 </section>
 `;
@@ -936,10 +920,10 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
 exports[`Dashboard Layout > should render the dashboard layout in the sync state with a progress indicator 1`] = `
 <div>
   <section
-    class="dashboard svelte-krh9k4"
+    class="dashboard"
   >
     <div
-      class="dashboard-content svelte-krh9k4"
+      class="dashboard-content"
     >
       <h2
         class="sr-only"
@@ -1095,93 +1079,89 @@ exports[`Dashboard Layout > should render the dashboard layout in the sync state
     </div>
      
     <footer
-      class="footer svelte-krh9k4"
+      class="footer"
     >
-      <nav
-        class="footer__navigation svelte-krh9k4"
+      <div
+        class="footer__network-status"
       >
+        <svg
+          class="dusk-icon dusk-icon--size--large footer__network-status-icon footer__network-status-icon--warning"
+          data-tooltip-disabled="true"
+          data-tooltip-id="main-tooltip"
+          data-tooltip-type="error"
+          role="graphics-symbol"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M6,2H18V8H18V8L14,12L18,16V16H18V22H6V16H6V16L10,12L6,8V8H6V2M16,16.5L12,12.5L8,16.5V20H16V16.5M12,11.5L16,7.5V4H8V7.5L12,11.5M10,6H14V6.75L12,8.75L10,6.75V6Z"
+          />
+        </svg>
+        
+         
         <div
-          class="footer__network-status svelte-krh9k4"
+          class="footer__network-message"
         >
-          <svg
-            class="dusk-icon dusk-icon--size--large footer__network-status-icon footer__network-status-icon--warning"
-            data-tooltip-disabled="true"
-            data-tooltip-id="main-tooltip"
-            data-tooltip-type="error"
-            role="graphics-symbol"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M6,2H18V8H18V8L14,12L18,16V16H18V22H6V16H6V16L10,12L6,8V8H6V2M16,16.5L12,12.5L8,16.5V20H16V16.5M12,11.5L16,7.5V4H8V7.5L12,11.5M10,6H14V6.75L12,8.75L10,6.75V6Z"
-            />
-          </svg>
-          
+           
+          <span>
+            Dusk unknown
+             –
+            
+            <b>
+              Syncing... 
+              50%
+            </b>
+          </span>
            
           <div
-            class="footer__network-message svelte-krh9k4"
+            class="sync-bar svelte-zpfqie"
           >
-             
             <span>
-              Dusk unknown
-               –
-              
-              <b>
-                Syncing... 
-                50%
-              </b>
+              100
             </span>
-             
             <div
-              class="sync-bar svelte-zpfqie"
+              class="dusk-progress-bar"
+              role="progressbar"
             >
-              <span>
-                100
-              </span>
               <div
-                class="dusk-progress-bar"
-                role="progressbar"
-              >
-                <div
-                  class="dusk-progress-bar__filler"
-                  style="width: 0%"
-                />
-              </div>
-              <span>
-                200
-              </span>
+                class="dusk-progress-bar__filler"
+                style="width: 0%"
+              />
             </div>
-            
+            <span>
+              200
+            </span>
           </div>
+          
         </div>
+      </div>
+       
+      <div
+        class="footer__actions"
+      >
          
-        <div
-          class="footer__actions svelte-krh9k4"
+        <a
+          aria-disabled="false"
+          aria-label="Settings"
+          class="dusk-anchor dusk-anchor--on-surface dusk-anchor-button dusk-anchor-button--variant--secondary dusk-anchor-button--size--default dusk-icon-button footer__actions-button footer__actions-button--settings"
+          data-tooltip-id="main-tooltip"
+          data-tooltip-text="Settings"
+          href="/some-base-path/settings"
         >
-           
-          <a
-            aria-disabled="false"
-            aria-label="Settings"
-            class="dusk-anchor dusk-anchor--on-surface dusk-anchor-button dusk-anchor-button--variant--secondary dusk-anchor-button--size--default dusk-icon-button footer__actions-button footer__actions-button--settings"
-            data-tooltip-id="main-tooltip"
-            data-tooltip-text="Settings"
-            href="/some-base-path/settings"
+          <svg
+            class="dusk-icon dusk-icon--size--large dusk-anchor-button__icon"
+            role="graphics-symbol"
+            viewBox="0 0 24 24"
           >
-            <svg
-              class="dusk-icon dusk-icon--size--large dusk-anchor-button__icon"
-              role="graphics-symbol"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z"
-              />
-            </svg>
-            
-             
-            
-            
-          </a>
-        </div>
-      </nav>
+            <path
+              d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z"
+            />
+          </svg>
+          
+           
+          
+          
+        </a>
+      </div>
     </footer>
   </section>
 </div>