john-okeefe/anitrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

made header permanently dark mode

Browse Source
This commit is contained in:
John O'Keefe 2024-10-01 16:01:13 -04:00
parent 30c48dcf9b
commit 753ecd968e
1 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/helperComponents/Header.svelte
View File

@ -36,7 +36,7 @@
location.subscribe(value => currentLocation = value)
</script>
<nav class="bg-white border-gray-200 dark:bg-gray-900">
<nav class="border-gray-200 bg-gray-900">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<div class="flex items-center space-x-3 rtl:space-x-reverse">
<a href="/"><img src={logo} class="h-8" alt="AniTrack Logo"/></a>
@ -50,7 +50,7 @@
let menu = document.querySelector("#navbar-user")
menu.classList.toggle("hidden")
}} type="button"
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg min-[950px]:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm rounded-lg min-[950px]:hidden focus:outline-none focus:ring-2 text-gray-400 hover:bg-gray-700 focus:ring-gray-600"
aria-controls="navbar-user" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
@ -60,16 +60,16 @@
</svg>
</button>
</div>
<div class="hidden items-center justify-between w-full pb-4 min-[950px]:pb-0 min-[950px]:flex min-[950px]:w-auto min-[950px]:order-1 border border-gray-100 dark:border-gray-700 min-[950px]:border-0 bg-gray-50 dark:bg-gray-800 min-[950px]:bg-transparent min-[950px]:dark:bg-transparent rounded-lg" id="navbar-user">
<div class="hidden items-center justify-between w-full pb-4 min-[950px]:pb-0 min-[950px]:flex min-[950px]:w-auto min-[950px]:order-1 border border-gray-700 min-[950px]:border-0 bg-gray-800 min-[950px]:bg-transparent rounded-lg" id="navbar-user">
<ul class="flex flex-col font-medium pb-6 min-[950px]:p-0 mt-4 min-[950px]:space-x-8 rtl:space-x-reverse min-[950px]:flex-row min-[950px]:mt-0">
<li>
{#if isAniListLoggedIn}
<div class="flex justify-center py-2 px-3 rounded bg-transparent min-[950px]:p-0">
<span class="w-48 min-[950px]:w-auto bg-green-100 text-green-800 text-sm font-medium me-2 px-3 py-2 rounded dark:bg-green-800 dark:text-green-200 cursor-default">AniList: {currentAniListUser.data.Viewer.name}</span>
<span class="w-48 min-[950px]:w-auto text-sm font-medium me-2 px-3 py-2 rounded bg-green-800 text-green-200 cursor-default">AniList: {currentAniListUser.data.Viewer.name}</span>
</div>
{:else}
<button on:click={loginToAniList}
class="block py-2 px-3 text-gray-900 w-full min-[950px]:w-auto rounded hover:bg-gray-100 min-[950px]:hover:bg-transparent min-[950px]:hover:text-blue-700 min-[950px]:p-0 dark:text-white min-[950px]:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white min-[950px]:dark:hover:bg-transparent dark:border-gray-700">
class="block py-2 px-3 w-full min-[950px]:w-auto rounded min-[950px]:hover:text-blue-500 hover:bg-gray-700 hover:text-white min-[950px]:hover:bg-transparent border-gray-700">
AniList Login
</button>
{/if}
@ -77,11 +77,11 @@
<li>
{#if isMALLoggedIn}
<div class="flex justify-center py-2 px-3 rounded bg-transparent min-[950px]:p-0">
<span class="w-48 min-[950px]:w-auto bg-blue-100 text-blue-800 text-sm font-medium me-2 px-3 py-2 rounded dark:bg-blue-800 dark:text-blue-200 cursor-default">MyAnimeList: {currentMALUser.name}</span>
<span class="w-48 min-[950px]:w-auto text-sm font-medium me-2 px-3 py-2 rounded bg-blue-800 text-blue-200 cursor-default">MyAnimeList: {currentMALUser.name}</span>
</div>
{:else}
<button on:click={loginToMAL}
class="block py-2 px-3 text-gray-900 w-full min-[950px]:w-auto rounded hover:bg-gray-100 min-[950px]:hover:bg-transparent min-[950px]:hover:text-blue-700 min-[950px]:p-0 dark:text-white min-[950px]:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white min-[950px]:dark:hover:bg-transparent dark:border-gray-700">
class="block py-2 px-3 w-full min-[950px]:w-auto rounded min-[950px]:p-0 text-gray-300 min-[950px]:hover:text-blue-500 hover:bg-gray-700 hover:text-white min-[950px]:hover:bg-transparent border-gray-700">
MyAnimeList Login
</button>
{/if}
@ -89,11 +89,11 @@
<li>
{#if isSimklLoggedIn}
<div class="flex justify-center py-2 px-3 rounded bg-transparent min-[950px]:p-0">
<span class="w-48 min-[950px]:w-auto bg-indigo-100 text-indigo-800 text-sm font-medium me-2 px-3 py-2 rounded dark:bg-indigo-800 dark:text-indigo-200 cursor-default">Simkl: {currentSimklUser.user.name}</span>
<span class="w-48 min-[950px]:w-auto text-sm font-medium me-2 px-3 py-2 rounded bg-indigo-800 text-indigo-200 cursor-default">Simkl: {currentSimklUser.user.name}</span>
</div>
{:else}
<button on:click={loginToSimkl}
class="block py-2 px-3 text-gray-900 w-full min-[950px]:w-auto rounded hover:bg-gray-100 min-[950px]:hover:bg-transparent min-[950px]:hover:text-blue-700 min-[950px]:p-0 dark:text-white min-[950px]:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white min-[950px]:dark:hover:bg-transparent dark:border-gray-700">
class="block py-2 px-3 w-full min-[950px]:w-auto rounded min-[950px]:p-0 text-gray-300 min-[950px]:hover:text-blue-500 hover:bg-gray-700 hover:text-white min-[950px]:hover:bg-transparent border-gray-700">
Simkl Login
</button>
{/if}