Finish Theme Refactor.

ShokoAnime · Oct 21, 2023 · b5e50d7 · b5e50d7
1 parent bc46eb6
commit b5e50d7
Show file tree

Hide file tree

Showing 37 changed files with 159 additions and 157 deletions.
diff --git a/src/components/BackgroundImagePlaceholderDiv.tsx b/src/components/BackgroundImagePlaceholderDiv.tsx
@@ -75,7 +75,7 @@ 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 }}

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/CollectionView.tsx b/src/components/Collection/CollectionView.tsx
@@ -162,7 +162,7 @@ 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 */}
@@ -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() }}>

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,7 +40,7 @@ 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',
+      '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',
     )}
   >
@@ -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`,
       }}
@@ -132,12 +132,12 @@ const ListViewItem = ({ isSeries, isSidebarOpen, item, mainSeries }: Props) => {
                 <Icon
                   path={mdiPencilCircleOutline}
                   size="2rem"
-                  className="text-overlay-icon"
+                  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>

diff --git a/src/components/Collection/PosterViewItem.tsx b/src/components/Collection/PosterViewItem.tsx
@@ -58,7 +58,7 @@ 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-text-important" />
+                <Icon path={mdiCheckboxMarkedCircleOutline} size={1} className="text-panel-icon-important" />
               )}
             </div>
           )}
@@ -67,12 +67,12 @@ const PosterViewItem = ({ isSeries = false, item }: Props) => {
               <Icon
                 path={mdiPencilCircleOutline}
                 size="2rem"
-                className="text-overlay-icon"
+                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"
+            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/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 () => {

diff --git a/src/components/Dialogs/LanguagesModal.tsx b/src/components/Dialogs/LanguagesModal.tsx
@@ -111,17 +111,19 @@ function LanguagesModal({ onClose, type }: Props) {
       onRequestClose={onClose}
       title={`${type} Languages`}
     >
-      <div className="flex flex-col gap-y-1.5 overflow-y-auto rounded-md border border-panel-border bg-panel-background-alt px-3 py-2">
-        {Object.keys(languageDescription).map(key => (
-          <Checkbox
-            id={key}
-            key={key}
-            isChecked={languages.includes(key)}
-            onChange={handleInputChange}
-            label={languageDescription[key]}
-            justify
-          />
-        ))}
+      <div className="w-full rounded-md border border-panel-border bg-panel-input p-4 capitalize">
+        <div className="flex h-80 flex-col gap-y-1.5 overflow-y-auto rounded-md bg-panel-input px-3 py-2">
+          {Object.keys(languageDescription).map(key => (
+            <Checkbox
+              id={key}
+              key={key}
+              isChecked={languages.includes(key)}
+              onChange={handleInputChange}
+              label={languageDescription[key]}
+              justify
+            />
+          ))}
+        </div>
       </div>
       <div className="flex justify-end gap-x-3 font-semibold">
         <Button onClick={onClose} buttonType="secondary" className="px-5 py-2">Discard</Button>

diff --git a/src/components/Dialogs/QueueModal.tsx b/src/components/Dialogs/QueueModal.tsx
@@ -282,21 +282,21 @@ const QueueModal = ({ onClose, show: showModal }: Props) => {
           Clear Queue
         </Button>
       </div>
-      <div className="flex flex-row">
-        <div className="mt-2 w-full rounded-md border border-panel-border bg-panel-background-alt p-4 capitalize">
-          <div className="flex h-64 flex-col overflow-y-auto bg-panel-background-alt">
-            <div className="mt-0 flex gap-x-3">
-              <div className="grow">
-                <strong>Task</strong>
-              </div>
-              <div className="px-1">
-                <strong>Status</strong>
-              </div>
-            </div>
+      <div className="flex flex-col">
+        <div className="flex w-full rounded-md border border-panel-border bg-panel-input p-4 capitalize">
+          <div className="grow">
+            <strong>Task</strong>
+          </div>
+          <div className="px-1">
+            <strong>Status</strong>
+          </div>
+        </div>
+        <div className="mt-2 w-full rounded-md border border-panel-border bg-panel-input p-4 capitalize">
+          <div className="flex h-64 flex-col overflow-y-auto bg-panel-input">
             {items}
             {isLoading && (
               <div className="flex grow items-center justify-center">
-                <Icon path={mdiLoading} spin size={3} />
+                <Icon className="text-panel-text-primary" path={mdiLoading} spin size={3} />
               </div>
             )}
             {!isLoading && items.length === 0 && (

diff --git a/src/components/Input/Button.tsx b/src/components/Input/Button.tsx
@@ -44,7 +44,7 @@ function Button(props: Props) {
       className={cx([
         `${className} button font-semibold transition ease-in-out rounded focus:shadow-none focus:outline-none`,
         buttonType !== undefined
-        && `${buttonTypeClasses[buttonType]} drop-shadow-md`,
+        && `${buttonTypeClasses[buttonType]} border border-panel-border`,
         loading && 'cursor-default',
         disabled && 'opacity-50 cursor-default',
       ])}

diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -79,7 +79,7 @@ function Input(props: Props) {
           {endIcon && (
             <div
               onClick={endIconClick}
-              className="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer text-panel-text-primary"
+              className="text-panel-icon-primary absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer"
             >
               <Icon path={endIcon} size={1} horizontal vertical rotate={180} />
             </div>

diff --git a/src/components/Input/Select.tsx b/src/components/Input/Select.tsx
@@ -38,7 +38,7 @@ function Select(props: Props) {
           >
             {children}
           </select>
-          <div className="pointer-events-none absolute inset-y-0 right-0 py-2 pr-2">
+          <div className="pointer-events-none absolute inset-y-0 right-0 py-2 pr-2 text-panel-icon">
             <Icon path={mdiChevronDown} size={1} />
           </div>
         </div>

diff --git a/src/components/Panels/ModalPanel.tsx b/src/components/Panels/ModalPanel.tsx
@@ -13,9 +13,9 @@ type Props = {
 };
 
 const sizeClass = {
-  sm: 'w-[31.25rem]',
+  sm: 'w-[32rem]',
   md: 'w-[40rem]',
-  lg: 'w-[56.875rem]',
+  lg: 'w-[62rem]',
 };
 
 function ModalPanel(props: Props) {

diff --git a/src/components/Utilities/Unrecognized/AvDumpFileIcon.tsx b/src/components/Utilities/Unrecognized/AvDumpFileIcon.tsx
@@ -47,7 +47,7 @@ const AVDumpFileIcon = ({ file, truck = false }: { file: FileType, truck?: boole
     if (dumpSession?.status === 'Failed') {
       return {
         path: mdiFileDocumentAlertOutline,
-        color: 'text-panel-text-danger',
+        color: 'text-panel-icon-danger',
         title: 'Dump Failed!',
         state: 'failed',
       } as const;
@@ -56,7 +56,7 @@ const AVDumpFileIcon = ({ file, truck = false }: { file: FileType, truck?: boole
     if (dumpSession?.status === 'Success') {
       return {
         path: mdiFileDocumentCheckOutline,
-        color: 'text-panel-text-important',
+        color: 'text-panel-icon-important',
         title: 'Dumped Successfully!',
         state: 'success',
       } as const;
@@ -65,7 +65,7 @@ const AVDumpFileIcon = ({ file, truck = false }: { file: FileType, truck?: boole
     if (file.AVDump.Status === 'Queued') {
       return {
         path: mdiFileDocumentRefreshOutline,
-        color: 'text-panel-text-warning',
+        color: 'text-panel-icon-action',
         title: 'Dumping Queued!',
         state: 'queued',
       } as const;
@@ -74,7 +74,7 @@ const AVDumpFileIcon = ({ file, truck = false }: { file: FileType, truck?: boole
     if (file.AVDump.LastDumpedAt) {
       return {
         path: mdiFileDocumentCheckOutline,
-        color: 'text-panel-text-important',
+        color: 'text-panel-icon-important',
         title: 'Previously Dumped!',
         state: 'success',
       } as const;
@@ -83,7 +83,7 @@ const AVDumpFileIcon = ({ file, truck = false }: { file: FileType, truck?: boole
     if (truck) {
       return {
         path: mdiDumpTruck,
-        color: 'text-panel-text-primary',
+        color: 'text-panel-icon-action',
         title: 'Click to Dump!',
         state: 'idle',
       } as const;

diff --git a/src/components/Utilities/Unrecognized/AvDumpSeriesSelectModal.tsx b/src/components/Utilities/Unrecognized/AvDumpSeriesSelectModal.tsx
@@ -65,45 +65,52 @@ function AvDumpSeriesSelectModal({ getLinks, onClose, show }: Props) {
       onRequestClose={onClose}
       title="AvDump Series Select"
     >
-      <Button
-        className="mt-4 flex items-center justify-center gap-x-2.5 bg-panel-text-primary p-2 font-semibold text-panel-text-alt"
-        onClick={handleCopy}
-      >
-        <Icon path={mdiFileDocumentMultipleOutline} size={0.833} />
-        Copy ED2K Hashes
-      </Button>
-      <div className="flex h-auto max-h-64 flex-col gap-y-1 overflow-y-auto break-all rounded-md bg-panel-background-alt p-4 text-sm">
-        {links.map(link => <div key={`link-${link.split('|')[4]}`}>{link}</div>)}
-      </div>
-      <Input
-        id="search"
-        value={searchText}
-        type="text"
-        placeholder="Search..."
-        onChange={e => handleSearch(e.target.value)}
-        startIcon={mdiMagnify}
-      />
-      <div className="flex h-64 flex-col gap-y-1 overflow-y-auto overflow-x-clip rounded-md border border-panel-border bg-panel-background-alt p-4">
-        {searchResults.isLoading
-          ? (
-            <div className="flex h-full items-center justify-center">
-              <Icon path={mdiLoading} size={3} spin className="text-panel-text-primary" />
+      <div className="flex flex-col gap-y-4">
+        <Button
+          buttonType="primary"
+          className="flex w-full items-center justify-center gap-x-2.5 p-2"
+          onClick={handleCopy}
+        >
+          <Icon path={mdiFileDocumentMultipleOutline} size={0.833} />
+          Copy ED2K Hashes
+        </Button>
+        <div className="flex h-auto max-h-64 flex-col gap-y-1 overflow-y-auto break-all rounded-md bg-panel-input p-4 text-sm">
+          {links.map(link => <div key={`link-${link.split('|')[4]}`}>{link}</div>)}
+        </div>
+        <div className="flex flex-col gap-y-2">
+          <Input
+            id="search"
+            value={searchText}
+            type="text"
+            placeholder="Search..."
+            onChange={e => handleSearch(e.target.value)}
+            startIcon={mdiMagnify}
+          />
+          <div className="w-full rounded-md border border-panel-border bg-panel-input p-4 capitalize">
+            <div className="flex h-72 flex-col gap-y-1 overflow-y-auto overflow-x-clip rounded-md bg-panel-input pr-2 ">
+              {searchResults.isLoading
+                ? (
+                  <div className="flex h-full items-center justify-center">
+                    <Icon path={mdiLoading} size={3} spin className="text-panel-text-primary" />
+                  </div>
+                )
+                : (searchResults.data ?? []).map(result => (
+                  <a
+                    href={`https://anidb.net/anime/${result.ID}/release/add`}
+                    key={result.ID}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center justify-between"
+                  >
+                    <div className="line-clamp-1">{result.Title}</div>
+                    <div className="text-panel-text-primary">
+                      <Icon path={mdiOpenInNew} size={0.833} />
+                    </div>
+                  </a>
+                ))}
             </div>
