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

Issue:
web-wallet: Remove margin from Welcome Layout (Loading/Error States)
<img width="835" alt="Screenshot 2024-12-21 at 20 35 39" src="https://github.com/user-attachments/assets/6d2e424a-3774-44c9-839c-1af2691f2b40" />

<img width="734" alt="Screenshot 2024-12-21 at 18 19 22" src="https://github.com/user-attachments/assets/fa487483-3168-48bf-8c60-1c5d8eefd034" />

No need for these to be `10dvh` from top – in the middle of nowhere. Either vertically-centered or top aligned positioning makes more sense.


Discussion / hints:

Fix patch:
diff --git a/web-wallet/src/routes/(welcome)/+layout.svelte b/web-wallet/src/routes/(welcome)/+layout.svelte
index 9dc3c0de11..77e4106e58 100644
--- a/web-wallet/src/routes/(welcome)/+layout.svelte
+++ b/web-wallet/src/routes/(welcome)/+layout.svelte
@@ -1,6 +1,6 @@
 <script>
-  import { ErrorDetails, Throbber } from "$lib/dusk/components";
-  import { AppAnchor, AppImage, Banner } from "$lib/components";
+  import { Button, ErrorDetails, Throbber } from "$lib/dusk/components";
+  import { AppImage, Banner } from "$lib/components";
   import { networkStore, settingsStore } from "$lib/stores";
 
   const { darkMode } = $settingsStore;
@@ -23,6 +23,7 @@
     height="31"
   />
 </header>
+
 {#key retryKey}
   {#await networkStore.connect().then(() => networkStore.init())}
     <div class="welcome-layout__loading">
@@ -32,41 +33,51 @@
   {:then}
     <slot />
   {:catch error}
-    <Banner
-      className="welcome-layout__error"
-      title="Error while trying to connect to the network"
-      variant="error"
-    >
-      <p>
-        The Web Wallet is unable to connect to the network.<br />
-        This may be a temporary issue.<br />
-        Please try again in a few minutes by clicking <AppAnchor
-          href="/setup"
-          on:click={handleRetry}>retry</AppAnchor
-        >.
-      </p>
-      <ErrorDetails {error} summary="Error details" />
-    </Banner>
+    <div class="welcome-layout__error-container">
+      <Banner
+        className="welcome-layout__error"
+        title="Network Connection Issue"
+        variant="error"
+      >
+        <p>
+          The Web Wallet is currently unable to connect to the network. Please
+          click "Retry" to attempt connecting again or check back in a few
+          minutes.
+        </p>
+        <ErrorDetails {error} summary="Error details" />
+      </Banner>
+      <Button
+        className="welcome-layout__retry-button"
+        text="Retry"
+        {handleRetry}
+      />
+    </div>
   {/await}
 {/key}
 
 <style lang="postcss">
+  .welcome-layout__error-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--medium-gap);
+    width: 100%;
+  }
   :global {
-    .welcome-layout__error,
     .welcome-layout__loading {
-      margin-top: 10dvh;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--medium-gap);
     }
 
     .welcome-layout__error > .banner__content {
       gap: var(--medium-gap);
     }
 
-    .welcome-layout__loading {
+    .welcome-layout__retry-button {
       width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: var(--medium-gap);
     }
   }
 </style>


Test patch: