diff --git a/public/logo_full_light.svg b/public/logo_full_light.svg new file mode 100644 index 0000000000..3a7b823143 --- /dev/null +++ b/public/logo_full_light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/logo_stacked_light.svg b/public/logo_stacked_light.svg new file mode 100644 index 0000000000..9aa2647fb2 --- /dev/null +++ b/public/logo_stacked_light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/CollectionDetails/index.tsx b/src/components/CollectionDetails/index.tsx index a8ee90a684..c8f7b5b073 100644 --- a/src/components/CollectionDetails/index.tsx +++ b/src/components/CollectionDetails/index.tsx @@ -291,13 +291,7 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => { fill priority /> -
+
)} diff --git a/src/components/Common/SeerrLogo/index.tsx b/src/components/Common/SeerrLogo/index.tsx new file mode 100644 index 0000000000..0258b49123 --- /dev/null +++ b/src/components/Common/SeerrLogo/index.tsx @@ -0,0 +1,39 @@ +import Image, { type ImageProps } from 'next/image'; + +type SeerrLogoVariant = 'full' | 'stacked'; + +interface SeerrLogoProps extends Omit { + alt?: string; + variant: SeerrLogoVariant; +} + +const getLogoSrc = (variant: SeerrLogoVariant, light = false) => + `/logo_${variant}${light ? '_light' : ''}.svg`; + +const withLogoClass = (className: string | undefined, logoClass: string) => + [className, 'seerr-logo', logoClass].filter(Boolean).join(' '); + +const SeerrLogo = ({ + alt = 'Logo', + className, + variant, + ...props +}: SeerrLogoProps) => ( + <> + {alt} + + +); + +export default SeerrLogo; diff --git a/src/components/CompanyCard/index.tsx b/src/components/CompanyCard/index.tsx index 84c11bf42b..551ed103ae 100644 --- a/src/components/CompanyCard/index.tsx +++ b/src/components/CompanyCard/index.tsx @@ -14,7 +14,7 @@ const CompanyCard = ({ image, url, name }: CompanyCardProps) => { return ( { fill priority /> -
+
)}
diff --git a/src/components/Layout/Sidebar/index.tsx b/src/components/Layout/Sidebar/index.tsx index 60b32291a6..8f9dab1043 100644 --- a/src/components/Layout/Sidebar/index.tsx +++ b/src/components/Layout/Sidebar/index.tsx @@ -1,4 +1,5 @@ import Badge from '@app/components/Common/Badge'; +import SeerrLogo from '@app/components/Common/SeerrLogo'; import VersionStatus from '@app/components/Layout/VersionStatus'; import useClickOutside from '@app/hooks/useClickOutside'; import { Permission, useUser } from '@app/hooks/useUser'; @@ -15,7 +16,6 @@ import { UsersIcon, XMarkIcon, } from '@heroicons/react/24/outline'; -import Image from 'next/image'; import Link from 'next/link'; import { useRouter } from 'next/router'; import { Fragment, useEffect, useRef } from 'react'; @@ -192,7 +192,7 @@ const Sidebar = ({
- Logo +
@@ -255,12 +255,7 @@ const Sidebar = ({
- Logo +
diff --git a/src/components/Layout/UserDropdown/index.tsx b/src/components/Layout/UserDropdown/index.tsx index 545a63e202..27d0b7c912 100644 --- a/src/components/Layout/UserDropdown/index.tsx +++ b/src/components/Layout/UserDropdown/index.tsx @@ -1,11 +1,14 @@ import CachedImage from '@app/components/Common/CachedImage'; import MiniQuotaDisplay from '@app/components/Layout/UserDropdown/MiniQuotaDisplay'; +import useTheme from '@app/hooks/useTheme'; import { Permission, useUser } from '@app/hooks/useUser'; import defineMessages from '@app/utils/defineMessages'; import { Menu, Transition } from '@headlessui/react'; import { ArrowRightOnRectangleIcon, ClockIcon, + MoonIcon, + SunIcon, } from '@heroicons/react/24/outline'; import { CogIcon, UserIcon } from '@heroicons/react/24/solid'; import axios from 'axios'; @@ -18,6 +21,8 @@ const messages = defineMessages('components.Layout.UserDropdown', { myprofile: 'Profile', settings: 'Settings', requests: 'Requests', + switchtodark: 'Switch to Dark Theme', + switchtolight: 'Switch to Light Theme', signout: 'Sign Out', }); @@ -37,6 +42,7 @@ ForwardedLink.displayName = 'ForwardedLink'; const UserDropdown = () => { const intl = useIntl(); const { user, revalidate, hasPermission } = useUser(); + const { theme, toggleTheme } = useTheme(); const logout = async () => { const response = await axios.post('/api/v1/auth/logout'); @@ -154,6 +160,32 @@ const UserDropdown = () => { )} + + {({ active }) => ( + + )} + {({ active }) => ( {
- Logo +
diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx index 80aded586e..2f2cd33250 100644 --- a/src/components/MovieDetails/index.tsx +++ b/src/components/MovieDetails/index.tsx @@ -452,13 +452,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => { fill priority /> -
+
)} @@ -738,7 +732,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => { {data.collection && (
-
+
{ }} fill /> -
+
{data.collection.name}
diff --git a/src/components/ResetPassword/RequestResetLink.tsx b/src/components/ResetPassword/RequestResetLink.tsx index 9bebb8b065..087322ec11 100644 --- a/src/components/ResetPassword/RequestResetLink.tsx +++ b/src/components/ResetPassword/RequestResetLink.tsx @@ -1,12 +1,12 @@ import Button from '@app/components/Common/Button'; import ImageFader from '@app/components/Common/ImageFader'; import PageTitle from '@app/components/Common/PageTitle'; +import SeerrLogo from '@app/components/Common/SeerrLogo'; import LanguagePicker from '@app/components/Layout/LanguagePicker'; import defineMessages from '@app/utils/defineMessages'; import { ArrowLeftIcon, EnvelopeIcon } from '@heroicons/react/24/solid'; import axios from 'axios'; import { Field, Form, Formik } from 'formik'; -import Image from 'next/image'; import Link from 'next/link'; import { useState } from 'react'; import { useIntl } from 'react-intl'; @@ -57,7 +57,7 @@ const ResetPassword = () => {
- Logo +

{intl.formatMessage(messages.resetpassword)} diff --git a/src/components/ResetPassword/index.tsx b/src/components/ResetPassword/index.tsx index 57053e936c..b6a03019ab 100644 --- a/src/components/ResetPassword/index.tsx +++ b/src/components/ResetPassword/index.tsx @@ -1,5 +1,6 @@ import Button from '@app/components/Common/Button'; import ImageFader from '@app/components/Common/ImageFader'; +import SeerrLogo from '@app/components/Common/SeerrLogo'; import SensitiveInput from '@app/components/Common/SensitiveInput'; import LanguagePicker from '@app/components/Layout/LanguagePicker'; import globalMessages from '@app/i18n/globalMessages'; @@ -7,7 +8,6 @@ import defineMessages from '@app/utils/defineMessages'; import { LifebuoyIcon } from '@heroicons/react/24/outline'; import axios from 'axios'; import { Form, Formik } from 'formik'; -import Image from 'next/image'; import Link from 'next/link'; import { useRouter } from 'next/router'; import { useState } from 'react'; @@ -67,7 +67,7 @@ const ResetPassword = () => {

- Logo +

{intl.formatMessage(messages.resetpassword)} diff --git a/src/components/Setup/index.tsx b/src/components/Setup/index.tsx index 947104d352..13d07d7750 100644 --- a/src/components/Setup/index.tsx +++ b/src/components/Setup/index.tsx @@ -5,6 +5,7 @@ import AppDataWarning from '@app/components/AppDataWarning'; import Button from '@app/components/Common/Button'; import ImageFader from '@app/components/Common/ImageFader'; import PageTitle from '@app/components/Common/PageTitle'; +import SeerrLogo from '@app/components/Common/SeerrLogo'; import LanguagePicker from '@app/components/Layout/LanguagePicker'; import SettingsJellyfin from '@app/components/Settings/SettingsJellyfin'; import SettingsPlex from '@app/components/Settings/SettingsPlex'; @@ -17,7 +18,6 @@ import defineMessages from '@app/utils/defineMessages'; import { MediaServerType } from '@server/constants/server'; import type { Library } from '@server/lib/settings'; import axios from 'axios'; -import Image from 'next/image'; import { useRouter } from 'next/router'; import { useCallback, useEffect, useState } from 'react'; import { useIntl } from 'react-intl'; @@ -159,7 +159,7 @@ const Setup = () => {

- Logo +