CSS Update 2 (#653)

* Initial Work on Theme Refactor.

* Finish Theme Refactor.

* Split Icon and Text Colors.

* Temp Fix for Theme Switching.

src/components/BackgroundImagePlaceholderDiv.tsx

@@ -87,7 +87,7 @@ function BackgroundImagePlaceholderDiv(props: Props) {
               hidePlaceholderOnHover && 'group-hover:opacity-0',
             )}
           >
-            <Icon path={mdiInformationOutline} size={1.5} className="text-panel-text-important" />
+            <Icon path={mdiInformationOutline} size={1.5} className="text-panel-icon-important" />
             <div className="my-4 font-semibold">Failed to Load</div>
             {imageError}
           </div>

src/components/Collection/Series/EpisodeDetails.tsx

@@ -33,11 +33,11 @@ function EpisodeDetails({ episode }: { episode: EpisodeType }) {
       </div>
 
       <div className="flex items-center gap-x-2 text-sm font-semibold">
-        <Icon path={mdiCalendarMonthOutline} size={1} />
+        <Icon className="text-panel-icon" path={mdiCalendarMonthOutline} size={1} />
         {moment(episode.AniDB?.AirDate).format('MMMM Do, YYYY')}
-        <Icon path={mdiClockOutline} size={1} />
+        <Icon className="text-panel-icon" path={mdiClockOutline} size={1} />
         {getDuration(episode.Duration)}
-        <Icon path={mdiStarHalfFull} size={1} />
+        <Icon className="text-panel-icon" path={mdiStarHalfFull} size={1} />
         {toNumber(episode.AniDB?.Rating.Value).toFixed(2)}
         &nbsp;(
         {episode.AniDB?.Rating.Votes}

src/components/Collection/Series/EpisodeFiles.tsx

@@ -45,11 +45,11 @@ const EpisodeFiles = ({ episodeFiles }: Props) => {
                   await rescanFile(selectedFile.ID);
                 }}
               >
-                <Icon path={mdiRefresh} size={1} />
+                <Icon className="text-panel-icon-action" path={mdiRefresh} size={1} />
                 Force Update File Info
               </div>
               <div className="flex items-center gap-x-2">
-                <Icon path={mdiEyeOutline} size={1} />
+                <Icon className="text-panel-icon-action" path={mdiEyeOutline} size={1} />
                 {selectedFile.IsVariation ? 'Unmark' : 'Mark'}
                 &nbsp;File as Variation
               </div>
@@ -58,7 +58,7 @@ const EpisodeFiles = ({ episodeFiles }: Props) => {
                   <div className="flex items-center gap-x-2 font-semibold text-panel-text-primary">
                     <div className="metadata-link-icon anidb" />
                     {`${selectedFile.AniDB.ID} (AniDB)`}
-                    <Icon path={mdiOpenInNew} size={1} />
+                    <Icon className="text-panel-icon-action" path={mdiOpenInNew} size={1} />
                   </div>
                 </a>
               )}
@@ -67,7 +67,7 @@ const EpisodeFiles = ({ episodeFiles }: Props) => {
                   <div className="flex items-center gap-x-2 font-semibold text-panel-text-primary">
                     <div className="metadata-link-icon anidb" />
                     {ReleaseGroupName === null ? 'Unknown' : ReleaseGroupName}
-                    <Icon path={mdiOpenInNew} size={1} />
+                    <Icon className="text-panel-icon-action" path={mdiOpenInNew} size={1} />
                   </div>
                 </a>
               )}

src/components/Input/Checkbox.tsx

