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

made dark mode default for every element

Browse Source
This commit is contained in:
John O'Keefe
2025-03-03 15:29:33 -05:00
parent baed9a4a67
commit dc01aa314c
2 changed files with 39 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/helperComponents/Anime.svelte
View File

@@ -481,10 +481,10 @@
data-input-counter-decrement="quantity-input" data-input-counter-decrement="quantity-input"
on:click={() => on:click={() =>
(currentAniListAnime.data.MediaList.progress -= 1)} (currentAniListAnime.data.MediaList.progress -= 1)}
class="bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 hover:bg-gray-200 border border-gray-300 rounded-s-lg p-3 h-11 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none" class="bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
> >
<svg <svg
class="w-3 h-3 text-gray-900 dark:text-white" class="w-3 h-3 text-white"
aria-hidden="true" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
@@ -531,10 +531,10 @@
data-input-counter-increment="quantity-input" data-input-counter-increment="quantity-input"
on:click={() => on:click={() =>
(currentAniListAnime.data.MediaList.progress += 1)} (currentAniListAnime.data.MediaList.progress += 1)}
class="bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 hover:bg-gray-200 border border-gray-300 rounded-e-lg p-3 h-11 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none" class="bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
> >
<svg <svg
class="w-3 h-3 text-gray-900 dark:text-white" class="w-3 h-3 text-white"
aria-hidden="true" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
@@ -565,25 +565,7 @@
{/if} {/if}
</div> </div>
<div>
<label
for="status"
class="text-left block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Status</label
>
<select
id="status"
name="status"
class="border text-sm rounded-lg
block p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400
text-white focus:ring-blue-500 focus:border-blue-500"
bind:value={startingAnilistStatusOption}
>
{#each statusOptions as option}
<option value={option}>{option.aniList}</option>
{/each}
</select>
</div>
</div> </div>
<div <div
class="flex flex-col md:flex-row md:pl-10 md:pr-10 pt-5 pb-5 justify-center md:gap-x-16 lg:gap-x-36" class="flex flex-col md:flex-row md:pl-10 md:pr-10 pt-5 pb-5 justify-center md:gap-x-16 lg:gap-x-36"
@@ -671,8 +653,8 @@
disabled={isSubmitting} disabled={isSubmitting}
id="sync-button" id="sync-button"
class="text-white {$submitSuccess class="text-white {$submitSuccess
? 'bg-green-600 dark:bg-green-600 hover:bg-green-700 dark:hover:bg-green-700 focus:ring-4 focus:ring-green-800 dark:focus:ring-green-800' ? 'bg-green-600 hover:bg-green-700 focus:ring-4 focus:ring-green-800'
: 'bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:ring-4 focus:ring-blue-800 dark:focus:ring-blue-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none" : 'bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
type="submit" type="submit"
> >
<svg <svg
@@ -699,8 +681,8 @@
</Button> </Button>
<Button <Button
class="text-white bg-gray-800 border border-gray-600 focus:outline-none hover:bg-gray-700 focus:ring-4 class="text-white bg-gray-800 border border-gray-600 focus:outline-none hover:bg-gray-700 focus:ring-4
focus:ring-gray-700 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white focus:ring-gray-700 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2
dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" hover:border-gray-600"
on:click={async () => { on:click={async () => {
await CheckIfAniListLoggedInAndLoadWatchList(); await CheckIfAniListLoggedInAndLoadWatchList();
return push("/"); return push("/");
@@ -720,8 +702,8 @@
disabled={isSubmitting} disabled={isSubmitting}
id="delete-button" id="delete-button"
class="text-white bg-red-700 {$submitSuccess class="text-white bg-red-700 {$submitSuccess
? 'bg-green-600 dark:bg-green-600 hover:bg-green-700 dark:hover:bg-green-700 focus:ring-4 focus:ring-green-800 dark:focus:ring-green-800' ? 'bg-green-600 hover:bg-green-700 focus:ring-4 focus:ring-green-800'
: 'bg-red-600 dark:bg-red-600 hover:bg-red-700 dark:hover:bg-red-700 focus:ring-4 focus:ring-red-800 dark:focus:ring-red-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none" : 'bg-red-600 hover:bg-red-700 focus:ring-4 focus:ring-red-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
on:click={deleteEntries} on:click={deleteEntries}
> >
<svg <svg
@@ -754,8 +736,8 @@
disabled={isSubmitting} disabled={isSubmitting}
id="sync-button" id="sync-button"
class="text-white {$submitSuccess class="text-white {$submitSuccess
? 'bg-green-600 dark:bg-green-600 hover:bg-green-700 dark:hover:bg-green-700 focus:ring-4 focus:ring-green-800 dark:focus:ring-green-800' ? 'bg-green-600 hover:bg-green-700 focus:ring-4 focus:ring-green-800'
: 'bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:ring-4 focus:ring-blue-800 dark:focus:ring-blue-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none" : 'bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
type="submit" type="submit"
> >
<svg <svg
@@ -782,8 +764,8 @@
</Button> </Button>
<Button <Button
class="text-white bg-gray-800 border border-gray-600 focus:outline-none hover:bg-gray-700 focus:ring-4 class="text-white bg-gray-800 border border-gray-600 focus:outline-none hover:bg-gray-700 focus:ring-4
focus:ring-gray-700 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white focus:ring-gray-700 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2
dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" hover:border-gray-600"
on:click={async () => { on:click={async () => {
await CheckIfAniListLoggedInAndLoadWatchList(); await CheckIfAniListLoggedInAndLoadWatchList();
return push("/"); return push("/");

48
frontend/src/helperComponents/Datepicker.svelte
View File

@@ -50,19 +50,19 @@
function getFocusRingClass(color: Button["color"]): string { function getFocusRingClass(color: Button["color"]): string {
switch (color) { switch (color) {
case "primary": case "primary":
return "focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400"; return "focus:ring-2 focus:ring-primary-400";
case "blue": case "blue":
return "focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"; return "focus:ring-2 focus:ring-blue-400";
case "red": case "red":
return "focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400"; return "focus:ring-2 focus:ring-red-400";
case "green": case "green":
return "focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400"; return "focus:ring-2 focus:ring-green-400";
case "yellow": case "yellow":
return "focus:ring-2 focus:ring-yellow-500 dark:focus:ring-yellow-400"; return "focus:ring-2 focus:ring-yellow-400";
case "purple": case "purple":
return "focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400"; return "focus:ring-2 focus:ring-purple-400";
case "slate": case "slate":
return "focus:ring-2 focus:ring-slate-500 dark:focus:ring-slate-400"; return "focus:ring-2 focus:ring-slate-400";
default: default:
return ""; return "";
} }
@@ -71,19 +71,19 @@
function getRangeBackgroundClass(color: Button["color"]): string { function getRangeBackgroundClass(color: Button["color"]): string {
switch (color) { switch (color) {
case "primary": case "primary":
return "bg-primary-100 dark:bg-primary-900"; return "bg-primary-900";
case "blue": case "blue":
return "bg-blue-100 dark:bg-blue-900"; return "bg-blue-900";
case "red": case "red":
return "bg-red-100 dark:bg-red-900"; return "bg-red-900";
case "green": case "green":
return "bg-green-100 dark:bg-green-900"; return "bg-green-900";
case "yellow": case "yellow":
return "bg-yellow-100 dark:bg-yellow-900"; return "bg-yellow-900";
case "purple": case "purple":
return "bg-purple-100 dark:bg-purple-900"; return "bg-purple-900";
case "slate": case "slate":
return "bg-slate-100 dark:bg-slate-900"; return "bg-slate-900";
default: default:
return ""; return "";
} }
@@ -297,7 +297,7 @@
<input <input
bind:this={inputElement} bind:this={inputElement}
type="text" type="text"
class="w-full px-4 py-3 text-sm border rounded-md focus:outline-none dark:bg-gray-700 dark:text-white dark:border-gray-600 {getFocusRingClass( class="w-full px-4 py-3 text-sm border rounded-md focus:outline-none bg-gray-700 text-white border-gray-600 {getFocusRingClass(
color, color,
)} {inputClass}" )} {inputClass}"
{placeholder} {placeholder}
@@ -313,13 +313,13 @@
/> />
<button <button
type="button" type="button"
class="absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 dark:text-gray-400 focus:outline-none" class="absolute inset-y-0 right-0 flex items-center px-3 text-gray-400 focus:outline-none"
on:click={() => (isOpen = !isOpen)} on:click={() => (isOpen = !isOpen)}
{disabled} {disabled}
aria-label={isOpen ? "Close date picker" : "Open date picker"} aria-label={isOpen ? "Close date picker" : "Open date picker"}
> >
<svg <svg
class="w-4 h-4 text-gray-500 dark:text-gray-400" class="w-4 h-4 text-gray-400"
aria-hidden="true" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="currentColor" fill="currentColor"
@@ -339,14 +339,14 @@
id="datepicker-dropdown" id="datepicker-dropdown"
class=" class="
{inline ? '' : 'absolute z-10 mt-1'} {inline ? '' : 'absolute z-10 mt-1'}
bg-white dark:bg-gray-800 rounded-md shadow-lg" bg-gray-800 rounded-md shadow-lg"
transition:fade={{ duration: 100 }} transition:fade={{ duration: 100 }}
role="dialog" role="dialog"
aria-label="Calendar" aria-label="Calendar"
> >
<div class="p-4" role="application"> <div class="p-4" role="application">
{#if title} {#if title}
<h2 class="text-lg font-semibold mb-4 dark:text-white"> <h2 class="text-lg font-semibold mb-4 text-white">
{title} {title}
</h2> </h2>
{/if} {/if}
@@ -358,7 +358,7 @@
aria-label="Previous month" aria-label="Previous month"
> >
<svg <svg
class="w-3 h-3 rtl:rotate-180 text-white dark:text-white" class="w-3 h-3 rtl:rotate-180 text-white"
aria-hidden="true" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
@@ -373,7 +373,7 @@
> >
</Button> </Button>
<h3 <h3
class="text-lg font-semibold dark:text-white" class="text-lg font-semibold text-white"
aria-live="polite" aria-live="polite"
> >
{currentMonth.toLocaleString(locale, { {currentMonth.toLocaleString(locale, {
@@ -388,7 +388,7 @@
aria-label="Next month" aria-label="Next month"
> >
<svg <svg
class="w-3 h-3 rtl:rotate-180 text-white dark:text-white" class="w-3 h-3 rtl:rotate-180 text-white"
aria-hidden="true" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
@@ -406,7 +406,7 @@
<div class="grid grid-cols-7 gap-1" role="grid"> <div class="grid grid-cols-7 gap-1" role="grid">
{#each weekdays as day} {#each weekdays as day}
<div <div
class="text-center text-sm font-medium text-gray-500 dark:text-gray-400" class="text-center text-sm font-medium text-gray-400"
role="columnheader" role="columnheader"
> >
{day} {day}
@@ -418,7 +418,7 @@
size="sm" size="sm"
class="w-full h-8 {day.getMonth() !== class="w-full h-8 {day.getMonth() !==
currentMonth.getMonth() currentMonth.getMonth()
? 'text-gray-300 dark:text-gray-600' ? 'text-gray-600'
: ''} {isToday(day) : ''} {isToday(day)
? 'font-bold' ? 'font-bold'
: ''} {isInRange(day) : ''} {isInRange(day)