First run update (ShokoAnime#647)

* Replace default background image * Update first run to 7.5 * Remove type on `oldWebuiSettings`
Queuecumbr · Sep 24, 2023 · ba24733 · ba24733
1 parent a53887a
commit ba24733
Show file tree

Hide file tree

Showing 24 changed files with 87 additions and 83 deletions.
diff --git a/images/OnePiece.png b/images/OnePiece.png
diff --git a/images/SpyXFamily.jpg b/images/SpyXFamily.jpg
diff --git a/src/components/Collection/CardViewItem.tsx b/src/components/Collection/CardViewItem.tsx
@@ -72,7 +72,7 @@ const CardViewItem = ({ item, mainSeries }: { item: CollectionGroupType, mainSer
         <Link to={viewRouteLink()}>
           <BackgroundImagePlaceholderDiv
             image={poster}
-            className="group h-[12.5625rem] w-[8.625rem] shrink-0 rounded-md drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
+            className="group h-[12.5625rem] w-[8.625rem] shrink-0 rounded-md drop-shadow-md"
             hidePlaceholderOnHover
             zoomOnHover
           >

diff --git a/src/components/Collection/CountIcon.tsx b/src/components/Collection/CountIcon.tsx
@@ -6,7 +6,7 @@ const CountIcon = ({ children, className, show = true }) => (
     ? (
       <div
         className={cx(
-          'px-3 py-1 rounded font-semibold text-overlay-count-text text-center min-w-[1.75rem] drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]',
+          'px-3 py-1 rounded font-semibold text-overlay-count-text text-center min-w-[1.75rem] drop-shadow-md',
           className,
         )}
       >

diff --git a/src/components/Collection/GridViewItem.tsx b/src/components/Collection/GridViewItem.tsx
@@ -47,7 +47,7 @@ const GridViewItem = ({ isSeries = false, item }: Props) => {
       <div className="group flex w-[13.0625rem] shrink-0 flex-col content-center">
         <BackgroundImagePlaceholderDiv
           image={mainPoster}
-          className="mb-3 h-[19.0625rem] rounded-md border border-overlay-border drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
+          className="mb-3 h-[19.0625rem] rounded-md border border-overlay-border drop-shadow-md"
           hidePlaceholderOnHover
           zoomOnHover
         >

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

diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
@@ -17,7 +17,7 @@ function Header({ setShowSidebar, showSidebar }: Props) {
   const queueItems = useSelector((state: RootState) => state.mainpage.queueStatus);
 
   return (
-    <div className="z-[100] flex max-h-15 items-center justify-between bg-header-background-alt p-4 drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]">
+    <div className="z-[100] flex max-h-15 items-center justify-between bg-header-background-alt p-4 drop-shadow-md">
       <Button onClick={() => setShowSidebar(!showSidebar)}>
         <Icon path={showSidebar ? mdiBackburger : mdiMenu} size={1} className="text-header-text" />
       </Button>

diff --git a/src/core/patches.ts b/src/core/patches.ts
@@ -2,9 +2,10 @@ import type { WebUISettingsType } from './types/api/settings';
 
 export const webuiSettingsPatches = {
   5: (oldWebuiSettings) => {
-    const webuiSettings = oldWebuiSettings as WebUISettingsType;
+    const webuiSettings = oldWebuiSettings;
     if (oldWebuiSettings.updateChannel === 'unstable') webuiSettings.updateChannel = 'Dev';
     else webuiSettings.updateChannel = 'Stable';
     return { ...webuiSettings, settingsRevision: 5 };
   },
-} as Record<number, (any) => WebUISettingsType>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+} as Record<number, (oldWebuiSettings: any) => WebUISettingsType>;
diff --git a/src/css/common.css b/src/css/common.css
@@ -81,7 +81,7 @@ input[type='range']:focus::-moz-range-thumb {
 body {
   background-color: theme('colors.default-background');
   color: theme('colors.panel-text');
-  font-weight: 400;
+  font-weight: 300;
 }
 
 ::-webkit-scrollbar {
@@ -177,7 +177,7 @@ body {
 }
 
 .login-image-default {
-  background-image: url('/images/SpyXFamily.jpg');
+  background-image: url('/images/OnePiece.png');
 }
 
 /* Chromium Autofill Fix */

diff --git a/src/css/modals.css b/src/css/modals.css
@@ -3,7 +3,7 @@
 }
 
 .profile-modal-image {
-  background-image: url('/images/SpyXFamily.jpg');
+  background-image: url('/images/OnePiece.png');
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;

diff --git a/src/css/theme-shoko-gray.css b/src/css/theme-shoko-gray.css
@@ -30,8 +30,7 @@
   --color-panel-background: #2c333e;
   --color-panel-background-alt: #21242b;
   --color-panel-background-toolbar: #282e38;
-  --color-panel-background-login: #2c333ee6;
-  --color-panel-background-transparent: #2c333e80;
+  --color-panel-background-transparent: #2c333ee6;
   --color-panel-border: #21242b;
   --color-panel-border-alt: #3f4762;
   --color-panel-text: #cfd8e3;

diff --git a/src/pages/collection/Collection.tsx b/src/pages/collection/Collection.tsx
@@ -11,7 +11,7 @@ import { useGetFilterQuery } from '@/core/rtkQuery/splitV3Api/collectionApi';
 
 const OptionButton = ({ icon, onClick }) => (
   <div
-    className="cursor-pointer rounded border border-panel-border bg-button-secondary px-5 py-2 drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
+    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} />

diff --git a/src/pages/collection/Series.tsx b/src/pages/collection/Series.tsx
@@ -155,7 +155,7 @@ const Series = () => {
           </div>
           <BackgroundImagePlaceholderDiv
             image={mainPoster}
-            className="h-[23.875rem] w-[17.0625rem] rounded drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
+            className="h-[23.875rem] w-[17.0625rem] rounded drop-shadow-md"
           />
         </div>
         <div className="flex flex-nowrap gap-x-8 rounded-md border border-panel-border bg-panel-background-transparent p-8 font-semibold">

diff --git a/src/pages/collection/series/SeriesCredits.tsx b/src/pages/collection/series/SeriesCredits.tsx
@@ -19,7 +19,7 @@ const getThumbnailUrl = (item: SeriesCast, mode: string) => {
   return `/api/v3/Image/${thumbnail.Source}/${thumbnail.Type}/${thumbnail.ID}`;
 };
 
-const Heading = React.memo(({ mode, setMode }: { mode: string, setMode: (string) => void }) => (
+const Heading = React.memo(({ mode, setMode }: { mode: string, setMode: (mode: string) => void }) => (
   <div className="flex items-center gap-x-2 text-xl font-semibold">
     Credits
     <Icon path={mdiChevronRight} size={1} />

diff --git a/src/pages/collection/series/SeriesImages.tsx b/src/pages/collection/series/SeriesImages.tsx
@@ -13,7 +13,7 @@ import { useGetSeriesImagesQuery } from '@/core/rtkQuery/splitV3Api/seriesApi';
 
 import type { ImageType } from '@/core/types/api/common';
 
-const Heading = React.memo(({ setType, type }: { type: string, setType: (string) => void }) => (
+const Heading = React.memo(({ setType, type }: { type: string, setType: (type: string) => void }) => (
   <div className="flex items-center gap-x-2 text-xl font-semibold">
     Images
     <Icon path={mdiChevronRight} size={1} />
@@ -124,7 +124,7 @@ const SeriesImages = () => {
               <BackgroundImagePlaceholderDiv
                 image={item}
                 className={cx(
-                  'rounded-md drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)] border',
+                  'rounded-md drop-shadow-md border',
                   item === selectedImage ? 'border-panel-important border-2 opacity-50' : 'border-panel-border',
                   sizeMap[type],
                 )}

diff --git a/src/pages/collection/series/SeriesOverview.tsx b/src/pages/collection/series/SeriesOverview.tsx
@@ -263,7 +263,7 @@ const SeriesOverview = () => {
                   >
                     <BackgroundImagePlaceholderDiv
                       image={thumbnail}
-                      className="h-[19.875rem] w-[13.875rem] rounded-md border border-panel-border drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
+                      className="h-[19.875rem] w-[13.875rem] rounded-md border border-panel-border drop-shadow-md"
                     />
                     <span className="line-clamp-1 text-ellipsis text-sm">{item.Title}</span>
                     <span className="text-sm text-panel-important">{itemRelation}</span>
@@ -278,7 +278,7 @@ const SeriesOverview = () => {
                 >
                   <BackgroundImagePlaceholderDiv
                     image={thumbnail}
-                    className="h-[19.875rem] w-[13.875rem] rounded-md border border-panel-border drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
+                    className="h-[19.875rem] w-[13.875rem] rounded-md border border-panel-border drop-shadow-md"
                   />
                   <span className="line-clamp-1 text-ellipsis text-sm">{item.Title}</span>
                   <span className="text-sm text-panel-important">{itemRelation}</span>
@@ -303,7 +303,7 @@ const SeriesOverview = () => {
                   >
                     <BackgroundImagePlaceholderDiv
                       image={thumbnail}
-                      className="h-[19.875rem] w-[13.875rem] rounded-md border border-panel-border drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
+                      className="h-[19.875rem] w-[13.875rem] rounded-md border border-panel-border drop-shadow-md"
                     />
                     <span className="line-clamp-1 text-ellipsis text-sm">{item.Title}</span>
                     <span className="text-sm text-panel-important">
@@ -323,7 +323,7 @@ const SeriesOverview = () => {
                 >
                   <BackgroundImagePlaceholderDiv
                     image={thumbnail}
-                    className="h-[19.875rem] w-[13.875rem] rounded-md border border-panel-border drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
+                    className="h-[19.875rem] w-[13.875rem] rounded-md border border-panel-border drop-shadow-md"
                   />
                   <span className="line-clamp-1 text-ellipsis text-sm">{item.Title}</span>
                   <span className="text-sm text-panel-important">

diff --git a/src/pages/dashboard/components/EpisodeDetails.tsx b/src/pages/dashboard/components/EpisodeDetails.tsx
@@ -51,7 +51,7 @@ function EpisodeDetails(props: Props): JSX.Element {
         : null}
       <BackgroundImagePlaceholderDiv
         image={episode.SeriesPoster}
-        className="mb-3 h-80 rounded border border-panel-border drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
+        className="mb-3 h-80 rounded border border-panel-border drop-shadow-md"
       >
         {percentage && <div className="absolute bottom-0 left-0 h-1 bg-panel-primary" style={{ width: percentage }} />}
         {isInCollection && (

diff --git a/src/pages/dashboard/components/SeriesDetails.tsx b/src/pages/dashboard/components/SeriesDetails.tsx
@@ -13,7 +13,7 @@ function SeriesDetails(props: { series: SeriesType }): JSX.Element {
     <div key={`series-${series.IDs.ID}`} className="mr-4 flex w-56 shrink-0 flex-col justify-center last:mr-0">
       <BackgroundImagePlaceholderDiv
         image={mainPoster}
-        className="mb-3 h-80 rounded border border-panel-border drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
+        className="mb-3 h-80 rounded border border-panel-border drop-shadow-md"
       />
       <p className="mb-1 truncate text-center text-sm font-semibold" title={series.Name}>{series.Name}</p>
       <p className="truncate text-center text-sm opacity-75" title={`${series.Size} Files`}>

diff --git a/src/pages/dashboard/panels/RecommendedAnime.tsx b/src/pages/dashboard/panels/RecommendedAnime.tsx
@@ -19,7 +19,7 @@ const RecommendedAnime = () => {
     <div key={`series-${series.ID}`} className="mr-4 flex w-56 shrink-0 flex-col justify-center last:mr-0">
       <BackgroundImagePlaceholderDiv
         image={series.Poster}
-        className="group mb-2 h-80 rounded border border-panel-border drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]"
+        className="group mb-2 h-80 rounded border border-panel-border drop-shadow-md"
       >
         <div
           className="absolute left-0 top-0 flex h-full w-full cursor-pointer flex-col items-center justify-center bg-panel-background-transparent text-sm font-semibold opacity-0 transition-opacity group-hover:opacity-100"

diff --git a/src/pages/firstrun/FirstRunPage.tsx b/src/pages/firstrun/FirstRunPage.tsx
@@ -34,7 +34,7 @@ const MenuItem = ({ id, text }: { text: string, id: string }) => {
   }, [pathname, saved, id]);
 
   return (
-    <div key={id} className="flex items-center gap-x-7 font-semibold">
+    <div key={id} className="flex items-center gap-x-7 text-xl font-semibold">
       <Icon
         path={path}
         className="text-panel-primary"
@@ -96,57 +96,59 @@ function FirstRunPage() {
   }, [version]);
 
   return (
-    <div className="mx-auto flex h-full w-full max-w-[120rem] gap-x-8 p-8">
-      <div className="flex w-[31.25rem] flex-col items-center border border-panel-border bg-panel-background p-8">
-        <div className="flex flex-col items-center gap-y-4">
-          <ShokoIcon className="w-32" />
-          <div className="flex items-center gap-x-2 font-semibold">
-            Version:&nbsp;
-            {parsedVersion}
+    <div className="login-image-default flex w-full justify-center">
+      <div className="flex h-full w-full max-w-[120rem] gap-x-8 p-8">
+        <div className="flex w-[31.25rem] flex-col items-center rounded-md border border-panel-border bg-panel-background-transparent p-8">
+          <div className="flex flex-col items-center gap-y-4">
+            <ShokoIcon className="w-32" />
+            <div className="flex items-center gap-x-2 font-semibold">
+              Version:&nbsp;
+              {parsedVersion}
+            </div>
           </div>
-        </div>
 
-        <div className="-mt-24 flex grow flex-col justify-center gap-y-4 p-4">
-          <MenuItem text="Acknowledgement" id="acknowledgement" />
-          <MenuItem text="Local Account" id="local-account" />
-          <MenuItem text="AniDB Account" id="anidb-account" />
-          <MenuItem text="Metadata Sources" id="metadata-sources" />
-          <MenuItem text="Start Server" id="start-server" />
-          <MenuItem text="Import Folders" id="import-folders" />
-          <MenuItem text="Data Collection" id="data-collection" />
-        </div>
+          <div className="-mt-48 flex grow flex-col justify-center gap-y-4 p-4">
+            <MenuItem text="Acknowledgement" id="acknowledgement" />
+            <MenuItem text="Local Account" id="local-account" />
+            <MenuItem text="AniDB Account" id="anidb-account" />
+            <MenuItem text="Metadata Sources" id="metadata-sources" />
+            <MenuItem text="Start Server" id="start-server" />
+            <MenuItem text="Import Folders" id="import-folders" />
+            <MenuItem text="Data Collection" id="data-collection" />
+          </div>
 
-        <div className="flex w-full flex-col gap-y-4 font-semibold">
-          <Button
-            buttonType="primary"
-            className="flex items-center justify-center gap-x-1 py-2"
-            onClick={() => window.open('https://discord.gg/vpeHDsg', '_blank')}
-          >
-            Get Help on&nbsp;
-            <Icon path={siDiscord.path} size={0.75} />
-            &nbsp;Discord
-          </Button>
-          <Button
-            buttonType="primary"
-            className="py-2"
-            onClick={() => window.open('https://docs.shokoanime.com', '_blank')}
-          >
-            Documentation
-          </Button>
+          <div className="flex w-full flex-col gap-y-4 font-semibold">
+            <Button
+              buttonType="primary"
+              className="flex items-center justify-center gap-x-1 py-2"
+              onClick={() => window.open('https://discord.gg/vpeHDsg', '_blank')}
+            >
+              Get Help on&nbsp;
+              <Icon path={siDiscord.path} size={0.75} />
+              &nbsp;Discord
+            </Button>
+            <Button
+              buttonType="primary"
+              className="py-2"
+              onClick={() => window.open('https://docs.shokoanime.com', '_blank')}
+            >
+              Documentation
+            </Button>
+          </div>
         </div>
-      </div>
 
-      <div className="flex grow flex-col items-center justify-center border border-panel-border bg-panel-background p-8">
-        <Outlet
-          context={{
-            fetching: settingsQuery.isLoading,
-            newSettings,
-            setIsPersistent,
-            setNewSettings,
-            updateSetting,
-            saveSettings,
-          }}
-        />
+        <div className="flex grow flex-col items-center justify-center rounded-md border border-panel-border bg-panel-background-transparent p-8">
+          <Outlet
+            context={{
+              fetching: settingsQuery.isLoading,
+              newSettings,
+              setIsPersistent,
+              setNewSettings,
+              updateSetting,
+              saveSettings,
+            }}
+          />
+        </div>
       </div>
     </div>
   );

diff --git a/src/pages/firstrun/MetadataSources.tsx b/src/pages/firstrun/MetadataSources.tsx
@@ -65,7 +65,7 @@ function MetadataSources() {
       <div className="flex gap-x-2 border-b-2 border-panel-border pb-3 text-xl">
         {renderTabButton('AniDB', 'anidb')}
         |
-        {renderTabButton('TMBD', 'moviedb')}
+        {renderTabButton('TMDB', 'moviedb')}
         |
         {renderTabButton('TVDB', 'tvdb')}
         {/* TODO: Add plex and trakt settings. Currently they only work after the setup is completed. */}

diff --git a/src/pages/login/LoginPage.tsx b/src/pages/login/LoginPage.tsx
@@ -109,11 +109,11 @@ function LoginPage() {
         )}
         style={loginImage !== '' && loginImage !== 'default' ? { backgroundImage: `url('${loginImage}')` } : {}}
       >
-        <div className="absolute right-0 top-0 border border-panel-border bg-panel-background-login px-8 py-4 font-semibold">
-          {imageMetadata.isError ? 'Spy X Family' : loginSeriesTitle}
+        <div className="absolute right-0 top-0 border border-panel-border bg-panel-background-transparent px-8 py-4 font-semibold">
+          {imageMetadata.isError ? 'One Piece' : loginSeriesTitle}
         </div>
 
-        <div className="flex w-[31.25rem] flex-col items-center gap-y-8 rounded-md border border-panel-border bg-panel-background-login p-8">
+        <div className="flex w-[30rem] flex-col items-center gap-y-8 rounded-lg border border-panel-border bg-panel-background-transparent p-8 drop-shadow-md">
           <div className="flex flex-col items-center gap-y-4">
             <ShokoIcon className="w-24" />
             <div className="font-semibold">
@@ -187,15 +187,15 @@ function LoginPage() {
               </div>
             )}
             {status.data?.State === 4 && (
-              <div className="flex flex-col gap-y-12 py-8">
-                <div className="flex flex-col gap-y-4 px-4">
+              <div className="flex flex-col gap-y-8">
+                <div className="flex flex-col gap-y-4">
                   <div>Welcome and thanks for installing Shoko!</div>
-                  <div className="text-justify leading-6">
+                  <div className="text-justify">
                     Before Shoko can start managing your anime collection for you, you&apos;ll need to go through
                     our&nbsp;
                     <span className="font-bold text-panel-important">First Run Wizard</span>
-                    to set everything up. Don&apos;t worry, its extremely easy, straightforward and should only take you
-                    a couple minutes.
+                    &nbsp;to set everything up. Don&apos;t worry, its extremely easy, straightforward and should only
+                    take you a couple minutes.
                   </div>
                   <div>
                     Click&nbsp;

diff --git a/src/pages/settings/tabs/UserManagementSettings.tsx b/src/pages/settings/tabs/UserManagementSettings.tsx
@@ -305,7 +305,7 @@ function UserManagementSettings() {
             <div className="flex gap-x-2">
               <label
                 htmlFor="avatar"
-                className="cursor-pointer rounded-md border border-panel-border bg-button-secondary px-3 py-2 text-xs font-semibold drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)] hover:bg-button-secondary-hover"
+                className="cursor-pointer rounded-md border border-panel-border bg-button-secondary px-3 py-2 text-xs font-semibold drop-shadow-md hover:bg-button-secondary-hover"
               >
                 Pick
                 <input

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -75,7 +75,6 @@ module.exports = {
         'panel-background-alt': 'var(--color-panel-background-alt)',
         'panel-background-toolbar': 'var(--color-panel-background-toolbar)',
         'panel-background-transparent': 'var(--color-panel-background-transparent)',
-        'panel-background-login': 'var(--color-panel-background-login)',
         'panel-border': 'var(--color-panel-border)',
         'panel-border-alt': 'var(--color-panel-border-alt)',
         'panel-text': 'var(--color-panel-text)',
@@ -112,6 +111,9 @@ module.exports = {
       opacity: {
         '65': '.65',
         '85': '.85',
+      },
+      dropShadow: {
+        'md': '0px 4px 4px rgba(0, 0, 0, 0.25)',
       }
     },
   },