From 084509a9741de249a80009b7ff9380d92552fffa Mon Sep 17 00:00:00 2001
From: "aditya.chandel" <aditya.chandel101@gmail.com>
Date: Mon, 14 Jul 2025 11:33:32 -0600
Subject: [PATCH] Fix correct color rendering issue in Firefox light mode

---
 booklore-ui/src/app/core/component/login/login.component.html | 4 ++--
 booklore-ui/src/app/core/setup/setup.component.html           | 4 ++--
 .../src/app/github-support-dialog/github-support-dialog.html  | 1 -
 .../layout/component/layout-topbar/app.topbar.component.html  | 2 +-
 .../metadata-viewer/metadata-viewer.component.html            | 4 ++--
 .../component/book-uploader/book-uploader.component.html      | 2 +-
 6 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/booklore-ui/src/app/core/component/login/login.component.html b/booklore-ui/src/app/core/component/login/login.component.html
index f6753141c..9fdd71f1e 100644
--- a/booklore-ui/src/app/core/component/login/login.component.html
+++ b/booklore-ui/src/app/core/component/login/login.component.html
@@ -2,7 +2,7 @@
      style="background: linear-gradient(60deg, var(--primary-color) 0%, #1e3a8a 100%);">
   <div class="flex flex-col items-center justify-center -mt-48">
     <div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">
-      <div class="w-full bg-surface-0 dark:bg-surface-900 pt-8 pb-12 px-8 sm:px-8" style="border-radius: 53px">
+      <div class="w-full bg-surface-900 pt-8 pb-12 px-8 sm:px-8" style="border-radius: 53px">
         <div class="text-center mb-8">
           <svg class="mb-8 w-14 h-14 mx-auto" viewBox="0 0 126 126" fill="var(--primary-color)" xmlns="http://www.w3.org/2000/svg">
             <path
@@ -12,7 +12,7 @@
               fill="white"/>
           </svg>
           <div class="text-3xl font-medium mb-4">Welcome to Booklore</div>
-          <span class="text-muted-color font-medium">Sign in to continue</span>
+          <span class="font-medium">Sign in to continue</span>
         </div>
 
         <form class="flex flex-col gap-4" #loginForm="ngForm" (ngSubmit)="login()">
diff --git a/booklore-ui/src/app/core/setup/setup.component.html b/booklore-ui/src/app/core/setup/setup.component.html
index dbe022d30..2bf72063b 100644
--- a/booklore-ui/src/app/core/setup/setup.component.html
+++ b/booklore-ui/src/app/core/setup/setup.component.html
@@ -2,7 +2,7 @@
      style="background: linear-gradient(60deg, var(--primary-color) 0%, #1e3a8a 100%);">
   <div class="flex flex-col items-center justify-center -mt-48">
     <div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">
-      <div class="w-full bg-surface-0 dark:bg-surface-900 py-16 px-8 sm:px-16" style="border-radius: 53px">
+      <div class="w-full bg-surface-900 py-16 px-8 sm:px-16" style="border-radius: 53px">
         <div class="text-center mb-8">
           <svg class="mb-8 w-16 h-16 mx-auto" viewBox="0 0 126 126" fill="var(--primary-color)" xmlns="http://www.w3.org/2000/svg">
             <path
@@ -12,7 +12,7 @@
               fill="white"/>
           </svg>
           <div class="text-3xl font-medium mb-4">Welcome to Booklore</div>
-          <span class="text-muted-color text-xl">Setup Initial Admin Account</span>
+          <span class="text-xl">Setup Initial Admin Account</span>
         </div>
 
         <form class="flex flex-col gap-4" [formGroup]="setupForm" (ngSubmit)="onSubmit()">
diff --git a/booklore-ui/src/app/github-support-dialog/github-support-dialog.html b/booklore-ui/src/app/github-support-dialog/github-support-dialog.html
index 566bc85e8..bf8954f7e 100644
--- a/booklore-ui/src/app/github-support-dialog/github-support-dialog.html
+++ b/booklore-ui/src/app/github-support-dialog/github-support-dialog.html
@@ -9,7 +9,6 @@
   <p-button
     label="Go to GitHub"
     icon="pi pi-github"
