diff --git a/app/web/src/App.svelte b/app/web/src/App.svelte index ccc66a2..c40da13 100644 --- a/app/web/src/App.svelte +++ b/app/web/src/App.svelte @@ -482,10 +482,9 @@ {userProfile?.name || userPubkey.slice(0, 8) + '...'} - {:else} - + {/if} @@ -535,7 +534,7 @@ {:else}

Please log in to access export functionality.

- +
{/if} @@ -558,7 +557,7 @@ {:else}

Please log in to access import functionality.

- +
{/if} @@ -590,7 +589,7 @@ {:else}

Please log in to view your events.

- +
{/if} @@ -626,7 +625,7 @@ {:else}

Please log in to view events.

- +
{/if} @@ -657,6 +656,8 @@ {#if userProfile.banner} Profile banner {/if} + + {#if userProfile.picture} User avatar @@ -861,26 +862,25 @@ } .login-btn { - border: 0 none; - border-radius: 0; - display: flex; - align-items: center; - background-color: var(--primary); + padding: 0.5em 1em; + border: none; + border-radius: 6px; + background-color: #4CAF50; + color: white; cursor: pointer; - color: var(--text-color); - height: 3em; - width: auto; - min-width: 3em; - flex-shrink: 0; - line-height: 1; + font-size: 1rem; + font-weight: 500; transition: background-color 0.2s; + display: inline-flex; + align-items: center; justify-content: center; - padding: 1em 1em 1em 1em; - margin: 0; + vertical-align: middle; + margin: 0 auto; + padding:0.5em 1em; } .login-btn:hover { - background-color: #0056b3; + background-color: #45a049; } /* App Container */ @@ -1014,23 +1014,32 @@ .logout-btn { - padding: 0; + padding: 0.5rem 1rem; border: none; - border-radius: 0; + border-radius: 6px; background-color: var(--warning); color: white; cursor: pointer; - flex-shrink: 0; - height: 3em; - width: 3em; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.2s; display: flex; align-items: center; justify-content: center; + gap: 0.5rem; + } + + .logout-btn:hover { + 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); } - - /*.logout-btn:hover {*/ - /* background: ;*/ - /*}*/ /* User Profile Button */ .user-profile-btn { @@ -1139,6 +1148,7 @@ margin-bottom: 2rem; } + .profile-hero { position: relative; } @@ -1281,7 +1291,7 @@ margin-bottom: 1.5rem; } - .export-section h3, .import-section h3, .events-section h3 { + .export-section h3, .import-section h3 { margin: 0 0 1rem 0; color: var(--text-color); font-size: 1.2rem;