Minor QoL Improvements and Updated Modal Design.

ShokoAnime · Nov 12, 2023 · 4d4eaf3 · 4d4eaf3
1 parent dfcfa85
commit 4d4eaf3
Show file tree

Hide file tree

Showing 15 changed files with 84 additions and 51 deletions.
diff --git a/src/components/Collection/Series/EditSeriesModal.tsx b/src/components/Collection/Series/EditSeriesModal.tsx
@@ -35,9 +35,9 @@ const EditSeriesModal = (props: Props) => {
   const [activeTab, setActiveTab] = useState('actions');
 
   return (
-    <ModalPanel show={show} onRequestClose={onClose} title="Edit Series">
+    <ModalPanel show={show} onRequestClose={onClose} title="Edit Series" noPadding titleLeft>
       <div className="flex">
-        <div className="flex min-w-[10rem] flex-col gap-y-4 border-r-2 border-panel-border">
+        <div className="flex w-[12rem] shrink-0 flex-col gap-y-8 border-r border-panel-border p-8 font-semibold">
           {map(tabs, (value, key) => (
             <div
               className={cx('font-semibold cursor-pointer', activeTab === key && 'text-panel-text-primary')}
@@ -48,7 +48,7 @@ const EditSeriesModal = (props: Props) => {
             </div>
           ))}
         </div>
-        <div className="ml-8 w-full">
+        <div className="w-full p-8">
           {renderTab(activeTab, seriesId)}
         </div>
       </div>

diff --git a/src/components/Collection/Series/EditSeriesTabs/SeriesActionsTab.tsx b/src/components/Collection/Series/EditSeriesTabs/SeriesActionsTab.tsx
@@ -16,9 +16,15 @@ type Props = {
   seriesId: number;
 };
 
-const Action = ({ name, onClick }: { name: string, onClick: () => void }) => (
-  <div className="flex justify-between gap-x-3" onClick={onClick}>
-    {name}
+const Action = ({ description, name, onClick }: { name: string, description: string, onClick: () => void }) => (
+  <div
+    className="mr-4 flex flex-row justify-between gap-y-2 border-b border-panel-border pb-4 last:border-0"
+    onClick={onClick}
+  >
+    <div className="flex w-full max-w-[35rem] flex-col gap-y-2">
+      <div>{name}</div>
+      <div className="text-sm opacity-65">{description}</div>
+    </div>
     <Button onClick={() => {}} className="text-panel-text-primary">
       <Icon path={mdiPlayCircleOutline} size={1} />
     </Button>
@@ -38,9 +44,10 @@ const SeriesActionsTab = ({ seriesId }: Props) => {
   });
 
   return (
-    <div className="flex grow flex-col gap-y-2">
+    <div className="flex h-[22rem] grow flex-col gap-y-4 overflow-y-scroll">
       <Action
         name="Rescan Files"
+        description="Rescans every file associated with the series."
         onClick={() => {
           rescanSeriesFiles({ seriesId })
             .then(() => toast.success('Series files rescan queued!'))
@@ -49,6 +56,7 @@ const SeriesActionsTab = ({ seriesId }: Props) => {
       />
       <Action
         name="Rehash Files"
+        description="Rehashes every file associated with the series."
         onClick={() => {
           rehashSeriesFiles({ seriesId })
             .then(() => toast.success('Series files rehash queued!'))
@@ -57,15 +65,28 @@ const SeriesActionsTab = ({ seriesId }: Props) => {
       />
       <Action
         name="Update TVDB Info"
+        description="Gets the latest series information from TheTVDB database."
         onClick={() => {
           refreshTvdb({ seriesId })
             .then(() => toast.success('TvDB refresh queued!'))
             .catch(console.error);
         }}
       />
-      <Action name="Update AniDB Info" onClick={() => triggerAnidbRefresh(false, false)} />
-      <Action name="Update AniDB Info - Force" onClick={() => triggerAnidbRefresh(true, false)} />
-      <Action name="Update AniDB Info - XML Cache" onClick={() => triggerAnidbRefresh(false, true)} />
+      <Action
+        name="Update AniDB Info"
+        description="Gets the latest series information from the AniDB database."
+        onClick={() => triggerAnidbRefresh(false, false)}
+      />
+      <Action
+        name="Update AniDB Info - Force"
+        description="Forces a complete update from AniDB, bypassing usual checks."
+        onClick={() => triggerAnidbRefresh(true, false)}
+      />
+      <Action
+        name="Update AniDB Info - XML Cache"
+        description="Updates AniDB data using information from local XML cache."
+        onClick={() => triggerAnidbRefresh(false, true)}
+      />
     </div>
   );
 };

diff --git a/src/components/Collection/Series/EpisodeFiles.tsx b/src/components/Collection/Series/EpisodeFiles.tsx
@@ -56,7 +56,7 @@ const EpisodeFiles = ({ episodeFiles }: Props) => {
               {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-text-primary">
-                    <div className="metadata-link-icon anidb" />
+                    <div className="metadata-link-icon AniDB" />
                     {`${selectedFile.AniDB.ID} (AniDB)`}
                     <Icon className="text-panel-icon-action" path={mdiOpenInNew} size={1} />
                   </div>
@@ -65,7 +65,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-text-primary">
-                    <div className="metadata-link-icon anidb" />
+                    <div className="metadata-link-icon AniDB" />
                     {ReleaseGroupName === null ? 'Unknown' : ReleaseGroupName}
                     <Icon className="text-panel-icon-action" path={mdiOpenInNew} size={1} />
                   </div>

diff --git a/src/components/Dialogs/ActionsModal.tsx b/src/components/Dialogs/ActionsModal.tsx
@@ -103,16 +103,14 @@ const Action = ({ actionKey }: { actionKey: string }) => {
   const { functionName, name } = action;
 
   return (
-    <TransitionDiv className="flex flex-col gap-y-2">
-      <div className="flex justify-between">
-        {name}
-        <Button onClick={() => runAction(name, functionName)} className="text-panel-icon-action">
-          <Icon path={mdiPlayCircleOutline} size={1} />
-        </Button>
-      </div>
-      <div className="flex text-sm text-panel-text opacity-65">
-        {quickActions[actionKey].info}
+    <TransitionDiv className="mr-4 flex flex-row justify-between gap-y-2 border-b border-panel-border pb-4 last:border-0">
+      <div className="flex w-full max-w-[35rem] flex-col gap-y-2">
+        <div>{name}</div>
+        <div className="text-sm opacity-65">{quickActions[actionKey].info}</div>
       </div>
+      <Button onClick={() => runAction(name, functionName)} className="text-panel-icon-action">
+        <Icon path={mdiPlayCircleOutline} size={1} />
+      </Button>
     </TransitionDiv>
   );
 };
@@ -124,11 +122,13 @@ function ActionsModal({ onClose, show }: Props) {
     <ModalPanel
       show={show}
       onRequestClose={onClose}
+      title="Actions"
+      size="md"
+      titleLeft
       noPadding
     >
-      <div className="flex h-[26.75rem]">
-        <div className="flex shrink-0 flex-col gap-y-8 border-r border-panel-border bg-panel-background-alt p-8 font-semibold">
-          <div className="text-xl">Actions</div>
+      <div className="flex h-[23rem]">
+        <div className="flex w-[9.375rem] shrink-0 flex-col gap-y-8 border-r border-panel-border p-8 font-semibold">
           <div className="flex flex-col gap-y-4">
             {map(actions, (value, key) => (
               <div
@@ -143,7 +143,7 @@ function ActionsModal({ onClose, show }: Props) {
         </div>
 
         <div className="flex grow p-8 pr-6">
-          <div className="scroll-gutter flex grow flex-col gap-y-4 overflow-y-auto pr-2">
+          <div className="scroll-gutter flex grow flex-col gap-y-4 overflow-y-auto pr-2 ">
             {actions[activeTab].data.map((key: string) => <Action actionKey={key} key={key} />)}
           </div>
         </div>

diff --git a/src/components/Dialogs/BrowseFolderModal.tsx b/src/components/Dialogs/BrowseFolderModal.tsx
@@ -33,6 +33,7 @@ function BrowseFolderModal(props: Props) {
       show={status}
       onRequestClose={() => handleClose()}
       title="Select Import Folder"
+      size="sm"
     >
       <div className="rounded border border-panel-border bg-panel-input p-4">
         <TreeView />

diff --git a/src/components/Dialogs/ImportFolderModal.tsx b/src/components/Dialogs/ImportFolderModal.tsx
@@ -108,6 +108,7 @@ function ImportFolderModal() {
         onRequestClose={() => handleClose()}
         onAfterOpen={() => getFolderDetails()}
         title={edit ? 'Edit Import Folder' : 'Add New Import Folder'}
+        size="sm"
       >
         <Input
           id="Name"

diff --git a/src/components/Input/Button.tsx b/src/components/Input/Button.tsx
@@ -17,11 +17,11 @@ type Props = {
 
 const buttonTypeClasses = {
   primary:
-    'bg-button-primary text-button-primary-text border-2 border-button-primary-border rounded-md hover:bg-button-primary-hover',
+    'bg-button-primary text-button-primary-text border-2 !border-button-primary-border rounded-md hover:bg-button-primary-hover',
   secondary:
-    'bg-button-secondary text-button-secondary-text border-2 border-button-secondary-border rounded-md hover:bg-button-secondary-hover',
+    'bg-button-secondary text-button-secondary-text border-2 !border-button-secondary-border rounded-md hover:bg-button-secondary-hover',
   danger:
-    'bg-button-danger text-button-danger-text border-2 border-button-danger-border rounded-md hover:bg-button-danger-hover',
+    'bg-button-danger text-button-danger-text border-2 !border-button-danger-border rounded-md hover:bg-button-danger-hover',
 };
 
 function Button(props: Props) {

diff --git a/src/components/Panels/ModalPanel.tsx b/src/components/Panels/ModalPanel.tsx
@@ -6,16 +6,17 @@ type Props = {
   children: React.ReactNode;
   show: boolean;
   title?: React.ReactNode;
+  titleLeft?: boolean;
   size?: 'sm' | 'md' | 'lg';
-  className?: string;
   noPadding?: boolean;
+  className?: string;
   onRequestClose?: () => void;
   onAfterOpen?: () => void;
 };
 
 const sizeClass = {
   sm: 'w-[32rem]',
-  md: 'w-[40rem]',
+  md: 'w-[56.25rem]',
   lg: 'w-[62rem]',
 };
 
@@ -29,6 +30,7 @@ function ModalPanel(props: Props) {
     show,
     size,
     title,
+    titleLeft,
   } = props;
 
   Modal.setAppElement('#app-root');
@@ -46,15 +48,24 @@ function ModalPanel(props: Props) {
       <div className="flex h-full w-full items-center justify-center" onClick={onRequestClose}>
         <div
           className={cx(
-            'flex max-h-[66%] flex-col gap-y-8 rounded-md border border-panel-border bg-panel-background drop-shadow-lg',
-            !noPadding && 'p-8',
+            'flex max-h-[66%] flex-col rounded-md border border-panel-border bg-panel-background drop-shadow-lg',
             sizeClass[size ?? 'md'],
+            !noPadding && ('gap-y-8'),
             className,
           )}
           onClick={e => e.stopPropagation()}
         >
-          {title && <div className="text-xl font-semibold">{title}</div>}
-          <div className="flex flex-col gap-y-8">
+          {title && (
+            <div
+              className={cx(
+                'border-b border-panel-border bg-panel-background-alt p-8 text-xl font-semibold',
+                !titleLeft && ('text-center'),
+              )}
+            >
+              {title}
+            </div>
+          )}
+          <div className={cx('flex flex-col gap-y-8', !noPadding && ('px-8 pb-8'))}>
             {children}
           </div>
         </div>

diff --git a/src/components/Panels/ShokoPanel.tsx b/src/components/Panels/ShokoPanel.tsx
@@ -40,7 +40,7 @@ const ShokoPanel = (
     )}
   >
     <div className="mb-8 flex items-center justify-between">
-      <span className="flex text-xl font-semibold">{title}</span>
+      <span className="flex w-full text-xl font-semibold">{title}</span>
       <div
         className="flex"
         onMouseDown={event => event.stopPropagation()}

diff --git a/src/components/Utilities/UtilitiesTable.tsx b/src/components/Utilities/UtilitiesTable.tsx
@@ -96,7 +96,7 @@ function UtilitiesTable(props: Props) {
   return (
     <div className="relative w-full grow overflow-y-auto" ref={tableContainerRef}>
       <table
-        className="absolute -top-2 w-full table-fixed border-separate border-spacing-y-2 text-left"
+        className="absolute -top-2 w-full table-fixed border-separate border-spacing-y-2 pr-4 text-left"
         style={{ height: totalSize }}
       >
         <thead className="sticky top-0 z-[1]">

diff --git a/src/css/theme-shoko-gray.css b/src/css/theme-shoko-gray.css
@@ -8,7 +8,7 @@
   --button-primary-hover: #64b3ff;
   --button-primary-text: #010f1c;
   --button-secondary: #353d4a;
-  --button-secondary-border: #21242b;
+  --button-secondary-border: #282c34;
   --button-secondary-hover: #404a59;
   --button-secondary-text: #cfd8e3;
   --header-background: #2c333e;

diff --git a/src/pages/collection/series/SeriesImages.tsx b/src/pages/collection/series/SeriesImages.tsx
@@ -7,7 +7,6 @@ import { get, map, split } from 'lodash';
 
 import BackgroundImagePlaceholderDiv from '@/components/BackgroundImagePlaceholderDiv';
 import Button from '@/components/Input/Button';
-import Checkbox from '@/components/Input/Checkbox';
 import ShokoPanel from '@/components/Panels/ShokoPanel';
 import { useGetSeriesImagesQuery } from '@/core/rtkQuery/splitV3Api/seriesApi';
 
@@ -79,15 +78,6 @@ const SeriesImages = () => {
   return (
     <div className="flex gap-x-8">
       <div className="sticky top-0 flex w-[22.375rem] shrink-0 flex-col gap-y-8">
-        <ShokoPanel
-          title="Image Options"
-          transparent
-          contentClassName="gap-y-2 pointer-events-none opacity-50"
-          fullHeight={false}
-        >
-          <Checkbox id="random-poster" isChecked={false} onChange={() => {}} label="Random Poster on Load" justify />
-          <Checkbox id="random-fanart" isChecked={false} onChange={() => {}} label="Random Fanart on Load" justify />
-        </ShokoPanel>
         <ShokoPanel title="Selected Image Info" transparent contentClassName="gap-y-4" fullHeight={false}>
           <InfoLine title="Filename" value={filename} />
           <InfoLine title="Location" value={filepath} />

diff --git a/src/pages/dashboard/panels/CollectionStats.tsx b/src/pages/dashboard/panels/CollectionStats.tsx
@@ -18,7 +18,7 @@ function CollectionStats() {
       <div className="mb-1 grow last:mb-0">
         {title}
       </div>
-      {link ? <Link to={link} className="text-panel-text-primary">{value}</Link> : <div>{value}</div>}
+      {link ? <Link to={link} className="font-semibold text-panel-text-primary">{value}</Link> : <div>{value}</div>}
     </div>
   );
 

diff --git a/src/pages/dashboard/panels/QueueProcessor.tsx b/src/pages/dashboard/panels/QueueProcessor.tsx
@@ -50,7 +50,7 @@ function QueueProcessor() {
             {item?.status ?? 'Idle'}
           </span>
         </div>
-        <div className="flex text-panel-text-important">{item.queueCount ?? 0}</div>
+        <div className="flex font-semibold text-panel-text-important">{item.queueCount ?? 0}</div>
         <div className="flex items-center">
           {item?.status === 'Pausing' || item?.status === 'Paused'
             ? (

diff --git a/src/pages/dashboard/panels/UnrecognizedFiles.tsx b/src/pages/dashboard/panels/UnrecognizedFiles.tsx
@@ -12,7 +12,7 @@ import type { RootState } from '@/core/store';
 const FileItem = ({ file }: { file: FileType }) => {
   const createdTime = dayjs(file.Created);
   return (
-    <div key={file.ID} className="flex items-center">
+    <div key={file.ID} className="flex items-center pr-4">
       <div className="flex grow flex-col">
         <span className="font-semibold">
           {createdTime.format('YYYY-MM-DD')}
@@ -40,7 +40,16 @@ function UnrecognizedFiles() {
 
   return (
     <ShokoPanel
-      title="Unrecognized Files"
+      title={
+        <div className="flex w-full flex-row justify-between">
+          <div>Unrecognized Files</div>
+          <div>
+            <span className="text-panel-text-important">{files.List.length}</span>
+            &nbsp;
+            <span>Files</span>
+          </div>
+        </div>
+      }
       isFetching={filesQuery.isLoading}
       editMode={layoutEditMode}
       contentClassName="gap-y-3"
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,7 +18,7 @@ function CollectionStats() { @@
           <div className="mb-1 grow last:mb-0">
             {title}
           </div>
-          {link ? <Link to={link} className="text-panel-text-primary">{value}</Link> : <div>{value}</div>}
+          {link ? <Link to={link} className="font-semibold text-panel-text-primary">{value}</Link> : <div>{value}</div>}
         </div>
       );
@@ Expand Down @@