feat(frontend): logo updates

pull/76/head
sct 4 years ago
parent b77db5a439
commit 5a43ec5405

Binary file not shown.

After

Width:  |  Height:  |  Size: 140 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 315 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 249 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

@ -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);

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

@ -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-1 h-0 pt-5 pb-4 overflow-y-auto">
<div className="flex-shrink-0 flex items-center px-4"> <div className="flex-shrink-0 flex items-center px-4">
<span className="text-xl text-cool-gray-50"> <span className="text-xl text-cool-gray-50">
Overseerr <Link href="/">
<a>
<img src="/logo.png" alt="Overseerr Logo" />
</a>
</Link>
</span> </span>
</div> </div>
<nav className="mt-5 px-2 space-y-1"> <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 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-1 flex flex-col pt-5 pb-4 overflow-y-auto">
<div className="flex items-center flex-shrink-0 px-4"> <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> </div>
<nav className="mt-5 flex-1 px-2 bg-gray-800 space-y-1"> <nav className="mt-5 flex-1 px-2 bg-gray-800 space-y-1">
{SidebarLinks.map((sidebarLink) => { {SidebarLinks.map((sidebarLink) => {

@ -3,7 +3,7 @@ import PlexLoginButton from '../PlexLoginButton';
import { useUser } from '../../hooks/useUser'; import { useUser } from '../../hooks/useUser';
import axios from 'axios'; import axios from 'axios';
import { useRouter } from 'next/dist/client/router'; import { useRouter } from 'next/dist/client/router';
import Logo from '../../assets/logo.svg'; import ImageFader from '../Common/ImageFader';
const Login: React.FC = () => { const Login: React.FC = () => {
const [authToken, setAuthToken] = useState<string | undefined>(undefined); const [authToken, setAuthToken] = useState<string | undefined>(undefined);
@ -35,15 +35,30 @@ const Login: React.FC = () => {
}, [user, router]); }, [user, router]);
return ( 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 Log in to continue
</h2> </h2>
</div> </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 <PlexLoginButton
onAuthToken={(authToken) => setAuthToken(authToken)} onAuthToken={(authToken) => setAuthToken(authToken)}
/> />

@ -199,7 +199,10 @@ const TitleCard: React.FC<TitleCardProps> = ({
</div> </div>
<div className="flex justify-between left-0 bottom-0 right-0 top-0 px-2 py-2"> <div className="flex justify-between left-0 bottom-0 right-0 top-0 px-2 py-2">
<Link <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"> <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 <svg

Loading…
Cancel
Save