feat(frontend): logo updates

src/components/Common/ImageFader/index.tsx

@@ -0,0 +1,50 @@
+import React, {
+  useState,
+  useEffect,
+  HTMLAttributes,
+  ForwardRefRenderFunction,
+} from 'react';
+
+interface ImageFaderProps extends HTMLAttributes<HTMLDivElement> {
+  backgroundImages: string[];
+  rotationSpeed?: number;
+}
+
+const DEFAULT_ROTATION_SPEED = 6000;
+
+const ImageFader: ForwardRefRenderFunction<HTMLDivElement, ImageFaderProps> = (
+  { backgroundImages, rotationSpeed = DEFAULT_ROTATION_SPEED, ...props },
+  ref
+) => {
+  const [activeIndex, setIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(
+      () => setIndex((ai) => (ai + 1) % backgroundImages.length),
+      rotationSpeed
+    );
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [backgroundImages, rotationSpeed]);
+
+  return (
+    <div ref={ref}>
+      {backgroundImages.map((imageUrl, i) => (
+        <div
+          key={`banner-image-${i}`}
+          className={`absolute inset-0 bg-cover bg-center transition-opacity duration-300 ease-in ${
+            i === activeIndex ? 'opacity-100' : 'opacity-0'
+          }`}
+          style={{
+            backgroundImage: `linear-gradient(180deg, rgba(45, 55, 72, 0.47) 0%, #1A202E 100%), url(${imageUrl})`,
+          }}
+          {...props}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default React.forwardRef<HTMLDivElement, ImageFaderProps>(ImageFader);

src/components/Layout/LanguagePicker/index.tsx

@@ -85,15 +85,12 @@ const LanguagePicker: React.FC = () => {
                 onBlur={(e) =>
                   setLocale && setLocale(e.target.value as AvailableLocales)
                 }
+                defaultValue={locale}
               >
                 {(Object.keys(
                   availableLanguages
                 ) as (keyof typeof availableLanguages)[]).map((key) => (
-                  <option
+                  <option key={key} value={availableLanguages[key].code}>
-                    key={key}
-                    value={availableLanguages[key].code}
-                    selected={locale === availableLanguages[key].code}
-                  >
                     {availableLanguages[key].display}
                   </option>
                 ))}

src/components/Layout/Sidebar/index.tsx

@@ -148,7 +148,11 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                   <div className="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
                     <div className="flex-shrink-0 flex items-center px-4">
                       <span className="text-xl text-cool-gray-50">
-                        Overseerr
+                        <Link href="/">
+                          <a>
+                            <img src="/logo.png" alt="Overseerr Logo" />
+                          </a>
+                        </Link>
                       </span>
                     </div>
                     <nav className="mt-5 px-2 space-y-1">
@@ -203,7 +207,13 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
           <div className="flex flex-col h-0 flex-1 bg-gray-800">
             <div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
               <div className="flex items-center flex-shrink-0 px-4">
-                <span className="text-2xl text-cool-gray-50">Overseerr</span>
+                <span className="text-2xl text-cool-gray-50">
+                  <Link href="/">
+                    <a>
+                      <img src="/logo.png" alt="Overseerr Logo" />
+                    </a>
+                  </Link>
+                </span>
               </div>
               <nav className="mt-5 flex-1 px-2 bg-gray-800 space-y-1">
                 {SidebarLinks.map((sidebarLink) => {

src/components/Login/index.tsx

@@ -3,7 +3,7 @@ import PlexLoginButton from '../PlexLoginButton';
 import { useUser } from '../../hooks/useUser';
 import axios from 'axios';
 import { useRouter } from 'next/dist/client/router';
-import Logo from '../../assets/logo.svg';
+import ImageFader from '../Common/ImageFader';
 
 const Login: React.FC = () => {
   const [authToken, setAuthToken] = useState<string | undefined>(undefined);
@@ -35,15 +35,30 @@ const Login: React.FC = () => {
   }, [user, router]);
 
   return (
-    <div className="min-h-screen bg-cool-gray-900 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
+    <div className="min-h-screen bg-cool-gray-900 flex flex-col justify-center py-12 sm:px-6 lg:px-8 relative">
-      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+      <ImageFader
-        <Logo className="mx-auto max-h-32 w-auto" />
+        backgroundImages={[
-        <h2 className="mt-6 text-center text-3xl leading-9 font-extrabold text-cool-gray-100">
+          '/images/rotate1.jpg',
+          '/images/rotate2.jpg',
+          '/images/rotate3.jpg',
+          '/images/rotate4.jpg',
+        ]}
+      />
+      <div className="px-4 sm:px-2 md:px-0 sm:mx-auto sm:w-full sm:max-w-md relative z-50">
+        <img
+          src="/logo.png"
+          className="mx-auto max-h-32 w-auto"
+          alt="Overseerr Logo"
+        />
+        <h2 className="mt-2 text-center text-3xl leading-9 font-extrabold text-cool-gray-100">
           Log in to continue
         </h2>
       </div>
-      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md relative z-50">
-        <div className="bg-cool-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10">
+        <div
+          className="bg-cool-gray-800 bg-opacity-50 py-8 px-4 shadow sm:rounded-lg sm:px-10"
+          style={{ backdropFilter: 'blur(5px)' }}
+        >
           <PlexLoginButton
             onAuthToken={(authToken) => setAuthToken(authToken)}
           />

src/components/TitleCard/index.tsx

@@ -199,7 +199,10 @@ const TitleCard: React.FC<TitleCardProps> = ({
                 </div>
                 <div className="flex justify-between left-0 bottom-0 right-0 top-0 px-2 py-2">
                   <Link
-                    href={mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`}
+                    href={
+                      mediaType === 'movie' ? '/movie/[movieId]' : '/tv/[tvId]'
+                    }
+                    as={mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`}
                   >
                     <a className="cursor-pointer flex w-full h-7 text-center text-white bg-indigo-500 rounded-sm mr-1 hover:bg-indigo-400 focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
                       <svg