fix: replace dark mode hack with bootstrap's own dark mode

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

frontend/src/components/landing-layout/footer/footer.tsx

@@ -12,7 +12,7 @@ import React from 'react'
  */
 export const Footer: React.FC = () => {
   return (
-    <footer className='text-light small'>
+    <footer className='small'>
       <PoweredByLinks />
       <SocialLink />
     </footer>

frontend/src/components/landing-layout/footer/version-info/version-info-link.tsx

@@ -18,12 +18,7 @@ export const VersionInfoLink: React.FC = () => {
 
   return (
     <Fragment>
-      <Button
-        size={'sm'}
-        variant={'link'}
-        {...cypressId('show-version-modal')}
-        className={'text-light p-0'}
-        onClick={showModal}>
+      <Button size={'sm'} variant={'link'} {...cypressId('show-version-modal')} className={'p-0'} onClick={showModal}>
         <Trans i18nKey={'landing.versionInfo.versionInfo'} />
       </Button>
       <VersionInfoModal onHide={closeModal} show={modalVisibility} />

frontend/src/components/landing-layout/landing-layout.tsx

@@ -3,11 +3,13 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+import { useApplyDarkModeStyle } from '../../hooks/dark-mode/use-apply-dark-mode-style'
+import { useSaveDarkModePreferenceToLocalStorage } from '../../hooks/dark-mode/use-save-dark-mode-preference-to-local-storage'
 import { MotdModal } from '../common/motd-modal/motd-modal'
 import { Footer } from './footer/footer'
 import { HeaderBar } from './navigation/header-bar/header-bar'
 import type { PropsWithChildren } from 'react'
-import React, { Fragment } from 'react'
+import React from 'react'
 import { Container } from 'react-bootstrap'
 
 /**
@@ -15,17 +17,20 @@ import { Container } from 'react-bootstrap'
  *
  * @param children The children that should be rendered on the page.
  */
-export const LandingLayout: React.FC<PropsWithChildren<unknown>> = ({ children }) => {
+export const LandingLayout: React.FC<PropsWithChildren> = ({ children }) => {
+  useApplyDarkModeStyle()
+  useSaveDarkModePreferenceToLocalStorage()
+
   return (
-    <Fragment>
+    <div>
       <MotdModal />
-      <Container className='text-light d-flex flex-column mvh-100'>
+      <Container className='d-flex flex-column mvh-100'>
         <HeaderBar />
         <div className={'d-flex flex-column justify-content-between flex-fill text-center'}>
           <main>{children}</main>
           <Footer />
         </div>
       </Container>
-    </Fragment>
+    </div>
   )
 }

frontend/src/components/landing-layout/navigation/header-bar/header-bar.tsx

@@ -32,7 +32,7 @@ const HeaderBar: React.FC = () => {
         </HeaderNavLink>
       </div>
       <div className='d-inline-flex gap-2'>
-        <SettingsButton variant={'outline-light'} />
+        <SettingsButton variant={'outline-dark'} />
         <NewNoteButton />
         {!userExists ? <SignInButton size='sm' /> : <UserDropdown />}
       </div>

frontend/src/components/landing-layout/navigation/header-bar/header-nav-link.module.scss

@@ -4,10 +4,10 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-.nav-link {
+.link {
   border-bottom: 2px solid transparent
 }
 
-.nav-link-active {
-  border-bottom-color: #fff;
+.active {
+  border-bottom-color: var(--bs-primary);
 }

frontend/src/components/landing-layout/navigation/header-bar/header-nav-link.tsx

@@ -3,6 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+import { concatCssClasses } from '../../../../utils/concat-css-classes'
 import type { PropsWithDataCypressId } from '../../../../utils/cypress-attribute'
 import { cypressId } from '../../../../utils/cypress-attribute'
 import styles from './header-nav-link.module.scss'
@@ -26,17 +27,19 @@ export interface HeaderNavLinkProps extends PropsWithDataCypressId {
 export const HeaderNavLink: React.FC<PropsWithChildren<HeaderNavLinkProps>> = ({ to, children, ...props }) => {
   const { route } = useRouter()
 
-  const activeClass = useMemo(() => {
-    return route === to ? styles['nav-link-active'] : ''
+  const className = useMemo(() => {
+    return concatCssClasses(
+      {
+        [styles.active]: route === to
+      },
+      'nav-link',
+      styles.link
+    )
   }, [route, to])
 
   return (
     <Nav.Item>
-      <Link
-        href={to}
-        passHref={true}
-        className={`nav-link text-light ${activeClass} ${styles['nav-link']}`}
-        {...cypressId(props)}>
+      <Link href={to} passHref={true} className={className} {...cypressId(props)}>
         {children}
       </Link>
     </Nav.Item>