mleku/next.orly.dev
1
0
Fork 1
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor login and logout button styles in App.svelte for improved UI consistency. Update button text from icons to labels for better accessibility. Introduce a floating logout button in the profile banner for enhanced user experience.

Browse Source
This commit is contained in:
mleku
2025-10-08 21:15:13 +01:00
parent 5fd58681c9
commit b67961773d
1 changed files with 40 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
app/web/src/App.svelte
View File

@@ -482,10 +482,9 @@
{userProfile?.name || userPubkey.slice(0, 8) + '...'} {userProfile?.name || userPubkey.slice(0, 8) + '...'}
</span> </span>
</button> </button>
<button class="logout-btn" on:click={handleLogout}>🚪</button>
</div> </div>
{:else} {:else}
<button class="login-btn" on:click={openLoginModal}>📥</button> <button class="login-btn" on:click={openLoginModal}>Log in</button>
{/if} {/if}
</div> </div>
</header> </header>
@@ -535,7 +534,7 @@
{:else} {:else}
<div class="login-prompt"> <div class="login-prompt">
<p>Please log in to access export functionality.</p> <p>Please log in to access export functionality.</p>
<button class="login-btn" on:click={openLoginModal}>📥 Log In</button> <button class="login-btn" on:click={openLoginModal}>Log In</button>
</div> </div>
{/if} {/if}
</div> </div>
@@ -558,7 +557,7 @@
{:else} {:else}
<div class="login-prompt"> <div class="login-prompt">
<p>Please log in to access import functionality.</p> <p>Please log in to access import functionality.</p>
<button class="login-btn" on:click={openLoginModal}>📥 Log In</button> <button class="login-btn" on:click={openLoginModal}>Log In</button>
</div> </div>
{/if} {/if}
</div> </div>
@@ -590,7 +589,7 @@
{:else} {:else}
<div class="login-prompt"> <div class="login-prompt">
<p>Please log in to view your events.</p> <p>Please log in to view your events.</p>
<button class="login-btn" on:click={openLoginModal}>📥 Log In</button> <button class="login-btn" on:click={openLoginModal}>Log In</button>
</div> </div>
{/if} {/if}
</div> </div>
@@ -626,7 +625,7 @@
{:else} {:else}
<div class="login-prompt"> <div class="login-prompt">
<p>Please log in to view events.</p> <p>Please log in to view events.</p>
<button class="login-btn" on:click={openLoginModal}>📥 Log In</button> <button class="login-btn" on:click={openLoginModal}>Log In</button>
</div> </div>
{/if} {/if}
</div> </div>
@@ -657,6 +656,8 @@
{#if userProfile.banner} {#if userProfile.banner}
<img src={userProfile.banner} alt="Profile banner" class="profile-banner" /> <img src={userProfile.banner} alt="Profile banner" class="profile-banner" />
{/if} {/if}
<!-- Logout button floating in top-right corner of banner -->
<button class="logout-btn floating" on:click={handleLogout}>Log out</button>
<!-- Avatar overlaps the bottom edge of the banner by 50% --> <!-- Avatar overlaps the bottom edge of the banner by 50% -->
{#if userProfile.picture} {#if userProfile.picture}
<img src={userProfile.picture} alt="User avatar" class="profile-avatar overlap" /> <img src={userProfile.picture} alt="User avatar" class="profile-avatar overlap" />
@@ -861,26 +862,25 @@
} }
.login-btn { .login-btn {
border: 0 none; padding: 0.5em 1em;
border-radius: 0; border: none;
display: flex; border-radius: 6px;
align-items: center; background-color: #4CAF50;
background-color: var(--primary); color: white;
cursor: pointer; cursor: pointer;
color: var(--text-color); font-size: 1rem;
height: 3em; font-weight: 500;
width: auto;
min-width: 3em;
flex-shrink: 0;
line-height: 1;
transition: background-color 0.2s; transition: background-color 0.2s;
display: inline-flex;
align-items: center;
justify-content: center; justify-content: center;
padding: 1em 1em 1em 1em; vertical-align: middle;
margin: 0; margin: 0 auto;
padding:0.5em 1em;
} }
.login-btn:hover { .login-btn:hover {
background-color: #0056b3; background-color: #45a049;
} }
/* App Container */ /* App Container */
@@ -1014,23 +1014,32 @@
.logout-btn { .logout-btn {
padding: 0; padding: 0.5rem 1rem;
border: none; border: none;
border-radius: 0; border-radius: 6px;
background-color: var(--warning); background-color: var(--warning);
color: white; color: white;
cursor: pointer; cursor: pointer;
flex-shrink: 0; font-size: 1rem;
height: 3em; font-weight: 500;
width: 3em; transition: background-color 0.2s;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 0.5rem;
} }
/*.logout-btn:hover {*/ .logout-btn:hover {
/* background: ;*/ background-color: #e53935;
/*}*/ }
.logout-btn.floating {
position: absolute;
top: 0.5em;
right: 0.5em;
z-index: 10;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* User Profile Button */ /* User Profile Button */
.user-profile-btn { .user-profile-btn {
@@ -1139,6 +1148,7 @@
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.profile-hero { .profile-hero {
position: relative; position: relative;
} }
@@ -1281,7 +1291,7 @@
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.export-section h3, .import-section h3, .events-section h3 { .export-section h3, .import-section h3 {
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
color: var(--text-color); color: var(--text-color);
font-size: 1.2rem; font-size: 1.2rem;