Update styles and add background images

Author: alinnert

package-lock.json

@@ -4,6 +4,7 @@ import {
   mdiCheck,
   mdiCogOutline,
   mdiDockLeft,
+  mdiImage,
   mdiListStatus,
   mdiNoteTextOutline,
 } from '@mdi/js'
@@ -26,6 +27,7 @@ import { AppThemeSwitcher } from './AppThemeSwitcher'
 import { useCustomizeMode } from './useCustomizeMode'
 import { useSearchMode } from './useSearchMode'
 import { useTheme } from './useTheme'
+import { useToggleBackground } from './useToggleBackground'
 import { useToggleDescriptions } from './useToggleDescriptions'
 import { useToggleJumpLinks } from './useToggleJumpLinks'
 
@@ -34,15 +36,16 @@ export const WebdevHome: FC = () => {
   const searchMode = useSearchMode()
   const toggleDescriptions = useToggleDescriptions()
   const toggleJumpLinks = useToggleJumpLinks()
+  const toggleBackground = useToggleBackground()
   const isCurrentAppMode = useIsCurrentAppMode()
 
   useTheme()
 
   function handleScrollTopClick() {
-    const htmlEl = document.children.item(0)
-    if (htmlEl === null) return
+    const mainContentElement = document.getElementById('main-content')
+    if (mainContentElement === null) return
 
-    htmlEl.scrollTo({ top: 0, behavior: 'smooth' })
+    mainContentElement.scrollTo({ top: 0, behavior: 'smooth' })
   }
 
   return (
@@ -110,6 +113,12 @@ export const WebdevHome: FC = () => {
                   selected={toggleDescriptions.showDescriptions}
                   action={toggleDescriptions.toggle}
                 />
+                <AppMenuItem
+                  label="Show background"
+                  icon={<MdiIcon path={mdiImage} />}
+                  selected={toggleBackground.showBackground}
+                  action={toggleBackground.toggle}
+                />
 
                 <AppThemeSwitcher />
                 <AppInfo />

public/assets/images/background-dark.jpg

@@ -1,5 +1,6 @@
 import classNames from 'classnames'
 import { FC, PropsWithChildren, ReactElement, ReactNode } from 'react'
+import { useToggleBackground } from './useToggleBackground'
 
 type Props = {
   header: ReactElement
@@ -11,19 +12,27 @@ export const AppLayout: FC<PropsWithChildren<Props>> = ({
   header,
   sidebar,
 }) => {
+  const toggleBackground = useToggleBackground()
+
   return (
     <div
       className={classNames(
         'fixed inset-0',
         'grid grid-cols-1 grid-rows-[auto,1fr]',
         'lg:grid-cols-[auto,1fr]',
         'overflow-hidden',
-        'bg-white dark:bg-gray-700',
+        {
+          'bg-page-light dark:bg-page-dark bg-cover bg-center':
+            toggleBackground.showBackground,
+          'bg-white dark:bg-gray-800': !toggleBackground.showBackground,
+        },
       )}
     >
-      <div className="col-span-2">{header}</div>
+      <div className="lg:col-span-2">{header}</div>
       <div className="overflow-auto">{sidebar}</div>
-      <div className="overflow-auto">{children}</div>
+      <div className="overflow-auto" id="main-content">
+        {children}
+      </div>
     </div>
   )
 }

public/assets/images/background-light.jpg

@@ -0,0 +1,22 @@
+import { useCallback } from 'react'
+import { useAppDispatch, useAppSelector } from '../../stores'
+import { setDisplayBackground } from '../../stores/appSettings/appSettingsActions'
+
+type UseToggleBackgroundResult = {
+  showBackground: boolean
+  toggle: () => void
+}
+
+export function useToggleBackground(): UseToggleBackgroundResult {
+  const dispatch = useAppDispatch()
+
+  const showBackground = useAppSelector(
+    (state) => state.appSettings.showBackground,
+  )
+
+  const toggle = useCallback(() => {
+    dispatch(setDisplayBackground(!showBackground))
+  }, [dispatch, showBackground])
+
+  return { showBackground, toggle }
+}

public/assets/images/background.jpg

@@ -25,12 +25,12 @@ export const AppAction: FC<Props> = ({
         'rounded-md',
         'select-none',
         {
-          'hover:bg-gray-300 active:bg-gray-400': !active && !highlight,
+          'hover:bg-black/10 active:bg-black/15': !active && !highlight,
           'bg-brand-500 hover:bg-brand-600 active:bg-brand-700':
             active && !highlight,
           'bg-brand-500/15 hover:bg-brand-500/25 active:bg-brand-500/35':
             highlight,
-          'dark:hover:bg-gray-600 dark:active:bg-gray-500':
+          'dark:hover:bg-white/10 dark:active:bg-white/15':
             !active && !highlight,
           'dark:hover:bg-brand-600 dark:active:bg-brand-700':
             active && !highlight,

src/components/App/App.tsx

@@ -12,20 +12,21 @@ export const AppHeader: FC<Props> = ({ centerItems, actions }) => {
     <div
       className={classNames(
         'grid items-center',
-        'grid-cols-[1fr,auto,1fr]',
+        'grid-cols-[1fr,auto] grid-rows-[auto,auto] md:grid-cols-[1fr,auto,1fr] md:grid-rows-1',
         'px-page',
+        'bg-white/20 dark:bg-black/20',
       )}
     >
       <Logo />
 
       {centerItems !== null ? (
-        <div className="flex items-center gap-x-1 py-2">{centerItems}</div>
+        <div className="col-span-2 row-start-2 flex items-center gap-x-1 justify-self-center py-2 md:col-span-1 md:col-start-2 md:row-start-1">
+          {centerItems}
+        </div>
       ) : null}
 
       {actions !== null ? (
-        <div className="flex gap-x-1 place-self-end py-2">
-          {actions}
-        </div>
+        <div className="flex gap-x-1 place-self-end py-2">{actions}</div>
       ) : null}
     </div>
   )

src/components/App/AppLayout.tsx

@@ -25,7 +25,7 @@ export const AppMenu: FC<PropsWithChildren<Props>> = ({
           'flex flex-col gap-y-px',
           'bg-white dark:bg-gray-600',
           'border border-gray-300 dark:border-gray-400',
-          'rounded-md',
+          'rounded-md shadow-lg',
         )}
       >
         {children}