feat/themes

src/app/_components/NavBar/Menu.module.scss

@@ -37,7 +37,7 @@
                 width: 30 * ohma.$gap;
                 text-decoration: none;
                 padding: 2 * ohma.$gap;
-                @include ohma.layer();
+                background: ohma.$colors-secondary;
                 border-radius: ohma.$rounding;
                 color: ohma.$colors-text;
                 display: flex;

src/app/_components/NavBar/NavBar.tsx

@@ -41,7 +41,7 @@ export default async function NavBar({ profile, canEditSpecialCmsImage }: PropTy
                         readSpecialCmsImageAction={readSpecialCmsImageFrontpage}
                         updateCmsImageAction={updateSpecialCmsImageFrontpage}
                     >
-                        <Link href="/" />
+                        <Link aria-label={'Gå til hjemmesiden'} href="/" />
                     </SpecialCmsImage>
                 </li>
                 {

src/app/_components/UI/ThemeEnabler.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import { applyTheme, themes } from '@/app/users/[username]/(user-admin)/theme/theme'
+import { useEffect } from 'react'
+import type { ThemeName } from '@/app/users/[username]/(user-admin)/theme/theme'
+
+export default function ThemeEnabler() {
+    useEffect(() => {
+        const saved = localStorage.getItem('theme') as ThemeName
+        if (saved && themes[saved]) {
+            applyTheme(saved)
+        }
+    }, [])
+    return null
+}

src/app/admin/BackButton.tsx

@@ -17,7 +17,7 @@ export default function BackButton({ className }: PropTypes) {
     const href = `/${pathname?.split('/').slice(1, -1).join('/')}`
 
     return (
-        <Link className={`${styles.BackButton} ${className}`} href={href}>
+        <Link className={`${styles.BackButton} ${className}`} aria-label={'Gå tilbake'} href={href}>
             <FontAwesomeIcon icon={faArrowLeft} className={styles.icon}/>
         </Link>
     )

src/app/admin/dots/DotList.tsx

@@ -51,11 +51,14 @@ export default function DotList({ onlyActive }: PropTypes) {
                 }>
                     <UserList />
                 </PopUp>
-                <Link className={styles.selectActive} href={
-                    '/admin/dots/' +
-                `?${QueryParams.onlyActive.encodeUrl(!onlyActive)}` +
-                `&${userSelection.user ? QueryParams.userId.encodeUrl(userSelection.user?.id) : ''}`
-                }>
+                <Link
+                    className={styles.selectActive}
+                    aria-label={onlyActive ? 'Vis alle prikker' : 'Vis kun aktive prikker'}
+                    href={
+                        '/admin/dots/' +
+                    `?${QueryParams.onlyActive.encodeUrl(!onlyActive)}` +
+                    `&${userSelection.user ? QueryParams.userId.encodeUrl(userSelection.user?.id) : ''}`
+                    }>
                     {onlyActive ? 'Vis alle prikker' : 'Vis aktive prikker'}
                 </Link>
             </span>

src/app/admin/groups/[id]/page.tsx

@@ -71,11 +71,23 @@ export default async function GroupAdmin({ params }: PropTypes) {
                     ) : (
                         (
                             group.groupType === 'CLASS' &&
-                            <Link href="/admin/classes" className={styles.link}>Gå til Kalsseadministrasjon</Link>
+                            <Link
+                                href="/admin/classes"
+                                aria-label={'Gå til klasseadministrasjon'}
+                                className={styles.link}
+                            >
+                                Gå til Klasseadministrasjon
+                            </Link>
                         )
                         || (
                             group.groupType === 'OMEGA_MEMBERSHIP_GROUP' &&
-                            <Link href="/admin/admission" className={styles.link}>Gå til opptakssiden</Link>
+                            <Link
+                                href="/admin/admission"
+                                aria-label={'Gå til opptakssiden'}
+                                className={styles.link}
+                            >
+                                Gå til opptakssiden
+                            </Link>
                         )
                     )
                 }

src/app/admin/lockers/page.tsx

@@ -5,8 +5,8 @@ export default function Locker() {
     return (
         <div className={styles.wrapper}>
             <h3>Skapreservasjoner</h3>
-            <Link href={'/admin/lockers/location'}>Oppret ny skaplokasjon</Link>
-            <Link href={'/admin/lockers/locker'}>Opprett nytt skap</Link>
+            <Link aria-label={'Opprett ny skaplokasjon'} href={'/admin/lockers/location'}>Opprett ny skaplokasjon</Link>
+            <Link aria-label={'Opprett nytt skap'} href={'/admin/lockers/locker'}>Opprett nytt skap</Link>
         </div>
     )
 }

src/app/admin/product/page.tsx

@@ -33,7 +33,12 @@ export default async function ProductPage() {
             <tbody>
                 {sortObjectsByName(products).map(product => <tr key={uuid()}>
                     <td>
-                        <Link style={{ display: 'contents' }} href={`./product/${product.id}`} passHref>
+                        <Link
+                            style={{ display: 'contents' }}
+                            aria-label={`Gå til produktsiden for ${product.name}`}
+                            href={`./product/${product.id}`}
+                            passHref
+                        >
                             {product.name}
                         </Link>
                     </td>

src/app/admin/schools/SchoolAdminList.tsx

@@ -18,7 +18,9 @@ export async function SchoolAdminList({ schools }: PropTypes) {
             </thead>
             <tbody>
                 {schools.map(school => (
-                    <Link key={school.shortName} href={`/admin/schools/${encodeURIComponent(school.shortName)}`}>
+                    <Link key={school.shortName}
+                        aria-label={`Gå til skolesiden for ${school.name}`}
+                        href={`/admin/schools/${encodeURIComponent(school.shortName)}`}>
                         <tr key={school.id}>
                             <td>{school.id}</td>
                             <td>{school.name}</td>

src/app/layout.tsx

@@ -19,6 +19,7 @@ import { unwrapActionReturn } from './redirectToErrorPage'
 import { frontpageAuth } from '@/services/frontpage/auth'
 import { ServerSession } from '@/auth/session/ServerSession'
 import type { Metadata } from 'next'
+import ThemeEnabler from '@/UI/ThemeEnabler'
 
 config.autoAddCss = false
 
@@ -51,6 +52,7 @@ export default async function RootLayout({ children }: PropTypes) {
     return (
         <html lang="en">
             <body className={`${inter.className} ${styles.body}`}>
+                <ThemeEnabler />
                 <SessionProvider session={session}>
                     <DefaultPermissionsProvider defaultPermissions={defaultPermissions}>
                         <EditModeProvider>
@@ -59,9 +61,9 @@ export default async function RootLayout({ children }: PropTypes) {
                                     <div className={styles.navBar}>
                                         <NavBar profile={profile} canEditSpecialCmsImage={canEditSpecialCmsImage} />
                                     </div>
-                                    <div className={styles.content}>
+                                    <main className={styles.content}>
                                         {children}
-                                    </div>
+                                    </main>
                                     <div className={styles.footer}>
                                         <Footer canEditSpecialCmsImage={canEditSpecialCmsImage} />
                                     </div>

src/app/news/page.tsx

@@ -13,7 +13,7 @@ export default async function NewsArtilces() {
         <PageWrapper title="Nyheter"
             headerItem={
                 <div className={styles.head}>
-                    <Link className={styles.archiveBtn} href="news/archive">Arkivet</Link>
+                    <Link className={styles.archiveBtn} aria-label={'Gå til arkivet'} href="news/archive">Arkivet</Link>
                     {
                         canCreateNews && (
                             <AddHeaderItemPopUp popUpKey="createNewsPop">

src/app/users/[username]/(user-admin)/layout.tsx

@@ -6,7 +6,15 @@ import PageWrapper from '@/components/PageWrapper/PageWrapper'
 import { SubPageNavBar, SubPageNavBarItem } from '@/components/NavBar/SubPageNavBar/SubPageNavBar'
 import { flairAuth } from '@/services/flairs/auth'
 import { notFound } from 'next/navigation'
-import { faCircleDot, faCog, faHatWizard, faKey, faPaperPlane, faUser } from '@fortawesome/free-solid-svg-icons'
+import {
+    faCircleDot,
+    faCog,
+    faHatWizard,
+    faKey,
+    faPaperPlane,
+    faSwatchbook,
+    faUser
+} from '@fortawesome/free-solid-svg-icons'
 import type { ReactNode } from 'react'
 import type { PropTypes } from '@/app/users/[username]/page'
 import type { Metadata } from 'next'
@@ -53,6 +61,9 @@ export default async function UserAdmin({ children, params }: PropTypes & { chil
                     {canAssignFlairs.authorized && <SubPageNavBarItem icon={faHatWizard} href={`/users/${username}/flairs`}>
                         Kapper
                     </SubPageNavBarItem>}
+                    <SubPageNavBarItem icon={faSwatchbook} href={`/users/${username}/theme`}>
+                        Tema
+                    </SubPageNavBarItem>
                     <SubPageNavBarItem icon={faCog} href={`/users/${username}/settings`}>
                         Innstillinger
                     </SubPageNavBarItem>

src/app/users/[username]/(user-admin)/theme/ThemeForm.tsx

@@ -1,71 +1,18 @@
 'use client'
 
 import styles from './page.module.scss'
-
-enum ThemeName {
-    Standard = 'Standard',
-    Light = 'Light',
-    Solarized = 'Solarized',
-    StjerneInnbygger = 'StjerneInnbygger',
-}
-
-type ThemeColors = {
-    primary: string;
-    secondary: string;
-    layer: string;
-    text: string;
-    textMuted: string;
-};
-
-const themes: Record<ThemeName, ThemeColors> = {
-    [ThemeName.Standard]: {
-        primary: 'hsl(210, 70%, 50%)',
-        secondary: 'hsl(210, 5%, 12%)',
-        layer: 'hsl(210, 0%, 0%, 20%)',
-        text: 'hsl(0, 0%, 80%)',
-        textMuted: 'hsl(0, 0%, 70%)',
-    },
-    [ThemeName.Light]: {
-        primary: 'hsl(210, 98%, 50%)',
-        secondary: 'hsl(210, 18%, 95%)',
-        layer: 'hsl(0, 0%, 0%, 5%)',
-        text: 'hsl(0, 0%, 10%)',
-        textMuted: 'hsl(0, 0%, 20%)',
-    },
-    [ThemeName.Solarized]: {
-        primary: 'hsl(210, 98%, 50%)',
-        secondary: 'hsl(44, 87%, 94%)',
-        layer: 'hsl(0, 0%, 50%, 15%)',
-        text: 'hsl(196, 13%, 45%)',
-        textMuted: 'hsl(180, 7%, 60%)',
-    },
-    [ThemeName.StjerneInnbygger]: {
-        primary: 'hsl(207, 91%, 65%)',
-        secondary: 'hsl(202, 64%, 10%)',
-        layer: 'hsla(211, 48.1%, 35.5%, 0.18)',
-        text: 'hsl(0, 0%, 80%)',
-        textMuted: 'hsl(0, 0%, 70%)',
-    },
-}
+import { themes, applyTheme, ThemeName } from './theme'
 
 export default function ThemeForm() {
-    function applyTheme(name: ThemeName): void {
-        const colors = themes[name]
-        const root = document.documentElement
-        Object.entries(colors).forEach(([key, value]) => {
-            root.style.setProperty(`--${key}`, value)
-        })
-    }
-
     return (
         <div className={styles.ThemeWrapper}>
-            {Object.entries(themes).map(([name, colors]) => (
-                <a key={name} className={styles.Theme} onClick={() => applyTheme(name as ThemeName)}>
+            {Object.values(ThemeName).map(themeName => (
+                <a key={themeName} className={styles.Theme} onClick={() => applyTheme(themeName)}>
                     <div className={styles.ThemeHeader}>
-                        {name}
+                        {themeName}
                     </div>
                     <div className={styles.ThemeBody}>
-                        {Object.entries(colors).map(([key, value]) => (
+                        {Object.entries(themes[themeName]).map(([key, value]) => (
                             <div
                                 key={key}
                                 className={styles.ColorSwatch}

src/app/users/[username]/(user-admin)/theme/theme.ts

@@ -0,0 +1,54 @@
+export enum ThemeName {
+    Standard = 'Standard',
+    Light = 'Light',
+    Solarized = 'Solarized',
+    StjerneInnbygger = 'StjerneInnbygger',
+}
+
+type ThemeColors = {
+    primary: string;
+    secondary: string;
+    layer: string;
+    text: string;
+    textMuted: string;
+};
+
+export const themes: Record<ThemeName, ThemeColors> = {
+    [ThemeName.Standard]: {
+        primary: 'hsl(210, 70%, 50%)',
+        secondary: 'hsl(210, 5%, 12%)',
+        layer: 'hsla(210, 0%, 0%, 0.2)',
+        text: 'hsl(0, 0%, 80%)',
+        textMuted: 'hsl(0, 0%, 70%)',
+    },
+    [ThemeName.Light]: {
+        primary: 'hsl(210, 98%, 50%)',
+        secondary: 'hsl(210, 18%, 95%)',
+        layer: 'hsla(0, 0%, 0%, 0.05)',
+        text: 'hsl(0, 0%, 10%)',
+        textMuted: 'hsl(0, 0%, 20%)',
+    },
+    [ThemeName.Solarized]: {
+        primary: 'hsl(210, 98%, 50%)',
+        secondary: 'hsl(44, 87%, 94%)',
+        layer: 'hsla(0, 0%, 50%, 0.15)',
+        text: 'hsl(196, 13%, 45%)',
+        textMuted: 'hsl(180, 7%, 60%)',
+    },
+    [ThemeName.StjerneInnbygger]: {
+        primary: 'hsl(207, 91%, 65%)',
+        secondary: 'hsl(202, 64%, 10%)',
+        layer: 'hsla(211, 48.1%, 35.5%, 0.18)',
+        text: 'hsl(0, 0%, 80%)',
+        textMuted: 'hsl(0, 0%, 70%)',
+    },
+}
+
+export function applyTheme(name: ThemeName): void {
+    localStorage.setItem('theme', name)
+    const colors = themes[name]
+    const root = document.documentElement
+    Object.entries(colors).forEach(([key, value]) => {
+        root.style.setProperty(`--${key}`, value)
+    })
+}