Scrollbar Fixes / File Search Utility Shoko Logo Size (#1109)

* Scrollbar Fixes / File Search Utility Shoko Logo Size * Add Utilities Table Scrollbar Style * Switch shoko-scrollbar to moz-document * Remove redundant class
ShokoAnime · Oct 15, 2024 · 079cdf5 · 079cdf5
1 parent d0a602f
commit 079cdf5
Show file tree

Hide file tree

Showing 14 changed files with 18 additions and 18 deletions.
diff --git a/src/components/Collection/DisplaySettingsModal.tsx b/src/components/Collection/DisplaySettingsModal.tsx
@@ -61,7 +61,7 @@ const DisplaySettingsModal = ({ onClose, show }: Props) => {
       noPadding
       noGap
     >
-      <div className="flex flex-col gap-y-6 p-6">
+      <div className="flex max-h-96 flex-col gap-y-6 overflow-y-auto p-6">
         <div className="flex flex-col gap-y-4">
           <div className="font-semibold">Poster View Options</div>
           <div className="flex flex-col gap-y-1">

diff --git a/src/components/Collection/Episode/EpisodeWatchModal.tsx b/src/components/Collection/Episode/EpisodeWatchModal.tsx
@@ -63,12 +63,12 @@ const EpisodeWatchModal = (
     <ModalPanel
       show={show}
       onRequestClose={onRequestClose}
-      header="Watch options"
+      header="Watch Options"
       size="md"
       noPadding
       noGap
     >
-      <div className="flex h-[22rem] flex-row gap-x-6 p-6">
+      <div className="flex 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) => (

diff --git a/src/components/Collection/Group/EditGroupTabs/NameTab.tsx b/src/components/Collection/Group/EditGroupTabs/NameTab.tsx
@@ -118,7 +118,7 @@ const NameTab = React.memo(({ groupId }: Props) => {
       />
       {nameEditable && (
         <div className="flex cursor-pointer overflow-y-auto rounded-lg border border-panel-border bg-panel-input p-6">
-          <div className="shoko-scrollbar flex grow flex-col gap-y-2 overflow-y-auto bg-panel-input pr-4">
+          <div className="flex grow flex-col gap-y-2 overflow-y-auto bg-panel-input pr-4">
             {seriesData?.map(series => (
               <div
                 className="flex justify-between transition-colors last:border-none hover:text-panel-text-primary"

diff --git a/src/components/Collection/Group/EditGroupTabs/SeriesTab.tsx b/src/components/Collection/Group/EditGroupTabs/SeriesTab.tsx
@@ -64,7 +64,7 @@ const SeriesTab = React.memo(({ groupId }: Props) => {
       <div className="flex overflow-y-auto rounded-lg border border-panel-border bg-panel-input p-6">
         <div
           className={cx(
-            'shoko-scrollbar flex grow flex-col gap-y-2 overflow-y-auto bg-panel-input',
+            'flex grow flex-col gap-y-2 overflow-y-auto bg-panel-input',
             (seriesSuccess && seriesData.length > 9) && 'pr-4',
           )}
         >

diff --git a/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx b/src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx
@@ -210,7 +210,7 @@ function GroupTab({ seriesId }: Props) {
       <div className="mt-2 flex grow select-none overflow-y-auto rounded-lg border border-panel-border bg-panel-input p-6 pr-3">
         <div
           className={cx(
-            'shoko-scrollbar flex grow flex-col gap-y-2 overflow-y-auto bg-panel-input',
+            'flex grow flex-col gap-y-2 overflow-y-auto bg-panel-input',
             groupsResultSize > 4 && 'pr-4',
           )}
         >

diff --git a/src/components/Collection/Series/EditSeriesTabs/NameTab.tsx b/src/components/Collection/Series/EditSeriesTabs/NameTab.tsx
@@ -93,7 +93,7 @@ const NameTab = ({ seriesId }: Props) => {
       />
       {nameEditable && (
         <div className="flex cursor-pointer overflow-y-auto rounded-lg border border-panel-border bg-panel-input p-6">
-          <div className="shoko-scrollbar flex grow flex-col gap-y-2 overflow-y-auto bg-panel-input pr-4">
+          <div className="flex grow flex-col gap-y-2 overflow-y-auto bg-panel-input pr-4">
             {seriesData?.AniDB?.Titles.map(title => (
               <div
                 className="flex justify-between transition-colors last:border-none hover:text-panel-text-primary"

diff --git a/src/components/Collection/SeriesTopPanel.tsx b/src/components/Collection/SeriesTopPanel.tsx
@@ -66,7 +66,7 @@ const SeriesTopPanel = React.memo(({ series }: { series: SeriesType }) => {
           className="!h-[14.5rem]"
           transparent
         >
-          <div className="shoko-scrollbar grid h-32 grid-cols-1 gap-x-12 gap-y-2 overflow-y-auto pr-2 text-base font-normal 2xl:grid-cols-2 2xl:pr-0">
+          <div className="grid h-32 grid-cols-1 gap-x-12 gap-y-2 overflow-y-auto pr-2 text-base font-normal 2xl:grid-cols-2 2xl:pr-0">
             <SeriesInfo series={series} />
           </div>
         </ShokoPanel>

diff --git a/src/components/Collection/Tags/TagDetailsModal.tsx b/src/components/Collection/Tags/TagDetailsModal.tsx
@@ -47,7 +47,7 @@ const SeriesVirtualizer = (
   });
 
   return (
-    <div className="shoko-scrollbar max-h-[12.5rem] overflow-y-auto" ref={scrollRef}>
+    <div className="max-h-[12.5rem] overflow-y-auto" ref={scrollRef}>
       <div className="relative" style={{ height: virtualizer.getTotalSize() }}>
         {virtualizer.getVirtualItems().map(({ index, key, size, start }) => {
           const series = data[index];
@@ -119,7 +119,7 @@ const TagDetailsModal = ({ onClose, show, tag }: { show: boolean, tag?: TagType,
     <ModalPanel show={show} onRequestClose={onClose} header={header} size="sm">
       <CleanDescription
         text={tag?.Description?.trim() ? tag.Description : 'Tag Description Not Available.'}
-        className="shoko-scrollbar max-h-62.5 overflow-y-auto pr-4 opacity-65"
+        className="max-h-62.5 overflow-y-auto pr-4 opacity-65"
       />
       {isSuccess && seriesCount > 0 && (
         <div className="flex flex-col gap-2">

diff --git a/src/components/Panels/ModalPanel.tsx b/src/components/Panels/ModalPanel.tsx
@@ -54,7 +54,7 @@ function ModalPanel(props: Props) {
       <div className="flex size-full items-center justify-center" onClick={onRequestClose}>
         <div
           className={cx(
-            'flex flex-col rounded-lg border border-panel-border bg-panel-background drop-shadow-lg shoko-scrollbar overflow-y-auto',
+            'flex flex-col rounded-lg border border-panel-border bg-panel-background drop-shadow-lg overflow-y-auto',
             sizeClass[size ?? 'md'],
             !noPadding && ('gap-y-6'),
             fullHeight ? 'h-[75%]' : 'max-h-[75%]',

diff --git a/src/components/Panels/ShokoPanel.tsx b/src/components/Panels/ShokoPanel.tsx
@@ -54,7 +54,7 @@ const ShokoPanel = (
     </div>
     <div
       className={cx(
-        'flex grow flex-col shoko-scrollbar',
+        'flex grow flex-col',
         !disableOverflow && 'overflow-y-auto',
         contentClassName,
       )}

diff --git a/src/components/Utilities/Unrecognized/AvDumpSeriesSelectModal.tsx b/src/components/Utilities/Unrecognized/AvDumpSeriesSelectModal.tsx
@@ -147,7 +147,7 @@ function AvDumpSeriesSelectModal({ getLinks, onClose, show }: Props) {
                 )}
             </StepDescription>
             <div className="flex grow rounded-lg border border-panel-border bg-panel-input p-4">
-              <div className="shoko-scrollbar flex h-[14.5rem] flex-col gap-y-1 overflow-y-auto break-all rounded-lg bg-panel-input pr-4">
+              <div className="flex h-[14.5rem] flex-col gap-y-1 overflow-y-auto break-all rounded-lg bg-panel-input pr-4">
                 {links.length
                   ? links.map(link => <div key={`link-${link.split('|')[4]}`}>{link}</div>)
                   : <div>No files selected.</div>}
@@ -199,7 +199,7 @@ function AvDumpSeriesSelectModal({ getLinks, onClose, show }: Props) {
                 startIcon={mdiMagnify}
               />
               <div className="w-full rounded-lg border border-panel-border bg-panel-input p-4 capitalize">
-                <div className="shoko-scrollbar flex h-[9.5rem] flex-col gap-y-1 overflow-x-clip overflow-y-scroll rounded-lg bg-panel-input pr-2 ">
+                <div className="flex h-[9.5rem] flex-col gap-y-1 overflow-x-clip overflow-y-scroll rounded-lg bg-panel-input pr-2 ">
                   {searchQuery.isError || searchQuery.isFetching
                     ? (
                       <div className="flex h-full items-center justify-center">

diff --git a/src/css/common.css b/src/css/common.css
@@ -110,12 +110,12 @@ body {
 /* Fixes Scrollbars breaking on other browsers and only applies the following when using Mozilla. */
 /* stylelint-disable-next-line at-rule-no-vendor-prefix */
 @-moz-document url-prefix() {
-  .shoko-scrollbar {
+  div {
     scrollbar-color: theme('colors.slider-color') theme('colors.slider-background');
     scrollbar-width: thin;
   }
 
-  .shoko-scrollbar * .bg-panel-input {
+  div * .bg-panel-input {
     scrollbar-color: theme('colors.slider-color-alt') theme('colors.slider-background-alt');
     scrollbar-width: thin;
   }

diff --git a/src/pages/main/MainPage.tsx b/src/pages/main/MainPage.tsx
@@ -42,7 +42,7 @@ function MainPage() {
       <div className="flex grow flex-col overflow-x-clip">
         <ImportFolderModal />
         <TopNav />
-        <div className="shoko-scrollbar scroll-gutter grow overflow-y-auto py-6 contain-strict" ref={scrollRef}>
+        <div className="scroll-gutter grow overflow-y-auto py-6 contain-strict" ref={scrollRef}>
           <div className="scroll-no-gutter mx-auto flex min-h-full w-full max-w-[120rem] flex-col px-6">
             <Outlet context={{ scrollRef }} />
           </div>

diff --git a/src/pages/utilities/FileSearch.tsx b/src/pages/utilities/FileSearch.tsx
@@ -293,7 +293,7 @@ const FileDetails = React.memo(({ fileId }: { fileId: number }) => {
             <span className="font-semibold">Series Name</span>
             <Link to={`/webui/collection/series/${seriesId}`}>
               <div className="flex items-center gap-x-2 font-semibold text-panel-text-primary">
-                <ShokoIcon className="w-6" />
+                <ShokoIcon className="size-6" />
                 Shoko
                 <Icon className="text-panel-icon-action" path={mdiOpenInNew} size={1} />
               </div>