hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

frontend: improve settings page

Browse source
This commit is contained in:
hippoz 2022-05-06 03:10:14 +03:00
parent d837dbddb4
commit 96975c149b
No known key found for this signature in database
GPG key ID: 7C52899193467641
1 changed files with 5 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/components/overlays/Settings.svelte
View file

@ -22,17 +22,19 @@ import { maybeFade, maybeFly } from "../../animations";
width: 100%; width: 100%;
} }
/*
.separator { .separator {
margin-bottom: var(--space-md); margin-bottom: var(--space-md);
} }
*/
.user-account-card { .user-account-card {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: left; justify-content: left;
padding: var(--space-md); padding: var(--space-md);
border-radius: var(--radius-md); border-radius: var(--radius-norm);
border: solid 1px var(--background-color-3); background-color: var(--background-color-1);
} }
.large-settings { .large-settings {
@ -47,10 +49,7 @@ import { maybeFade, maybeFly } from "../../animations";
<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }"> <div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }">
<div class="modal" class:large-settings="{ !$smallViewport }" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation> <div class="modal" class:large-settings="{ !$smallViewport }" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation>
<span class="h4">Account</span> <span class="input-label">Account</span>
<div class="separator" />
<div class="user-account-card full-width"> <div class="user-account-card full-width">
<AtSignIcon /> <AtSignIcon />
<span class="h5 top-bar-heading">{ $userInfoStore ? $userInfoStore.username : "" }</span> <span class="h5 top-bar-heading">{ $userInfoStore ? $userInfoStore.username : "" }</span>