-    size="small"
     (click)="openGithub()">
   </p-button>
 </div>
diff --git a/booklore-ui/src/app/layout/component/layout-topbar/app.topbar.component.html b/booklore-ui/src/app/layout/component/layout-topbar/app.topbar.component.html
index 1916faf5e..f7678cb31 100644
--- a/booklore-ui/src/app/layout/component/layout-topbar/app.topbar.component.html
+++ b/booklore-ui/src/app/layout/component/layout-topbar/app.topbar.component.html
@@ -89,7 +89,7 @@
             style="animation-duration: 2s; background: conic-gradient(from 90deg, #f97316, #f59e0b, #eab308, #84cc16, #22c55e, #10b981, #14a8a6, #06b6d4, #0ea5e9, #3b82f6, #6366f1, #8b5cf6, #a855f7, #d946ef, #ec4899, #f43f5e)"
             class="absolute -top-5 -left-5 w-20 h-20 animate-spin">
           </span>
-          <span style="inset: 1px; border-radius: 4px" class="absolute z-2 bg-surface-0 dark:bg-surface-900 transition-all"></span>
+          <span style="inset: 1px; border-radius: 4px" class="absolute z-2 bg-surface-900 transition-all"></span>
           <i class="pi pi-thumbs-up z-10"></i>
         </li>
         <li class="relative">
diff --git a/booklore-ui/src/app/metadata/book-metadata-center-component/metadata-viewer/metadata-viewer.component.html b/booklore-ui/src/app/metadata/book-metadata-center-component/metadata-viewer/metadata-viewer.component.html
index a11a1b053..66a850631 100644
--- a/booklore-ui/src/app/metadata/book-metadata-center-component/metadata-viewer/metadata-viewer.component.html
+++ b/booklore-ui/src/app/metadata/book-metadata-center-component/metadata-viewer/metadata-viewer.component.html
@@ -53,7 +53,7 @@
 
               <div class="flex flex-col items-center md:items-start gap-1">
                 <div class="flex items-center gap-2 justify-center md:justify-start flex-wrap text-center md:text-left">
-                  <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white leading-tight">
+                  <h2 class="text-3xl font-extrabold leading-tight">
                     {{ book?.metadata!.title }}
                   </h2>
                   <i
@@ -65,7 +65,7 @@
                   ></i>
                 </div>
 
-                <p class="text-gray-600 dark:text-gray-300 text-lg">
+                <p class="text-lg">
                   @for (author of book?.metadata!.authors; track author; let isLast = $last) {
                     <a class="hover:underline dark:text-blue-400 cursor-pointer" (click)="goToAuthorBooks(author)">
                       {{ author }}
diff --git a/booklore-ui/src/app/utilities/component/book-uploader/book-uploader.component.html b/booklore-ui/src/app/utilities/component/book-uploader/book-uploader.component.html
index 76d284dab..ee239faac 100644
--- a/booklore-ui/src/app/utilities/component/book-uploader/book-uploader.component.html
+++ b/booklore-ui/src/app/utilities/component/book-uploader/book-uploader.component.html
@@ -103,7 +103,7 @@
       <ng-template #file></ng-template>
       <ng-template #empty>
         <div class="flex items-center justify-center flex-col text-center">
-          <i class="pi pi-cloud-upload !border-2 !rounded-full !p-8 !text-4xl !text-muted-color"></i>
+          <i class="pi pi-cloud-upload !border-2 !rounded-full !p-8 !text-4xl"></i>
           <p class="mt-6 mb-2">Drag and drop files here to upload.</p>
           <p class="mt-2 mb-2">
             Only <strong>.pdf</strong>, <strong>.epub</strong>, <strong>.cbz</strong>, <strong>.cbr</strong>, and <strong>.cb7</strong> files are supported (max size: 100 MB per file).