fix(ui): various small tweaks to clean up new design language

README.md

@@ -24,7 +24,7 @@ Keep an eye on the [issues page](https://github.com/RaunoT/plex-rewind/issues) t
 
 ## Preview
 
-![Dashboard](https://i.imgur.com/3MFDUv6.png 'Dashboard')
+![Dashboard](https://i.imgur.com/S1bA46c.png 'Dashboard')
 
 ![Rewind](https://i.imgur.com/tph7cDj.png 'Rewind')
 

src/app/_components/CardWrapper.tsx

@@ -9,7 +9,7 @@ export default function CardWrapper({ children, className }: Props) {
   return (
     <div
       className={clsx(
-        'flex w-full flex-1 flex-col rounded-3xl bg-neutral-200 bg-opacity-20 px-4 py-6 backdrop-blur-lg sm:p-8 2xl:p-10',
+        'flex w-full flex-1 flex-col rounded-3xl bg-neutral-200 bg-opacity-20 p-4 backdrop-blur-lg sm:p-8 2xl:p-10',
         className,
       )}
     >

src/app/dashboard/_components/Dashboard.tsx

@@ -36,11 +36,11 @@ export default function Dashboard({
 }: Props) {
   return (
     <>
-      <h2 className='mb-1 flex items-center font-bold text-black sm:text-xl xl:text-2xl'>
+      <h2 className='mb-1 flex items-center font-bold uppercase text-black sm:text-xl xl:text-2xl'>
         {getTitleIcon(type)}
         {title}
       </h2>
-      <ul className='icon-stats-container font-medium text-neutral-200'>
+      <ul className='icon-stats-container mb-1 font-medium text-neutral-200'>
         {totalSize && (
           <li className='icon-stat-wrapper'>
             <FolderIcon />
@@ -86,7 +86,7 @@ export default function Dashboard({
 }
 
 function getTitleIcon(type: string) {
-  const className = 'mr-2 size-8 sm:size-10 stroke-1'
+  const className = 'mr-1 sm:mr-2 size-8 sm:size-10 stroke-1'
 
   switch (type) {
     case 'movie':

src/app/dashboard/error.tsx

@@ -13,7 +13,7 @@ export default function Error({ error, reset }: Props) {
   }, [error])
 
   return (
-    <div className='flex flex-1 flex-col justify-center text-center lg:min-h-[492px] 2xl:min-h-[564px]'>
+    <div className='flex flex-1 flex-col justify-center text-center lg:min-h-[496px] 2xl:min-h-[568px]'>
       <h1 className='mb-4 text-3xl italic leading-tight sm:text-4xl'>
         Uh oh.. something went wrong!
       </h1>

src/app/layout.tsx

@@ -21,7 +21,7 @@ export const metadata: Metadata = {
   appleWebApp: {
     title: META_TITLE,
     capable: true,
-    statusBarStyle: 'default',
+    statusBarStyle: 'black-translucent',
   },
   openGraph: {
     type: 'website',

src/app/rewind/_components/RewindStories.tsx

@@ -117,9 +117,8 @@ export default function RewindStories({ userRewind, user }: Props) {
     <Stories
       stories={stories}
       classNames={{
-        main: '!bg-transparent pt-10 sm:pt-8 flex flex-1 justify-center flex-col',
-        storyContainer:
-          '!bg-transparent *:sm:flex *:sm:flex-col *:sm:justify-center',
+        main: '!bg-transparent pt-10 sm:pt-8 flex flex-1 sm:justify-center sm:flex-col',
+        storyContainer: '!bg-transparent',
       }}
     />
   )

src/app/rewind/_components/Stories/AudioTop.tsx

@@ -10,13 +10,15 @@ export default function StoryAudioTop({
   pause,
   resume,
 }: RewindStory) {
+  const hasTop5 = userRewind.audio.top.length === 5
+
   return (
     <StoryWrapper isPaused={isPaused} pause={pause} resume={resume}>
       <RewindStat noScale>
         <p className='mb-2'>
-          Here&apos;s your full{' '}
+          Here&apos;s your {hasTop5 ? '' : 'full '}
           <span className='rewind-cat'>
-            Top {userRewind.audio.top.length === 5 && '5'}
+            Top {hasTop5 && '5'}
             <MusicalNoteIcon />
           </span>
         </p>

src/app/rewind/_components/Stories/MoviesTop.tsx

@@ -10,13 +10,15 @@ export default function StoryMoviesTop({
   pause,
   resume,
 }: RewindStory) {
+  const hasTop5 = userRewind.movies.top.length === 5
+
   return (
     <StoryWrapper isPaused={isPaused} pause={pause} resume={resume}>
       <RewindStat noScale>
         <p className='mb-2'>
-          Here&apos;s your full{' '}
+          Here&apos;s your {hasTop5 ? '' : 'full '}
           <span className='rewind-cat'>
-            Top {userRewind.movies.top.length === 5 && '5'}
+            Top {hasTop5 && '5'}
             <FilmIcon />
           </span>
         </p>

src/app/rewind/_components/Stories/ShowsTop.tsx

@@ -10,13 +10,15 @@ export default function StoryShowsTop({
   pause,
   resume,
 }: RewindStory) {
+  const hasTop5 = userRewind.shows.top.length === 5
+
   return (
     <StoryWrapper isPaused={isPaused} pause={pause} resume={resume}>
       <RewindStat noScale>
         <p className='mb-2'>
-          Here&apos;s your full{' '}
+          Here&apos;s your {hasTop5 ? '' : 'full '}
           <span className='rewind-cat'>
-            Top {userRewind.shows.top.length === 5 && '5'}
+            Top {hasTop5 && '5'}
             <PlayCircleIcon />
           </span>
         </p>

src/app/rewind/_components/StoryWrapper.tsx

@@ -17,7 +17,7 @@ export default function StoryWrapper({
     <>
       {children}
       <button
-        className='absolute -bottom-2 right-0 z-10 size-5 sm:-right-2 2xl:-bottom-4 2xl:-right-4'
+        className='absolute bottom-0 right-0 z-10 size-5 sm:-right-2 2xl:-bottom-4 2xl:-right-4'
         onClick={() => (isPaused ? resume() : pause())}
       >
         {isPaused ? <PlayIcon /> : <PauseIcon />}