@@ -48,18 +48,18 @@ function Checkbox({ className, id, intermediate, isChecked, justify, label, labe
         </span>
       )}
       {!intermediate && isChecked && (
-        <TransitionDiv className="flex text-panel-text-primary" enterFrom="opacity-50" appear={false}>
-          <Icon path={mdiCheckboxMarkedCircleOutline} size={1} />
+        <TransitionDiv className="flex text-panel-icon-action" enterFrom="opacity-50" appear={false}>
+          <Icon className="text-panel-icon-action" path={mdiCheckboxMarkedCircleOutline} size={1} />
         </TransitionDiv>
       )}
       {!intermediate && !isChecked && (
-        <TransitionDiv className="flex text-panel-text-primary" enterFrom="opacity-50" appear={false}>
-          <Icon path={mdiCheckboxBlankCircleOutline} size={1} />
+        <TransitionDiv className="flex text-panel-icon-action" enterFrom="opacity-50" appear={false}>
+          <Icon className="text-panel-icon-action" path={mdiCheckboxBlankCircleOutline} size={1} />
         </TransitionDiv>
       )}
       {intermediate && (
-        <TransitionDiv className="flex text-panel-text-primary" enterFrom="opacity-50" appear={false}>
-          <Icon path={mdiCircleHalfFull} size={1} />
+        <TransitionDiv className="flex text-panel-icon-action" enterFrom="opacity-50" appear={false}>
+          <Icon className="text-panel-icon-action" path={mdiCircleHalfFull} size={1} />
         </TransitionDiv>
       )}
       {labelRight && (

src/components/Layout/Header.tsx

@@ -19,7 +19,7 @@ function Header({ setShowSidebar, showSidebar }: Props) {
   return (
     <div className="z-[100] flex max-h-15 items-center justify-between bg-topnav-background p-4 drop-shadow-md">
       <Button onClick={() => setShowSidebar(!showSidebar)}>
-        <Icon path={showSidebar ? mdiBackburger : mdiMenu} size={1} className="text-header-text" />
+        <Icon path={showSidebar ? mdiBackburger : mdiMenu} size={1} className="text-header-icon" />
       </Button>
       <ShokoIcon className="w-8" />
       <div className="flex items-center">

src/components/Layout/TopNav.tsx

@@ -61,14 +61,14 @@ const MenuItem = (
       onClick();
     }}
   >
-    <Icon path={icon} size={0.8333} />
+    <Icon className="text-topnav-icon-primary" path={icon} size={0.8333} />
     {text}
   </NavLink>
 );
 
 const ExternalLinkMenuItem = ({ icon, url }: { url: string, icon: string }) => (
   <a href={url} target="_blank" rel="noreferrer noopener">
-    <Icon path={icon} size={0.8333} />
+    <Icon className="text-topnav-icon-primary" path={icon} size={0.8333} />
   </a>
 );
 
@@ -150,10 +150,10 @@ function TopNav() {
     <NavLink
       to={path}
       key={path.split('/').pop()}
-      className={({ isActive }) => cx('flex items-center gap-x-2', isActive && 'text-header-text-primary')}
+      className={({ isActive }) => cx('flex items-center gap-x-2', isActive && 'text-topnav-text-primary')}
       onClick={closeModalsAndSubmenus}
     >
-      <Icon path={icon} size={0.8333} />
+      <Icon className="text-topnav-icon-primary" path={icon} size={0.8333} />
       {text}
     </NavLink>
   ), []);
@@ -175,19 +175,19 @@ function TopNav() {
           <div className="flex items-center gap-x-8">
             <div className="flex items-center gap-x-2">
               <div
-                className={cx(['cursor-pointer', showQueueModal ? 'text-header-text-primary' : undefined])}
+                className={cx(['cursor-pointer', showQueueModal ? 'text-topnav-text-primary' : undefined])}
                 onClick={handleQueueModalOpen}
                 title="Show Queue Modal"
               >
-                <Icon path={mdiServer} size={0.8333} />
+                <Icon className="text-header-icon" path={mdiServer} size={0.8333} />
               </div>
               <span className="text-header-text-important">
                 {(queueItems.HasherQueueState.queueCount + queueItems.GeneralQueueState.queueCount
                   + queueItems.ImageQueueState.queueCount) ?? 0}
               </span>
             </div>
             <div className="flex items-center gap-x-2">
-              <div className="mr-1 flex h-8 w-8 items-center justify-center rounded-full bg-header-user-background text-header-user-text text-xl">
+              <div className="mr-1 flex h-8 w-8 items-center justify-center rounded-full bg-header-user-background text-xl text-header-user-text">
                 {currentUser.data?.Avatar
                   ? <img src={currentUser.data?.Avatar} alt="avatar" className="h-8 w-8 rounded-full" />
                   : currentUser.data?.Username.charAt(0)}
@@ -197,10 +197,10 @@ function TopNav() {
             </div>
             <NavLink
               to="settings"
-              className={({ isActive }) => (isActive ? 'text-header-text-primary' : '')}
+              className={({ isActive }) => (isActive ? 'text-topnav-text-primary' : '')}
               onClick={() => closeModalsAndSubmenus()}
             >
-              <Icon path={mdiCogOutline} size={0.8333} />
+              <Icon className="text-header-icon" path={mdiCogOutline} size={0.8333} />
             </NavLink>
           </div>
         </div>
@@ -254,7 +254,7 @@ function TopNav() {
                       : mdiDownloadCircleOutline}
                     size={1}
                     className={checkWebuiUpdate.isFetching || webuiUpdateResult.isLoading
-                      ? 'text-header-text-primary'
+                      ? 'text-topnav-text-primary'
                       : 'text-header-text-important'}
                     spin={checkWebuiUpdate.isFetching || webuiUpdateResult.isLoading}
                   />

src/core/router/index.tsx

@@ -114,7 +114,7 @@ const router = createBrowserRouter(
 
 const Router = () => {
   const apikey = useSelector((state: RootState) => state.apiSession.apikey);
-  const webuiPreviewTheme = (useSelector((state: RootState) => state.misc.webuiPreviewTheme) ?? '') as string;
+  const webuiPreviewTheme = (useSelector((state: RootState) => state.misc.webuiPreviewTheme) as unknown) as string;
 
   const settingsQuery = useGetSettingsQuery(undefined, { skip: apikey === '' });
   const { theme } = settingsQuery.data?.WebUI_Settings ?? initialSettings.WebUI_Settings;

src/css/theme-shoko-gray.css

@@ -14,7 +14,6 @@
   --header-background: #2c333e;
   --header-icon: #cfd8e3;
   --header-text: #cfd8e3;
-  --header-text-primary: #44a3ff;
   --header-text-important: #10c469;
   --header-user-background: #44a3ff;
   --header-user-text: #010f1c;
@@ -48,4 +47,5 @@
   --topnav-icon-primary: #cfd8e3;
   --topnav-icon-warning: #f9c851;
   --topnav-text: #cfd8e3;
+  --topnav-text-primary: #44a3ff;
 }

src/pages/collection/Series.tsx

@@ -48,7 +48,7 @@ const SeriesTab = ({ icon, text, to }) => (
         isActive && 'text-panel-text-primary',
       )}
   >
-    <Icon path={icon} size={1} />
+    <Icon className="text-panel-icon" path={icon} size={1} />
     {text}
   </NavLink>
 );

src/pages/collection/series/SeriesImages.tsx

@@ -14,7 +14,7 @@ import { useGetSeriesImagesQuery } from '@/core/rtkQuery/splitV3Api/seriesApi';
 import type { ImageType } from '@/core/types/api/common';
 
 const Heading = React.memo(({ setType, type }: { type: string, setType: (type: string) => void }) => (
-  <div className="flex items-center gap-x-2 text-xl font-semibold">
+  <div className="flex cursor-pointer items-center gap-x-2 text-xl font-semibold">
     Images
     <Icon path={mdiChevronRight} size={1} />
     <div className="flex gap-x-1">

src/pages/collection/series/SeriesOverview.tsx

@@ -80,7 +80,7 @@ const MetadataLink = ({ id, series, site }: { site: string, id: number | number[
             >
               {/* TODO: Use name from metadata source instead of series name in Shoko */}
               {`${series} (${linkId})`}
-              <Icon path={mdiOpenInNew} size={1} />
+              <Icon className="text-panel-icon-action" path={mdiOpenInNew} size={1} />
             </a>
           )
           : 'Series Not Linked'}
@@ -90,16 +90,16 @@ const MetadataLink = ({ id, series, site }: { site: string, id: number | number[
           ? (
             <>
               <Button disabled>
-                <Icon className="text-panel-text-primary" path={mdiPencilCircleOutline} size={1} />
+                <Icon className="text-panel-icon-action" path={mdiPencilCircleOutline} size={1} />
               </Button>
               <Button disabled>
-                <Icon className="text-panel-text-danger" path={mdiCloseCircleOutline} size={1} />
+                <Icon className="text-panel-icon-danger" path={mdiCloseCircleOutline} size={1} />
               </Button>
             </>
           )
           : (
             <Button disabled>
-              <Icon className="text-panel-text-primary" path={mdiPlusCircleOutline} size={1} />
+              <Icon className="text-panel-icon-action" path={mdiPlusCircleOutline} size={1} />
             </Button>
           )}
       </div>

src/pages/settings/tabs/AniDBSettings.tsx

@@ -359,7 +359,7 @@ function AniDBSettings() {
           <div className="flex justify-between">
             Series Title (Drag to Reorder)
             <Button onClick={() => setShowLanguagesModal('Series')} tooltip="Add Language">
-              <Icon className="text-panel-text-primary" path={mdiPlusCircleOutline} size={1} />
+              <Icon className="text-panel-icon-action" path={mdiPlusCircleOutline} size={1} />
             </Button>
           </div>
           <div className="flex rounded-md border border-panel-border bg-panel-input p-4">
@@ -371,7 +371,7 @@ function AniDBSettings() {
                     <div className="mt-2.5 flex items-center justify-between group-first:mt-0">
                       {languageDescription[language]}
                       <Button onClick={() => removeLanguage(language)} tooltip="Remove">
-                        <Icon className="text-panel-text-primary" path={mdiMinusCircleOutline} size={1} />
+                        <Icon className="text-panel-icon-action" path={mdiMinusCircleOutline} size={1} />
                       </Button>
                     </div>
                   ),
@@ -382,7 +382,7 @@ function AniDBSettings() {
           <div className="flex justify-between">
             Episode Title (Drag to Reorder)
             <Button onClick={() => setShowLanguagesModal('Episode')} tooltip="Add Language">
-              <Icon className="text-panel-text-primary" path={mdiPlusCircleOutline} size={1} />
+              <Icon className="text-panel-icon-action" path={mdiPlusCircleOutline} size={1} />
             </Button>
           </div>
           <div className="flex rounded-md border border-panel-border bg-panel-input p-4">
@@ -394,7 +394,7 @@ function AniDBSettings() {
                     <div className="mt-2.5 flex items-center justify-between group-first:mt-0">
                       {languageDescription[language]}
                       <Button onClick={() => removeLanguage(language, true)} tooltip="Remove">
-                        <Icon className="text-panel-text-primary" path={mdiMinusCircleOutline} size={1} />
+                        <Icon className="text-panel-icon-action" path={mdiMinusCircleOutline} size={1} />
                       </Button>
                     </div>
                   ),

src/pages/settings/tabs/GeneralSettings.tsx

@@ -121,7 +121,7 @@ function GeneralSettings() {
             <Icon
               path={mdiRefresh}
               size={1}
-              className="text-panel-text-primary"
+              className="text-panel-icon-action"
               spin={webuiUpdateCheckResult.isFetching}
             />
           </Button>
@@ -141,7 +141,7 @@ function GeneralSettings() {
               >
                 {`(${version.data?.Server.Commit?.slice(0, 7)})`}
               </a>
-              <Icon className="text-panel-text-primary" path={mdiOpenInNew} size={1} />
+              <Icon className="text-panel-icon-action" path={mdiOpenInNew} size={1} />
             </div>
           </div>
           <div className="flex justify-between">
@@ -160,7 +160,7 @@ function GeneralSettings() {
               >
                 {`(${UI_VERSION})`}
               </a>
-              <Icon className="text-panel-text-primary" path={mdiOpenInNew} size={1} />
+              <Icon className="text-panel-icon-action" path={mdiOpenInNew} size={1} />
             </div>
           </div>
           <div className="flex items-center justify-between">

src/pages/settings/tabs/UserManagementSettings.tsx

@@ -248,10 +248,10 @@ function UserManagementSettings() {
               <div>{user.Username}</div>
               <div className="flex gap-x-2">
                 <div onClick={() => setSelectedUser(user)}>
-                  <Icon path={mdiCircleEditOutline} size={1} className="cursor-pointer text-panel-text-primary" />
+                  <Icon path={mdiCircleEditOutline} size={1} className="cursor-pointer text-panel-icon-action" />
                 </div>
                 <div onClick={() => deleteSelectedUser(user)}>
-                  <Icon path={mdiMinusCircleOutline} size={1} className="cursor-pointer text-panel-text-danger" />
+                  <Icon path={mdiMinusCircleOutline} size={1} className="cursor-pointer text-panel-icon-danger" />
                 </div>
               </div>
             </div>

tailwind.config.js

@@ -48,7 +48,6 @@ module.exports = {
         'header-background': 'var(--header-background)',
         'header-icon': 'var(--header-icon)',
         'header-text': 'var(--header-text)',
-        'header-text-primary': 'var(--header-text-primary)',
         'header-text-important': 'var(--header-text-important)',
         'header-user-background': 'var(--header-user-background)',
         'header-user-text': 'var(--header-user-text)',
@@ -82,6 +81,7 @@ module.exports = {
         'topnav-icon-primary': 'var(--topnav-icon-primary)',
         'topnav-icon-warning': 'var(--topnav-icon-warning)',
         'topnav-text': 'var(--topnav-text)',
+        'topnav-text-primary': 'var(--topnav-text-primary)',
         transparent: 'transparent',
       },
       spacing: {