Skip to content

Commit

Permalink
web-wallet: Fix width discrepancy in footer icons
Browse files Browse the repository at this point in the history 
Resolves #3163
  • Loading branch information
@ascartabelli
ascartabelli committed Feb 7, 2025
1 parent 5e13474 commit 765e4cf
Show file tree
Hide file tree
Showing 3 changed files with 390 additions and 410 deletions.
3 changes: 3 additions & 0 deletions web-wallet/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
233 changes: 115 additions & 118 deletions web-wallet/src/routes/(app)/dashboard/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Loading

0 comments on commit 765e4cf

Please sign in to comment.