-          )
-          : (searchResults.data ?? []).map(result => (
-            <a
-              href={`https://anidb.net/anime/${result.ID}/release/add`}
-              key={result.ID}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center justify-between"
-            >
-              <div className="line-clamp-1">{result.Title}</div>
-              <div className="text-panel-text-primary">
-                <Icon path={mdiOpenInNew} size={0.833} />
-              </div>
-            </a>
-          ))}
+          </div>
+        </div>
       </div>
     </ModalPanel>
   );

diff --git a/src/components/Utilities/Unrecognized/RangeFillModal.tsx b/src/components/Utilities/Unrecognized/RangeFillModal.tsx
@@ -23,10 +23,11 @@ const RangeFillModal = ({ onClose, rangeFill, show }: Props) => {
   return (
     <ModalPanel
       show={show}
+      size="sm"
       onRequestClose={onClose}
       title="Range Fill Options"
     >
-      <div className="flex flex-col gap-y-3.5">
+      <div className="flex flex-col gap-y-2">
         <SelectSmall label="Type" id="Type" value={epType} onChange={e => setEpType(e.target.value)}>
           <option value="Normal">Episode</option>
           <option value="Special">Special</option>

diff --git a/src/components/Utilities/UtilitiesTable.tsx b/src/components/Utilities/UtilitiesTable.tsx
@@ -138,7 +138,7 @@ function UtilitiesTable(props: Props) {
               <tr
                 key={row.id}
                 className={cx(
-                  parseInt(row.id, 10) % 2 === 0 ? 'bg-panel-background' : 'bg-panel-background',
+                  parseInt(row.id, 10) % 2 === 0 ? 'bg-panel-background' : 'bg-panel-background-alt',
                   'cursor-pointer',
                 )}
                 onClick={e => handleRowSelect(e, row)}