feat: update settings page design (#145)

RaunoT · Jul 18, 2024 · 550e94a · 550e94a
1 parent e1ac31e
commit 550e94a
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 23 deletions.
diff --git a/src/app/_components/AppProvider.tsx b/src/app/_components/AppProvider.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { Settings } from '@/types'
-import { CogIcon } from '@heroicons/react/24/outline'
+import { CogIcon, XCircleIcon } from '@heroicons/react/24/outline'
 import clsx from 'clsx'
 import { useSession } from 'next-auth/react'
 import Link from 'next/link'
@@ -20,6 +20,11 @@ export default function AppProvider({ children, settings }: Props) {
   const [background, setBackground] = useState<VantaEffect>(null)
   const backgroundRef = useRef(null)
   const { data: session } = useSession()
+  const [isSettings, setIsSettings] = useState(pathname.startsWith('/settings'))
+
+  useEffect(() => {
+    setIsSettings(pathname.startsWith('/settings'))
+  }, [pathname])
 
   useEffect(() => {
     if (!background) {
@@ -59,10 +64,15 @@ export default function AppProvider({ children, settings }: Props) {
       <div ref={backgroundRef} className='fixed inset-0 -z-10 h-screen' />
       {settings.test && session?.user?.isAdmin && (
         <Link
-          href='/settings/connection'
+          href={isSettings ? '/' : '/settings/features'}
           className='absolute right-3 top-3 sm:right-4 sm:top-4'
+          aria-label={isSettings ? 'Close settings' : 'Open settings'}
         >
-          {pathname !== '/settings' && <CogIcon className='size-5 lg:size-6' />}
+          {isSettings ? (
+            <XCircleIcon className='size-5 lg:size-6' />
+          ) : (
+            <CogIcon className='size-5 lg:size-6' />
+          )}
         </Link>
       )}
 

diff --git a/src/app/settings/_components/SettingsForm.tsx b/src/app/settings/_components/SettingsForm.tsx
@@ -26,7 +26,7 @@ export default function SettingsForm({ children, settings, action }: Props) {
     <form className='glass-sheet pb-6' action={formAction}>
       <div className='grid gap-4'>
         {children}
-        <div className='mt-6 flex flex-col items-center justify-end gap-3 sm:flex-row sm:gap-4'>
+        <div className='flex flex-col items-center justify-end gap-2 sm:flex-row sm:gap-4'>
           <p
             aria-live='polite'
             role='status'

diff --git a/src/app/settings/connection/_components/ConnectionSettingsForm.tsx b/src/app/settings/connection/_components/ConnectionSettingsForm.tsx
@@ -34,6 +34,16 @@ export default function ConnectionSettingsForm({ settings }: Props) {
         />
         <span className='label'>Tautulli API key</span>
       </label>
+      <label className='input-wrapper'>
+        <input
+          type='password'
+          className='input'
+          name='tmdbApiKey'
+          defaultValue={connectionSettings.tmdbApiKey}
+          required
+        />
+        <span className='label'>TMDB API key</span>
+      </label>
       <label className='input-wrapper'>
         <input
           type='url'
@@ -53,16 +63,6 @@ export default function ConnectionSettingsForm({ settings }: Props) {
         />
         <span className='label'>Overseerr API key</span>
       </label>
-      <label className='input-wrapper'>
-        <input
-          type='password'
-          className='input'
-          name='tmdbApiKey'
-          defaultValue={connectionSettings.tmdbApiKey}
-          required
-        />
-        <span className='label'>TMDB API key</span>
-      </label>
     </SettingsForm>
   )
 }
diff --git a/src/app/settings/features/_components/FeaturesSettingsForm.tsx b/src/app/settings/features/_components/FeaturesSettingsForm.tsx
@@ -45,7 +45,7 @@ export default function FeaturesSettingsForm({ settings, libraries }: Props) {
         name='activeLibraries'
         defaultValue={featuresSettings.activeLibraries}
       >
-        <div className='mr-auto flex flex-wrap gap-2'>
+        <div className='peer mr-auto flex flex-wrap gap-2'>
           {libraries.map((library) => (
             <Checkbox
               key={library.section_id}
@@ -73,7 +73,7 @@ export default function FeaturesSettingsForm({ settings, libraries }: Props) {
           ]
         }
       >
-        <div className='mr-auto flex flex-wrap gap-2'>
+        <div className='peer mr-auto flex flex-wrap gap-2'>
           <Checkbox value='year' className='checkbox-wrapper'>
             <div className='checkbox' aria-hidden='true'></div>
             Year
@@ -110,6 +110,7 @@ export default function FeaturesSettingsForm({ settings, libraries }: Props) {
           className='input'
           name='googleAnalyticsId'
           defaultValue={featuresSettings.googleAnalyticsId}
+          placeholder='G-XXXXXXXXXX'
         />
         <span className='label'>Google Analytics ID</span>
       </label>

diff --git a/src/app/settings/layout.tsx b/src/app/settings/layout.tsx
@@ -25,7 +25,7 @@ export default async function SettingsLayout({ children }: Props) {
     <div className='mb-auto w-full max-w-screen-sm'>
       <PageTitle
         title={settings.test ? 'Settings' : "Let's get started"}
-        noBack={!settings.test}
+        noBack
       />
       {settings.test && <SettingsNav />}
       {children}

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -114,7 +114,7 @@
   }
 
   .label {
-    @apply shrink-0 text-xs font-medium uppercase text-neutral-300 sm:w-48 sm:text-right sm:text-sm;
+    @apply shrink-0 text-xs font-medium text-neutral-300 peer-focus-within:text-white sm:w-48 sm:text-right sm:text-sm;
 
     &--start {
       @apply mt-0.5 self-start;
@@ -189,11 +189,7 @@
 
     &:focus-within {
       .checkbox {
-        @apply focus-ring;
-      }
-
-      ~ .label {
-        @apply text-white;
+        @apply focus-ring bg-neutral-400;
       }
     }
   }