CSS Theme Update (#652)

* Initial Work on Theme Refactor. * Finish Theme Refactor.
ShokoAnime · Oct 21, 2023 · d40dea2 · d40dea2
1 parent 281713e
commit d40dea2
Show file tree

Hide file tree

Showing 89 changed files with 763 additions and 729 deletions.
diff --git a/src/components/BackgroundImagePlaceholderDiv.tsx b/src/components/BackgroundImagePlaceholderDiv.tsx
@@ -75,25 +75,25 @@ function BackgroundImagePlaceholderDiv(props: Props) {
     <div className={`${className} relative overflow-hidden`}>
       <div
         className={cx(
-          'absolute w-full h-full flex flex-col top-0 left-0 text-center z-[-1]',
+          'absolute w-full h-full flex flex-col top-0 left-0 text-center z-[-1] rounded-md',
           zoomOnHover && 'group-hover:scale-105 transition-transform',
         )}
         style={{ background: backgroundImage ? `center / cover no-repeat url('${backgroundImage.src}')` : undefined }}
       >
         {imageError && (
           <div
             className={cx(
-              'w-full h-full flex flex-col justify-center items-center bg-overlay-background p-8',
+              'w-full h-full flex flex-col justify-center items-center bg-panel-input p-8',
               hidePlaceholderOnHover && 'group-hover:opacity-0',
             )}
           >
-            <Icon path={mdiInformationOutline} size={1.5} className="text-panel-important" />
+            <Icon path={mdiInformationOutline} size={1.5} className="text-panel-text-important" />
             <div className="my-4 font-semibold">Failed to Load</div>
             {imageError}
           </div>
         )}
         {!backgroundImage && !imageError && (
-          <div className="flex grow items-center justify-center text-panel-primary">
+          <div className="flex grow items-center justify-center text-panel-text-primary">
             <Icon path={mdiLoading} spin size={3} />
           </div>
         )}

diff --git a/src/components/CharacterImage.tsx b/src/components/CharacterImage.tsx
@@ -35,7 +35,7 @@ function CharacterImage(props: Props) {
         {!imageLoaded && (
           <div
             className={cx(
-              'w-full h-full flex flex-col justify-center items-center bg-panel-background-toolbar p-8',
+              'w-full h-full flex flex-col justify-center items-center bg-panel-input p-8',
               hidePlaceholderOnHover && 'group-hover:opacity-0',
             )}
           >

diff --git a/src/components/Collection/AnidbDescription.tsx b/src/components/Collection/AnidbDescription.tsx
@@ -1,11 +1,8 @@
 import React, { useMemo } from 'react';
 
 const RemoveSummaryRegex = /^\n(Source|Note|Summary):.*/mg;
-
 const CleanMiscLinesRegex = /^(\*|--|~) /sg;
-
 const CleanMultiEmptyLinesRegex = /\n{2,}/sg;
-
 const LinkRegex = /(?<url>http:\/\/anidb\.net\/(?<type>ch|cr|[feat])(?<id>\d+)) \[(?<text>[^\]]+)]/g;
 
 const AnidbDescription = ({ text }: { text: string }) => {

diff --git a/src/components/Collection/CollectionTitle.tsx b/src/components/Collection/CollectionTitle.tsx
@@ -11,7 +11,7 @@ type Props = {
 
 const CollectionTitle = ({ count, filterOrGroup }: Props) => (
   <div className="flex items-center gap-x-2 text-xl font-semibold">
-    <Link to="/webui/collection" className={cx(filterOrGroup ? 'text-panel-primary' : 'pointer-events-none')}>
+    <Link to="/webui/collection" className={cx(filterOrGroup ? 'text-panel-text-primary' : 'pointer-events-none')}>
       Entire Collection
     </Link>
     {filterOrGroup && (
@@ -21,7 +21,7 @@ const CollectionTitle = ({ count, filterOrGroup }: Props) => (
       </>
     )}
     <span>|</span>
-    <span className="text-panel-important">
+    <span className="text-panel-text-important">
       {/* Count is set to -1 when series data is empty and is used as a flag to signify that in other places */}
       {/* But ideally we should 0 to the user */}
       {count === -1 ? 0 : count}

diff --git a/src/components/Collection/CollectionView.tsx b/src/components/Collection/CollectionView.tsx
@@ -162,14 +162,14 @@ const CollectionView = ({ isSidebarOpen, mode, setGroupTotal, setTimelineSeries
       <div
         className={cx(
           'flex grow rounded-md items-center font-semibold justify-center',
-          mode === 'poster' && 'px-6 py-8 bg-panel-background border-panel-border border',
+          mode === 'poster' && 'px-8 py-8 bg-panel-background border-panel-border border',
         )}
       >
         {/* This is always equal width to the actual grid container so we are using the ref here */}
         {/* Otherwise we would need two refs to remove flicker */}
         <div className="flex w-full justify-center" ref={gridContainerRef}>
           {isLoading || seriesData.total === -1
-            ? <Icon path={mdiLoading} size={3} className="text-panel-primary" spin />
+            ? <Icon path={mdiLoading} size={3} className="text-panel-text-primary" spin />
             : 'No series/groups available!'}
         </div>
       </div>
@@ -180,7 +180,7 @@ const CollectionView = ({ isSidebarOpen, mode, setGroupTotal, setTimelineSeries
     <div
       className={cx(
         'flex grow rounded-md',
-        mode === 'poster' && 'px-6 py-8 bg-panel-background border-panel-border border',
+        mode === 'poster' && 'px-8 py-8 bg-panel-background border-panel-border border',
       )}
     >
       <div className="relative w-full" style={{ height: virtualizer.getTotalSize() }}>
@@ -251,7 +251,7 @@ const CollectionView = ({ isSidebarOpen, mode, setGroupTotal, setTimelineSeries
             } else {
               items.push(
                 <div
-                  className="flex shrink-0 items-center justify-center rounded-md border border-panel-border text-panel-primary"
+                  className="flex shrink-0 items-center justify-center rounded-md border border-panel-border text-panel-text-primary"
                   key={`loading-${i}`}
                   style={{
                     width: `${itemWidth / 16}rem`,

diff --git a/src/components/Collection/DisplaySettingsModal.tsx b/src/components/Collection/DisplaySettingsModal.tsx
@@ -62,7 +62,7 @@ const DisplaySettingsModal = ({ onClose, show }: Props) => {
       <div className="flex flex-col gap-y-8">
         <div className="flex flex-col gap-y-4">
           <div className="border-b border-panel-border pb-4 font-semibold">Poster View Options</div>
-          <div className="flex flex-col gap-y-3">
+          <div className="flex flex-col gap-y-2">
             <Checkbox
               justify
               label="Total Episodes"
@@ -96,7 +96,7 @@ const DisplaySettingsModal = ({ onClose, show }: Props) => {
 
         <div className="flex flex-col gap-y-4">
           <div className="border-b border-panel-border pb-4 font-semibold">List View Options</div>
-          <div className="flex flex-col gap-y-3">
+          <div className="flex flex-col gap-2">
             <Checkbox
               justify
               label="Item Type"

diff --git a/src/components/Collection/ListViewItem.tsx b/src/components/Collection/ListViewItem.tsx
@@ -40,8 +40,8 @@ const renderFileSources = (sources: SeriesSizesFileSourcesType): string => {
 const SeriesTag = ({ text, type }: { text: string, type: 'AniDB' | 'User' }) => (
   <div
     className={cx(
-      'text-xs font-semibold flex gap-x-2 items-center border-2 border-panel-border-alt rounded-md p-2 whitespace-nowrap capitalize',
-      type === 'User' ? 'text-panel-important' : 'text-panel-primary',
+      'text-xs font-semibold flex gap-x-2 items-center border-2 border-panel-tags rounded-md p-2 whitespace-nowrap capitalize',
+      type === 'User' ? 'text-panel-text-important' : 'text-panel-text-primary',
     )}
   >
     <Icon path={mdiTagTextOutline} size="1rem" />
@@ -114,7 +114,7 @@ const ListViewItem = ({ isSeries, isSidebarOpen, item, mainSeries }: Props) => {
 
   return (
     <div
-      className="flex h-full shrink-0 grow flex-col content-center gap-y-4 rounded-md border border-overlay-border bg-panel-background p-8"
+      className="flex h-full shrink-0 grow flex-col content-center gap-y-4 rounded-md border border-panel-border bg-panel-background p-8"
       style={{
         width: `${((isSeries || isSidebarOpen) ? listItemSize.widthAlt : listItemSize.width) / 16}rem`,
       }}
@@ -127,17 +127,17 @@ const ListViewItem = ({ isSeries, isSidebarOpen, item, mainSeries }: Props) => {
             hidePlaceholderOnHover
             zoomOnHover
           >
-            <div className="pointer-events-none z-10 flex h-full bg-overlay-background p-3 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
+            <div className="pointer-events-none z-10 flex h-full bg-panel-background-transparent p-3 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
               <Link to="#" className="h-fit">
                 <Icon
                   path={mdiPencilCircleOutline}
                   size="2rem"
-                  className="text-overlay-icon hover:text-overlay-icon-hover"
+                  className="text-panel-icon-important"
                 />
               </Link>
             </div>
             {showGroupIndicator && groupCount > 1 && (
-              <div className="absolute bottom-0 left-0 flex w-full justify-center rounded-bl-md bg-panel-background-overlay py-1.5 text-sm font-semibold text-panel-text-transparent opacity-100 transition-opacity group-hover:opacity-0">
+              <div className="text-panel-text-transparent absolute bottom-0 left-0 flex w-full justify-center rounded-bl-md bg-panel-background-overlay py-1.5 text-sm font-semibold opacity-100 transition-opacity group-hover:opacity-0">
                 {groupCount}
                 &nbsp;Series
               </div>
@@ -203,7 +203,7 @@ const ListViewItem = ({ isSeries, isSidebarOpen, item, mainSeries }: Props) => {
                 </span>
               </div>
               <div className={cx('gap-x-2 flex align-middle items-center', missingEpisodesCount === 0 && 'hidden')}>
-                <Icon className="text-panel-warning" path={mdiAlertCircleOutline} size={1} />
+                <Icon className="text-panel-text-warning" path={mdiAlertCircleOutline} size={1} />
                 <span className="text-sm font-semibold">
                   {formatThousand(item.Sizes.Total.Episodes - item.Sizes.Local.Episodes)}
                   &nbsp;(

diff --git a/src/components/Collection/PosterViewItem.tsx b/src/components/Collection/PosterViewItem.tsx
@@ -58,21 +58,21 @@ const PosterViewItem = ({ isSeries = false, item }: Props) => {
           {showUnwatchedCount && (
             <div className="absolute right-0 top-0 flex min-w-[2.5rem] justify-center rounded-bl-md bg-panel-background-overlay p-2 font-semibold opacity-100 transition-opacity group-hover:opacity-0">
               {unwatchedCount || (
-                <Icon path={mdiCheckboxMarkedCircleOutline} size={1} className="text-panel-important" />
+                <Icon path={mdiCheckboxMarkedCircleOutline} size={1} className="text-panel-icon-important" />
               )}
             </div>
           )}
-          <div className="pointer-events-none z-50 flex h-full bg-overlay-background p-3 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
+          <div className="pointer-events-none z-50 flex h-full bg-panel-background-transparent p-3 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
             <Link to="#" className="h-fit">
               <Icon
                 path={mdiPencilCircleOutline}
                 size="2rem"
-                className="text-overlay-icon hover:text-overlay-icon-hover"
+                className="text-panel-icon"
               />
             </Link>
           </div>
           {showGroupIndicator && !isSeries && groupCount > 1 && (
-            <div className="absolute bottom-0 left-0 flex w-full justify-center rounded-bl-md bg-panel-background-overlay py-1.5 text-sm font-semibold text-panel-text-transparent opacity-100 transition-opacity group-hover:opacity-0">
+            <div className="absolute bottom-0 left-0 flex w-full justify-center bg-panel-background-overlay py-1.5 text-sm font-semibold text-panel-text opacity-100 transition-opacity group-hover:opacity-0">
               {groupCount}
               &nbsp;Series
             </div>
@@ -81,7 +81,7 @@ const PosterViewItem = ({ isSeries = false, item }: Props) => {
         <p className="line-clamp-1 text-ellipsis text-center text-sm font-semibold" title={item.Name}>{item.Name}</p>
         {showEpisodeCount && (
           <p
-            className="mt-1.5 line-clamp-1 text-ellipsis text-center text-sm font-semibold text-panel-text-transparent"
+            className="mt-1.5 line-clamp-1 text-ellipsis text-center text-sm font-semibold opacity-65"
             title={episodeCount.toString()}
           >
             {episodeCount}

diff --git a/src/components/Collection/Series/EditSeriesModal.tsx b/src/components/Collection/Series/EditSeriesModal.tsx
@@ -40,7 +40,7 @@ const EditSeriesModal = (props: Props) => {
         <div className="flex min-w-[10rem] flex-col gap-y-4 border-r-2 border-panel-border">
           {map(tabs, (value, key) => (
             <div
-              className={cx('font-semibold cursor-pointer', activeTab === key && 'text-panel-primary')}
+              className={cx('font-semibold cursor-pointer', activeTab === key && 'text-panel-text-primary')}
               key={key}
               onClick={() => setActiveTab(key)}
             >

diff --git a/src/components/Collection/Series/EditSeriesTabs/SeriesActionsTab.tsx b/src/components/Collection/Series/EditSeriesTabs/SeriesActionsTab.tsx
@@ -19,7 +19,7 @@ type Props = {
 const Action = ({ name, onClick }: { name: string, onClick: () => void }) => (
   <div className="flex justify-between gap-x-3" onClick={onClick}>
     {name}
-    <Button onClick={() => {}} className="text-panel-primary">
+    <Button onClick={() => {}} className="text-panel-text-primary">
       <Icon path={mdiPlayCircleOutline} size={1} />
     </Button>
   </div>

diff --git a/src/components/Collection/Series/EpisodeDetails.tsx b/src/components/Collection/Series/EpisodeDetails.tsx
@@ -22,7 +22,7 @@ function EpisodeDetails({ episode }: { episode: EpisodeType }) {
         </div>
         {episode.Size > 1 && (
           <div>
-            <span className="text-panel-important">{episode.Size}</span>
+            <span className="text-panel-text-important">{episode.Size}</span>
             &nbsp;Files
           </div>
         )}

diff --git a/src/components/Collection/Series/EpisodeFiles.tsx b/src/components/Collection/Series/EpisodeFiles.tsx
@@ -38,7 +38,7 @@ const EpisodeFiles = ({ episodeFiles }: Props) => {
 
         return (
           <div className="flex flex-col gap-y-8" key={selectedFile.ID}>
-            <div className="flex grow gap-x-3 rounded-md border border-panel-border bg-panel-background px-4 py-3">
+            <div className="flex grow gap-x-3 rounded-md border border-panel-border bg-panel-background-alt px-4 py-3">
               <div
                 className="flex cursor-pointer items-center gap-x-2"
                 onClick={async () => {
@@ -55,7 +55,7 @@ const EpisodeFiles = ({ episodeFiles }: Props) => {
               </div>
               {selectedFile.AniDB && (
                 <a href={`https://anidb.net/file/${selectedFile.AniDB.ID}`} target="_blank" rel="noopener noreferrer">
-                  <div className="flex items-center gap-x-2 font-semibold text-panel-primary">
+                  <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} />
@@ -64,7 +64,7 @@ const EpisodeFiles = ({ episodeFiles }: Props) => {
               )}
               {ReleaseGroupID > 0 && (
                 <a href={`https://anidb.net/group/${ReleaseGroupID}`} target="_blank" rel="noopener noreferrer">
-                  <div className="flex items-center gap-x-2 font-semibold text-panel-primary">
+                  <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} />
@@ -73,7 +73,7 @@ const EpisodeFiles = ({ episodeFiles }: Props) => {
               )}
 
               {selectedFile.IsVariation && (
-                <span className="ml-auto font-semibold text-panel-important">Variation</span>
+                <span className="ml-auto font-semibold text-panel-text-important">Variation</span>
               )}
             </div>
 

diff --git a/src/components/Collection/Series/SeriesEpisode.tsx b/src/components/Collection/Series/SeriesEpisode.tsx
@@ -25,15 +25,15 @@ type Props = {
 const StateIcon = ({ icon, show }: { icon: string, show: boolean }) => (
   show
     ? (
-      <div className="flex items-center justify-center rounded-md bg-panel-background-transparent px-3 py-2 text-panel-important shadow-[0_4px_4px_rgba(0,0,0,0.25)]">
+      <div className="flex items-center justify-center rounded-md bg-panel-background-transparent px-3 py-2 text-panel-text-important shadow-[0_4px_4px_rgba(0,0,0,0.25)]">
         <Icon path={icon} size={1} />
       </div>
     )
     : null
 );
 
 const StateButton = ({ active, icon, onClick }: { icon: string, active: boolean, onClick: () => void }) => (
-  <Button className={active ? 'text-panel-important' : 'text-panel-text'} onClick={onClick}>
+  <Button className={active ? 'text-panel-text-important' : 'text-panel-text'} onClick={onClick}>
     <Icon path={icon} size="2rem" />
   </Button>
 );
@@ -70,7 +70,7 @@ const SeriesEpisode = ({ episode }: Props) => {
             <StateIcon icon={mdiEyeCheckOutline} show={episode.Watched !== null} />
             <StateIcon icon={mdiEyeOffOutline} show={episode.IsHidden} />
           </div>
-          <div className="pointer-events-none z-10 flex h-full justify-between bg-overlay-background p-3 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
+          <div className="pointer-events-none z-10 flex h-full justify-between bg-panel-background-transparent p-3 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100">
             <div>
               <StateButton icon={mdiPencilCircleOutline} active={false} onClick={() => {}} />
             </div>

diff --git a/src/components/Dialogs/ActionsModal.tsx b/src/components/Dialogs/ActionsModal.tsx
@@ -110,10 +110,10 @@ const Action = ({ actionKey }: { actionKey: string }) => {
       <div className="flex justify-between gap-x-3">
         {name}
         <div className="flex gap-x-2.5">
-          <Button onClick={() => setShowInfo(prev => !prev)} className="text-panel-primary">
+          <Button onClick={() => setShowInfo(prev => !prev)} className="text-panel-text-primary">
             <Icon path={mdiInformationOutline} size={1} />
           </Button>
-          <Button onClick={() => runAction(name, functionName)} className="text-panel-primary">
+          <Button onClick={() => runAction(name, functionName)} className="text-panel-text-primary">
             <Icon path={mdiPlayCircleOutline} size={1} />
           </Button>
         </div>
@@ -144,7 +144,7 @@ function ActionsModal({ onClose, show }: Props) {
         <div className="flex min-w-[8rem] flex-col gap-y-4 border-r-2 border-panel-border">
           {map(actions, (value, key) => (
             <div
-              className={cx('font-semibold cursor-pointer', activeTab === key && 'text-panel-primary')}
+              className={cx('font-semibold cursor-pointer', activeTab === key && 'text-panel-text-primary')}
               key={key}
               onClick={() => setActiveTab(key)}
             >

diff --git a/src/components/Dialogs/BrowseFolderModal.tsx b/src/components/Dialogs/BrowseFolderModal.tsx
@@ -34,7 +34,7 @@ function BrowseFolderModal(props: Props) {
       onRequestClose={() => handleClose()}
       title="Select Import Folder"
     >
-      <div className="rounded border border-panel-border bg-panel-background-alt p-4">
+      <div className="rounded border border-panel-border bg-panel-input p-4">
         <TreeView />
       </div>
       <div className="flex justify-end gap-x-3 font-semibold">

diff --git a/src/components/Dialogs/DeleteFilesModal.tsx b/src/components/Dialogs/DeleteFilesModal.tsx
@@ -20,7 +20,7 @@ const Title = ({ fileCount }: { fileCount: number }) => (
   <div className="flex flex-row justify-between gap-x-0.5 text-xl font-semibold">
     <div>Delete Confirmation</div>
     <div className="flex gap-x-1">
-      <div className="text-panel-important">{fileCount}</div>
+      <div className="text-panel-text-important">{fileCount}</div>
       &nbsp;Files
     </div>
   </div>
@@ -46,7 +46,7 @@ function DeleteFilesModal(props: Props) {
             {file.Locations[0]?.RelativePath?.split(/[/\\]+/g).slice(-2).join('/')
               ?? `<missing file path for ${file.ID}>`}
           </div>
-          <div className="cursor-pointer text-panel-danger">
+          <div className="cursor-pointer text-panel-text-danger">
             <Icon path={mdiMinusCircleOutline} size={1} />
           </div>
         </div>