UI Design Updates (ShokoAnime#808)

* Minor Global Changes, Initial Work on Dashboard.

* Dashboard done.

* Work on Collection & Series & Added ButtonIcon.

* Move Sidepanel to the right.

* Settings & Modal Work

* Additional Changes.

* Add CSS Comment.

* Change Hover Logic.

src/components/BackgroundImagePlaceholderDiv.tsx

@@ -83,7 +83,7 @@ const BackgroundImagePlaceholderDiv = React.memo((props: Props) => {
         {imageError && (
           <div
             className={cx(
-              'w-full h-full flex flex-col justify-center items-center bg-panel-input p-8',
+              'w-full h-full flex flex-col justify-center items-center bg-panel-input p-6',
               hidePlaceholderOnHover && 'group-hover:opacity-0',
             )}
           >

src/components/CharacterImage.tsx

@@ -35,7 +35,7 @@ const CharacterImage = React.memo((props: Props) => {
         {!imageLoaded && (
           <div
             className={cx(
-              'w-full h-full flex flex-col justify-center items-center bg-panel-input p-8',
+              'w-full h-full flex flex-col justify-center items-center bg-panel-input p-6',
               hidePlaceholderOnHover && 'group-hover:opacity-0',
             )}
           >

src/components/Collection/AnidbDescription.tsx

@@ -41,7 +41,7 @@ const AnidbDescription = React.memo(({ text }: { text: string }) => {
     LinkRegex.lastIndex = 0;
     return lines.join('');
   }, [text]);
-  return <div>{modifiedText}</div>;
+  return <div className="text-base">{modifiedText}</div>;
 });
 
 export default AnidbDescription;

src/components/Collection/CollectionView.tsx

@@ -80,8 +80,8 @@ const CollectionView = (props: Props) => {
     return (
       <div
         className={cx(
-          'flex grow rounded-md items-center font-semibold justify-center max-h-screen',
-          mode === 'poster' && 'px-8 py-8 bg-panel-background border-panel-border border',
+          'flex grow rounded-lg items-center font-semibold justify-center max-h-screen',
+          mode === 'poster' && 'px-6 py-6 bg-panel-background border-panel-border border',
         )}
       >
         <div className="flex w-full justify-center" ref={gridContainerRef}>
@@ -96,8 +96,8 @@ const CollectionView = (props: Props) => {
   return (
     <div
       className={cx(
-        'flex grow rounded-md',
-        mode === 'poster' && 'px-8 py-8 bg-panel-background border-panel-border border',
+        'flex grow rounded-lg',
+        mode === 'poster' && 'px-6 py-6 bg-panel-background border-panel-border border',
       )}
     >
       <div className="relative w-full" style={{ height: virtualizer.getTotalSize() }} ref={gridContainerRef}>
@@ -134,7 +134,7 @@ const CollectionView = (props: Props) => {
               if (!isFetchingNextPage) fetchNextPageDebounced();
               children.push(
                 <div
-                  className="flex shrink-0 items-center justify-center rounded-md border border-panel-border text-panel-text-primary"
+                  className="flex shrink-0 items-center justify-center rounded-lg border border-panel-border text-panel-text-primary"
                   key={`loading-${i}`}
                   style={{
                     width: `${itemWidth / 16}rem`,
@@ -168,8 +168,8 @@ const CollectionView = (props: Props) => {
               className={cx(
                 'absolute top-0 left-0 w-full flex items-center justify-center last:pb-0',
                 mode === 'poster'
-                  ? 'gap-x-4 pb-4'
-                  : 'gap-x-8 pb-8',
+                  ? 'gap-x-6 pb-4'
+                  : 'gap-x-6 pb-8',
               )}
               style={{
                 transform: `translateY(${virtualRow.start}px)`,

src/components/Collection/DisplaySettingsModal.tsx

@@ -54,7 +54,7 @@ const DisplaySettingsModal = ({ onClose, show }: Props) => {
       header="Display Settings"
       size="sm"
     >
-      <div className="flex flex-col gap-y-8">
+      <div className="flex flex-col gap-y-6">
         <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-2">

src/components/Collection/Filter/Criteria.tsx

@@ -92,7 +92,7 @@ const Criteria = ({ criteria, parameterExists, transformedParameter, type }: Pro
           {typeof transformedParameter === 'string'
             ? (
               <div
-                className="flex cursor-pointer rounded-md border border-panel-border bg-panel-input px-4 py-3"
+                className="flex cursor-pointer rounded-lg border border-panel-border bg-panel-input px-4 py-3"
                 onClick={openModal}
               >
                 <ParameterList expression={criteria.Expression} value={transformedParameter} />

src/components/Collection/Filter/FilterSidebar.tsx

@@ -1,7 +1,6 @@
 import React, { type ReactNode, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { mdiFilterPlusOutline } from '@mdi/js';
-import { Icon } from '@mdi/react';
 import { forEach, keys, map, values } from 'lodash';
 
 import AddCriteriaModal from '@/components/Collection/Filter/AddCriteriaModal';
@@ -11,6 +10,7 @@ import SeasonCriteria from '@/components/Collection/Filter/SeasonCriteria';
 import TagCriteria from '@/components/Collection/Filter/TagCriteria';
 import YearCriteria from '@/components/Collection/Filter/YearCriteria';
 import Button from '@/components/Input/Button';
+import IconButton from '@/components/Input/IconButton';
 import ShokoPanel from '@/components/Panels/ShokoPanel';
 import { buildSidebarFilter } from '@/core/buildFilter';
 import {
@@ -42,14 +42,8 @@ const CriteriaComponent = ({ criteria }: { criteria: FilterExpression }) => {
 
 type OptionButtonProps = (props: { icon: string, onClick: React.MouseEventHandler<HTMLDivElement> }) => ReactNode;
 const OptionButton: OptionButtonProps = ({ icon, onClick }) => (
-  <div
-    className="cursor-pointer rounded border border-panel-border bg-button-secondary px-5 py-2 drop-shadow-md"
-    onClick={onClick}
-  >
-    <Icon path={icon} size={1} />
-  </div>
+  <IconButton icon={icon} buttonType="secondary" buttonSize="normal" onClick={onClick} />
 );
-
 type OptionsProps = {
   showModal: () => void;
 };
@@ -88,7 +82,7 @@ const FilterSidebar = () => {
     <ShokoPanel
       title="Filter"
       className="ml-8 w-full"
-      contentClassName="gap-y-8"
+      contentClassName="gap-y-6"
       options={<Options showModal={showCriteriaModal(true)} />}
     >
       {map(

src/components/Collection/Filter/MultiValueCriteriaModal.tsx

@@ -75,7 +75,7 @@ const MultiValueCriteriaModal = ({ criteria, onClose, removeCriteria, show }: Pr
         <option value="Or">Match Any</option>
         <option value="And">Match All</option>
       </Select>
-      <div className="flex grow basis-0 overflow-y-auto rounded-md bg-panel-input p-4">
+      <div className="flex grow basis-0 overflow-y-auto rounded-lg bg-panel-input p-4">
         <div className="flex w-full flex-col gap-y-2 overflow-y-auto bg-panel-input">
           {map(unusedValues, value => (
             <div
@@ -92,7 +92,7 @@ const MultiValueCriteriaModal = ({ criteria, onClose, removeCriteria, show }: Pr
       </div>
       <div className="flex grow flex-col gap-y-4">
         <div className="font-semibold">Selected Values</div>
-        <div className="flex grow basis-0 overflow-y-auto rounded-md bg-panel-input p-4">
+        <div className="flex grow basis-0 overflow-y-auto rounded-lg bg-panel-input p-4">
           <div className="flex w-full flex-col gap-y-2 overflow-y-auto bg-panel-input">
             {map([...selectedValues, ...unsavedValues], value => (
               <div

src/components/Collection/Filter/SeasonCriteriaModal.tsx

@@ -110,7 +110,7 @@ const SeasonCriteriaModal = ({ criteria, onClose, removeCriteria, show }: Props)
         <div className="font-semibold">
           Selected Seasons
         </div>
-        <div className="flex h-[15rem] grow rounded-md bg-panel-input p-4">
+        <div className="flex h-[15rem] grow rounded-lg bg-panel-input p-4">
           <div className="flex w-full flex-col gap-y-2 overflow-y-auto bg-panel-input">
             {map(
               combinedSelectedValues,

src/components/Collection/Filter/TagCriteria.tsx

@@ -12,7 +12,7 @@ type TagLineProps = {
   values: string[];
 };
 const TagLine = ({ title, values }: TagLineProps) => (
-  <div className="rounded-md border border-panel-border bg-panel-input px-4 py-3">
+  <div className="rounded-lg border border-panel-border bg-panel-input px-4 py-3">
     <div className="line-clamp-3">
       <span className="pr-2 text-panel-text-important">{title}</span>
       {values.join(', ')}

src/components/Collection/Filter/TagCriteriaModal.tsx

@@ -36,7 +36,7 @@ const TagList = (
   const virtualItems = virtualizer.getVirtualItems();
 
   return (
-    <div className="grow rounded-md bg-panel-input p-4">
+    <div className="grow rounded-lg bg-panel-input p-4">
       <div
         className="relative h-full overflow-y-auto bg-panel-input"
         ref={scrollRef}
@@ -177,7 +177,7 @@ const TagCriteriaModal = ({ criteria, onClose, removeCriteria, show }: Props) =>
             Excluded
           </span>
         </div>
-        <div className="flex grow basis-0 overflow-y-auto rounded-md bg-panel-input p-4">
+        <div className="flex grow basis-0 overflow-y-auto rounded-lg bg-panel-input p-4">
           <div className="flex w-full flex-col gap-y-1 overflow-y-auto bg-panel-input">
             {map(
               combinedSelectedValues,

src/components/Collection/Filter/YearCriteriaModal.tsx

@@ -94,7 +94,7 @@ const YearCriteriaModal = ({ criteria, onClose, removeCriteria, show }: Props) =
         <div className="font-semibold">
           Selected Years
         </div>
-        <div className="flex h-[15rem] grow rounded-md bg-panel-input p-4">
+        <div className="flex h-[15rem] grow rounded-lg bg-panel-input p-4">
           <div className="flex w-full flex-col gap-y-2 overflow-y-auto bg-panel-input">
             {map(
               combinedSelectedValues,

src/components/Collection/ListViewItem.tsx

@@ -44,7 +44,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-tags rounded-md p-2 whitespace-nowrap capitalize',
+      'text-xs font-semibold flex gap-x-2 items-center border-2 border-panel-tags rounded-lg p-2 whitespace-nowrap capitalize',
       type === 'User' ? 'text-panel-text-important' : 'text-panel-text-primary',
     )}
   >
@@ -122,16 +122,16 @@ const ListViewItem = ({ groupExtras, isSeries, isSidebarOpen, item }: Props) =>
 
   return (
     <div
-      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"
+      className="flex h-full shrink-0 grow flex-col content-center gap-y-3 rounded-lg border border-panel-border bg-panel-background p-6"
       style={{
         width: `${((isSeries || isSidebarOpen) ? listItemSize.widthAlt : listItemSize.width) / 16}rem`,
       }}
     >
-      <div className="flex gap-x-4">
+      <div className="flex gap-x-3">
         <Link to={viewRouteLink()}>
           <BackgroundImagePlaceholderDiv
             image={poster}
-            className="group h-[12.5625rem] w-[8.625rem] shrink-0 rounded-md drop-shadow-md"
+            className="group h-[12.5625rem] w-[8.625rem] shrink-0 rounded-lg drop-shadow-md"
             hidePlaceholderOnHover
             zoomOnHover
           >
@@ -152,11 +152,11 @@ const ListViewItem = ({ groupExtras, isSeries, isSidebarOpen, item }: Props) =>
             )}
           </BackgroundImagePlaceholderDiv>
         </Link>
-        <div className="flex flex-col gap-y-4">
+        <div className="flex flex-col gap-y-3">
           <div className="font-semibold" title={item.Name}>{item.Name}</div>
 
           <div className="flex flex-col gap-y-3">
-            <div className="flex flex-nowrap gap-x-4">
+            <div className="flex flex-nowrap items-center gap-x-3">
               {showItemType && (
                 <div className="flex items-center gap-x-2 align-middle">
                   <Icon path={mdiTelevision} size={1} />
@@ -187,7 +187,7 @@ const ListViewItem = ({ groupExtras, isSeries, isSidebarOpen, item }: Props) =>
               )}
             </div>
 
-            <div className="flex flex-nowrap gap-x-4">
+            <div className="flex flex-nowrap items-center gap-x-3">
               <div className="flex items-center gap-x-2 align-middle">
                 <Icon path={mdiFileDocumentMultipleOutline} size={1} />
                 <div className="flex gap-x-2 text-sm font-semibold ">

src/components/Collection/PosterViewItem.tsx

@@ -5,7 +5,6 @@ import { Icon } from '@mdi/react';
 import { reduce } from 'lodash';
 
 import BackgroundImagePlaceholderDiv from '@/components/BackgroundImagePlaceholderDiv';
-import { posterItemSize } from '@/components/Collection/constants';
 import { useSettingsQuery } from '@/core/react-query/settings/queries';
 import useMainPoster from '@/hooks/useMainPoster';
 
@@ -46,15 +45,18 @@ const PosterViewItem = ({ isSeries = false, item }: Props) => {
 
   return (
     <Link to={viewRouteLink()}>
-      <div className="group flex shrink-0 flex-col content-center" style={{ width: `${posterItemSize.width / 16}rem` }}>
+      <div
+        className="group flex shrink-0 flex-col content-center gap-y-3"
+        style={{ width: '12.938rem' }}
+      >
         <BackgroundImagePlaceholderDiv
           image={mainPoster}
-          className="mb-3 h-[19.0625rem] rounded-md border border-panel-border drop-shadow-md"
+          className="h-[19rem] rounded-lg border border-panel-border drop-shadow-md"
           hidePlaceholderOnHover
           zoomOnHover
         >
           {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">
+            <div className="absolute right-0 top-0 flex min-w-[2.81rem] justify-center rounded-bl-md bg-panel-background-overlay p-3 font-semibold opacity-100 transition-opacity group-hover:opacity-0">
               {unwatchedCount || (
                 <Icon path={mdiCheckboxMarkedCircleOutline} size={1} className="text-panel-icon-important" />
               )}
@@ -71,22 +73,24 @@ const PosterViewItem = ({ isSeries = false, item }: Props) => {
             </span>
           </div>
           {showGroupIndicator && !isSeries && groupCount > 1 && (
-            <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">
+            <div className="absolute bottom-4 left-3 flex w-[90%] justify-center rounded-lg bg-panel-background-overlay py-2 text-sm font-semibold text-panel-text opacity-100 transition-opacity group-hover:opacity-0">
               {groupCount}
               &nbsp;Series
             </div>
           )}
         </BackgroundImagePlaceholderDiv>
-        <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 opacity-65"
-            title={episodeCount.toString()}
-          >
-            {episodeCount}
-            &nbsp;Episodes
-          </p>
-        )}
+        <div>
+          <p className="line-clamp-1 text-ellipsis text-center text-sm font-semibold" title={item.Name}>{item.Name}</p>
+          {showEpisodeCount && (
+            <p
+              className="line-clamp-1 text-ellipsis text-center text-sm font-semibold opacity-65"
+              title={episodeCount.toString()}
+            >
+              {episodeCount}
+              &nbsp;Episodes
+            </p>
+          )}
+        </div>
       </div>
     </Link>
   );

src/components/Collection/Series/EditSeriesModal.tsx

@@ -53,7 +53,7 @@ const EditSeriesModal = (props: Props) => {
   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-8 border-r border-panel-border p-8 font-semibold">
+        <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')}
@@ -64,7 +64,7 @@ const EditSeriesModal = (props: Props) => {
             </div>
           ))}
         </div>
-        <div className="w-full p-8">
+        <div className="w-full p-6">
           {renderTab(activeTab, seriesId)}
         </div>
       </div>

src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx

@@ -83,7 +83,7 @@ function GroupTab({ seriesId }: Props) {
       />
       <div
         className={cx(
-          'mt-1 flex flex-col gap-y-2.5 rounded-md border border-panel-border bg-panel-background-alt p-4',
+          'mt-1 flex flex-col gap-y-2.5 rounded-lg border border-panel-border bg-panel-background-alt p-4',
           !nameEditable && 'invisible',
         )}
       >

src/components/Collection/Series/EditSeriesTabs/NameTab.tsx

@@ -103,7 +103,7 @@ const NameTab = ({ seriesId }: Props) => {
       />
       <div
         className={cx(
-          'mt-1 flex flex-col gap-y-2.5 rounded-md border border-panel-border bg-panel-background-alt p-4 overflow-hidden',
+          'mt-1 flex flex-col gap-y-2.5 rounded-lg border border-panel-border bg-panel-background-alt p-4 overflow-hidden',
           !nameEditable && 'invisible',
         )}
       >

src/components/Collection/Series/EditSeriesTabs/PersonalStats.tsx

@@ -26,7 +26,7 @@ function PersonalStats() {
   };
 
   return (
-    <div className="flex flex-col gap-y-8">
+    <div className="flex flex-col gap-y-6">
       <div className="flex flex-col gap-y-4">
         <div className="border-b border-panel-border pb-4 font-semibold">Watched State</div>
         <div className="flex flex-col gap-y-2">

src/components/Collection/Series/EpisodeFileInfo.tsx

@@ -10,7 +10,7 @@ const EpisodeFileInfo = ({ file }: { file: FileType }) => {
   const mediaInfo = useMediaInfo(file);
 
   return (
-    <div className="flex flex-col gap-y-8">
+    <div className="flex flex-col gap-y-6">
       <div className="flex flex-col gap-y-4">
         <div className="text-xl font-semibold opacity-65">File Details</div>
         <div className="flex flex-col gap-y-1">

src/components/Collection/Series/EpisodeFiles.tsx

@@ -53,19 +53,19 @@ const EpisodeFiles = ({ animeId, episodeFiles, episodeId }: Props) => {
     });
 
   if (!episodeFiles.length || episodeFiles.length < 1) {
-    return <div className="flex grow items-center justify-center p-8 pt-4 font-semibold">No files found!</div>;
+    return <div className="flex grow items-center justify-center p-6 pt-4 font-semibold">No files found!</div>;
   }
 
   return (
-    <div className="flex flex-col gap-y-8 p-8 pt-4">
+    <div className="flex flex-col gap-y-6 p-6 pt-4">
       {map(episodeFiles, (selectedFile) => {
         const ReleaseGroupID = get(selectedFile, 'AniDB.ReleaseGroup.ID', 0);
         const ReleaseGroupName = get(selectedFile, 'AniDB.ReleaseGroup.Name', null);
 
         return (
-          <div className="flex flex-col gap-y-8" key={selectedFile.ID}>
+          <div className="flex flex-col gap-y-6" key={selectedFile.ID}>
             <div className="flex grow gap-x-2">
-              <div className="flex grow gap-x-3 rounded-md border border-panel-border bg-panel-background-alt px-4 py-3">
+              <div className="flex grow gap-x-3 rounded-lg border border-panel-border bg-panel-background-alt px-4 py-3">
                 <div
                   className="flex cursor-pointer items-center gap-x-2"
                   onClick={() => handleRescan(selectedFile.ID)}