Minor UI Changes, Update Series Edit Modal. (#827)

* Minor UI Changes, Update Series Edit Modal. * Make requested changes.
ShokoAnime · Mar 15, 2024 · a69caac · a69caac
1 parent 70da78a
commit a69caac
Show file tree

Hide file tree

Showing 11 changed files with 64 additions and 39 deletions.
diff --git a/src/components/Collection/Series/EditSeriesModal.tsx b/src/components/Collection/Series/EditSeriesModal.tsx
@@ -7,7 +7,6 @@ import FileActionsTab from '@/components/Collection/Series/EditSeriesTabs/FileAc
 import NameTab from '@/components/Collection/Series/EditSeriesTabs/NameTab';
 import UpdateActionsTab from '@/components/Collection/Series/EditSeriesTabs/UpdateActionsTab';
 import ModalPanel from '@/components/Panels/ModalPanel';
-
 // TODO: Add tabs after implementing back-end endpoint for GroupTab and PersonalStats
 // import GroupTab from './EditSeriesTabs/GroupTab';
 // import PersonalStats from './EditSeriesTabs/PersonalStats';
@@ -51,20 +50,27 @@ const EditSeriesModal = (props: Props) => {
   const [activeTab, setActiveTab] = useState('update_actions');
 
   return (
-    <ModalPanel show={show} onRequestClose={onClose} header="Edit Series" noPadding>
-      <div className="flex">
-        <div className="flex w-[12.5rem] shrink-0 flex-col gap-y-6 border-r border-panel-border p-6 font-semibold">
-          {map(tabs, (value, key) => (
-            <div
-              className={cx('font-semibold cursor-pointer', activeTab === key && 'text-panel-text-primary')}
-              key={key}
-              onClick={() => setActiveTab(key)}
-            >
-              {value}
-            </div>
-          ))}
+    <ModalPanel show={show} onRequestClose={onClose} header="Edit Series" size="md" noPadding noGap>
+      <div className="flex h-[22rem] flex-row gap-x-6 p-6">
+        <div className="flex shrink-0 gap-y-6 font-semibold">
+          <div className="flex flex-col gap-y-1">
+            {map(tabs, (value, key) => (
+              <div
+                className={cx(
+                  activeTab === key
+                    ? 'w-[12rem] text-center bg-panel-menu-item-background p-3 rounded-lg text-panel-menu-item-text cursor-pointer'
+                    : 'w-[12rem] text-center p-3 rounded-lg hover:bg-panel-menu-item-background-hover cursor-pointer',
+                )}
+                key={key}
+                onClick={() => setActiveTab(key)}
+              >
+                {value}
+              </div>
+            ))}
+          </div>
         </div>
-        <div className="w-full p-6">
+        <div className="border-r border-panel-border" />
+        <div>
           {renderTab(activeTab, seriesId)}
         </div>
       </div>

diff --git a/src/components/Collection/Series/EditSeriesTabs/Action.tsx b/src/components/Collection/Series/EditSeriesTabs/Action.tsx
@@ -1,18 +1,22 @@
 import React from 'react';
-import { mdiPlayCircleOutline } from '@mdi/js';
-import { Icon } from '@mdi/react';
+import cx from 'classnames';
 
-import Button from '@/components/Input/Button';
-
-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">
-    <div className="flex w-full max-w-[35rem] flex-col gap-y-2">
-      <div>{name}</div>
-      <div className="text-sm opacity-65">{description}</div>
+const Action = (
+  { description, name, onClick, scroll }: { name: string, description: string, scroll?: boolean, onClick: () => void },
+) => (
+  <div
+    className={cx(
+      'flex flex-row justify-between gap-y-2 cursor-pointer hover:text-panel-text-primary',
+      scroll ? 'mr-4' : '',
+    )}
+    onClick={onClick}
+  >
+    <div className="flex w-full flex-col gap-y-1">
+      <div className="flex justify-between">
+        <div>{name}</div>
+      </div>
+      <div className="text-sm text-panel-text opacity-65">{description}</div>
     </div>
-    <Button onClick={onClick} className="text-panel-text-primary">
-      <Icon path={mdiPlayCircleOutline} size={1} />
-    </Button>
   </div>
 );
 

diff --git a/src/components/Collection/Series/EditSeriesTabs/DeleteActionsTab.tsx b/src/components/Collection/Series/EditSeriesTabs/DeleteActionsTab.tsx
@@ -17,7 +17,7 @@ const DeleteActionsTab = ({ seriesId }: Props) => {
   const navigateToCollection = () => navigate('/webui/collection');
 
   return (
-    <div className="flex h-[22rem] grow flex-col gap-y-4 overflow-y-auto">
+    <div className="flex grow flex-col gap-y-4 overflow-y-auto">
       <Action
         name="Delete Series - Keep Files"
         description="Deletes the series from Shoko but does not delete the files"

diff --git a/src/pages/dashboard/panels/ContinueWatching.tsx b/src/pages/dashboard/panels/ContinueWatching.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
+import cx from 'classnames';
 
 import ShokoPanel from '@/components/Panels/ShokoPanel';
 import { useDashboardContinueWatchingQuery } from '@/core/react-query/dashboard/queries';
@@ -17,11 +18,13 @@ const ContinueWatching = () => {
 
   return (
     <ShokoPanel title="Continue Watching" isFetching={continueWatchingQuery.isPending} editMode={layoutEditMode}>
-      <div className="shoko-scrollbar flex">
+      <div
+        className={cx('shoko-scrollbar flex', continueWatchingQuery.data?.length === 0 && ('h-full pb-[3.5rem]'))}
+      >
         {(continueWatchingQuery.data?.length ?? 0) > 0
           ? continueWatchingQuery.data?.map(item => <EpisodeDetails episode={item} key={item.IDs.ID} />)
           : (
-            <div className="mt-4 flex w-full flex-col justify-center gap-y-2 text-center">
+            <div className="flex h-full w-full grow flex-col items-center justify-center gap-y-2 text-center">
               <div>No Episodes In Progress.</div>
               <div>Stop An Episode During Playback To Populate This Section.</div>
             </div>

diff --git a/src/pages/dashboard/panels/NextUp.tsx b/src/pages/dashboard/panels/NextUp.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
+import cx from 'classnames';
 
 import ShokoPanel from '@/components/Panels/ShokoPanel';
 import { useDashboardNextUpQuery } from '@/core/react-query/dashboard/queries';
@@ -25,11 +26,13 @@ const NextUp = () => {
       isFetching={nextUpQuery.isPending}
       editMode={layoutEditMode}
     >
-      <div className="shoko-scrollbar flex">
+      <div
+        className={cx('shoko-scrollbar flex', nextUpQuery.data?.length === 0 && ('h-full pb-[3.5rem]'))}
+      >
         {(nextUpQuery.data?.length ?? 0) > 0
           ? nextUpQuery.data?.map(item => <EpisodeDetails episode={item} key={item.IDs.ID} />)
           : (
-            <div className="mt-4 flex w-full flex-col justify-center gap-y-2 text-center">
+            <div className="flex w-full flex-col justify-center gap-y-2 text-center">
               <div>You&apos;ve Finished Every Series In Progress.</div>
               <div>Time For A New Series?</div>
             </div>

diff --git a/src/pages/dashboard/panels/QueueProcessor.tsx b/src/pages/dashboard/panels/QueueProcessor.tsx
@@ -99,7 +99,7 @@ function QueueProcessor() {
     >
       {queueItemsQuery.data && queueItemsQuery.data?.Total > 0
         ? queueItemsQuery.data.List.map(item => <QueueItem item={item} key={item.Key} />)
-        : <div className="flex grow items-center justify-center font-semibold">Queue is empty!</div>}
+        : <div className="flex grow items-center justify-center pb-[3.5rem] font-semibold">Queue is empty!</div>}
     </ShokoPanel>
   );
 }

diff --git a/src/pages/dashboard/panels/RecentlyImported.tsx b/src/pages/dashboard/panels/RecentlyImported.tsx
@@ -47,7 +47,7 @@ const RecentlyImported = () => {
         />
       }
     >
-      <div className="shoko-scrollbar relative mb-3 flex grow items-center">
+      <div className="shoko-scrollbar relative flex">
         <TransitionDiv show={!showSeries} className="absolute flex w-full">
           {(recentEpisodesQuery.data?.length ?? 0) > 0
             ? recentEpisodesQuery.data?.map(item => (

diff --git a/src/pages/dashboard/panels/RecommendedAnime.tsx b/src/pages/dashboard/panels/RecommendedAnime.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { mdiEyeArrowRightOutline } from '@mdi/js';
 import { Icon } from '@mdi/react';
+import cx from 'classnames';
 
 import BackgroundImagePlaceholderDiv from '@/components/BackgroundImagePlaceholderDiv';
 import ShokoPanel from '@/components/Panels/ShokoPanel';
@@ -48,7 +49,9 @@ const RecommendedAnime = () => {
 
   return (
     <ShokoPanel title="Recommended Anime" isFetching={recommendedAnimeQuery.isPending} editMode={layoutEditMode}>
-      <div className="shoko-scrollbar flex">
+      <div
+        className={cx('shoko-scrollbar flex', recommendedAnimeQuery.data?.length === 0 && ('h-full pb-[3.5rem]'))}
+      >
         {(recommendedAnimeQuery.data?.length ?? 0) > 0
           ? recommendedAnimeQuery.data?.map(item => renderItem(item.Anime, item.SimilarTo))
           : (

diff --git a/src/pages/dashboard/panels/UnrecognizedFiles.tsx b/src/pages/dashboard/panels/UnrecognizedFiles.tsx
@@ -71,7 +71,9 @@ function UnrecognizedFiles() {
     >
       {files.map(file => <FileItem file={file} key={file.ID} />)}
       {fileCount === 0 && (
-        <div className="mt-4 flex justify-center font-semibold" key="no-files">No Unrecognized Files, Good Job!</div>
+        <div className="flex grow items-center justify-center pb-[3.5rem] font-semibold" key="no-files">
+          No Unrecognized Files, Good Job!
+        </div>
       )}
     </ShokoPanel>
   );

diff --git a/src/pages/dashboard/panels/UpcomingAnime.tsx b/src/pages/dashboard/panels/UpcomingAnime.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
+import cx from 'classnames';
 
 import ShokoPanel from '@/components/Panels/ShokoPanel';
 import TransitionDiv from '@/components/TransitionDiv';
@@ -39,13 +40,16 @@ const UpcomingAnime = () => {
           {(calendarQuery.data?.length ?? 0) > 0
             ? calendarQuery.data?.map(item => <EpisodeDetails episode={item} showDate key={item.IDs.ID} />)
             : (
-              <div className="mt-4 flex w-full flex-col justify-center gap-y-2 text-center">
+              <div className="flex w-full flex-col justify-center gap-y-2 text-center">
                 <div>No Upcoming Anime.</div>
                 <div>Start A Currently Airing Series To Populate This Section.</div>
               </div>
             )}
         </TransitionDiv>
-        <TransitionDiv show={showAll} className="absolute flex w-full">
+        <TransitionDiv
+          show={showAll}
+          className={cx('shoko-scrollbar flex', calendarAllQuery.data?.length === 0 && ('h-full pb-[3.5rem]'))}
+        >
           {(calendarAllQuery.data?.length ?? 0) > 0
             ? calendarAllQuery.data?.map(item => (
               <EpisodeDetails
@@ -56,7 +60,7 @@ const UpcomingAnime = () => {
               />
             ))
             : (
-              <div className="mt-4 flex w-full flex-col justify-center gap-y-2 text-center">
+              <div className="flex w-full flex-col justify-center gap-y-2 text-center">
                 <div>No Upcoming Anime.</div>
                 <div>Enable Calendar To Populate This Section</div>
               </div>

diff --git a/src/pages/logs/LogsPage.tsx b/src/pages/logs/LogsPage.tsx
@@ -94,7 +94,7 @@ const LogsPage = () => {
                         data-index={virtualRow.index}
                         ref={rowVirtualizer.measureElement}
                       >
-                        <div className="w-[10.8rem] shrink-0 opacity-65">{row.TimeStamp}</div>
+                        <div className="w-[11rem] shrink-0 opacity-65">{row.TimeStamp}</div>
                         <div className="w-[2.8rem] shrink-0">{row.Level}</div>
                         <div className="break-all">{row.Message}</div>
                       </div>