refactor/style changes by kake21 · Pull Request #514 · vevcom/projectNext

kake21 · 2026-03-10T17:33:45Z

Minor visual overhaul

This PR aims to refactor the visual styling of projectNext.

General changes

Added dark mode to everything and more consistent theming overall.

Additions

ohma.layer(): A mixin that creates a transparent blurred background that replaces having multiple colors for backgrounds.
ohma.neumorphism(): A mixing for creating neumorphism shadows, currently in use on the login form.

Linked issues

Closes #440
Related to #333
Related to #401

Follow ups

Implement theme switching
Improve admin menu
Acquire .svg files of logos

change scss variables to new system add shadow to cards based upon material design

…ables

# Conflicts: # src/app/(auth)/login/page.tsx # src/app/_components/NavBar/Menu.tsx # src/app/users/[username]/page.module.scss # src/app/users/[username]/page.tsx

Copilot

Pull request overview

This PR introduces a new theme/color system driven by CSS custom properties and updates a wide set of UI styles/components to use the new palette (layer/neumorphism, text colors, box shadows). It also adds a user-admin theme selection page and refactors some navigation/profile UI elements to match the new design direction.

Changes:

Switches core color tokens to CSS variables and updates many SCSS modules to use layer, boxShadow, and new text colors.
Adds a user-admin “theme” page with a client-side theme picker and a new ProfileButton UI component.
Refactors NavBar menu behavior/styling and redesigns event cards/layout styling.

Reviewed changes

Copilot reviewed 77 out of 77 changed files in this pull request and generated 17 comments.

Show a summary per file

File	Description
src/styles/globals.scss	Defines global CSS custom properties (primary/secondary/text/layer) and updates page background colors.
src/styles/_variables.scss	Introduces `--rounding` as a CSS custom property and changes spacing scale (`$gap`).
src/styles/_mixins.scss	Adds/changes mixins (`boxShadow`, `layer`, `neumorphism`, layouts) and updates table/button styling helpers.
src/styles/_colors.scss	Repoints theme color tokens to CSS variables (`var(--primary)`, etc.).
src/app/users/[username]/page.tsx	Swaps profile action buttons to `ProfileButton` + icons and tweaks membership link markup.
src/app/users/[username]/page.module.scss	Updates profile page styling for new layering/shadows and adds committee membership link styles.
src/app/users/[username]/(user-admin)/theme/ThemeForm.tsx	New client-side theme picker applying CSS variables at runtime.
src/app/users/[username]/(user-admin)/theme/page.tsx	New user-admin theme page wrapper (server component).
src/app/users/[username]/(user-admin)/theme/page.module.scss	Styling for theme picker grid/cards and swatches.
src/app/omegaquotes/OmegaquotesQuote.module.scss	Adds a background color to quote text block.
src/app/not-found.module.scss	Updates colors and comments out image invert filter.
src/app/news/[nameAndId]/page.module.scss	Makes `.moreNews` vertically scrollable.
src/app/layout.tsx	Adds a class to the `<html>` element to support CSS-variable rounding.
src/app/layout.module.scss	Sets global text/nav background colors and adjusts content min-height.
src/app/events/EventsLandingLayout.module.scss	Switches to the new event card list layout mixin and updates text colors.
src/app/events/CreateOrUpdateEventForm.module.scss	Adds padding based on the new gap variable.
src/app/events/[nameAndId]/page.module.scss	Uses `layer` styling for overlays/aside and updates text color.
src/app/error.module.scss	Updates colors and comments out image invert filter.
src/app/committees/page.module.scss	Updates text color and grid alignment.
src/app/career/page.module.scss	Restyles links section with neumorphism + responsive layout updates.
src/app/career/jobads/[nameAndId]/page.module.scss	Replaces background with `layer` styling.
src/app/cabin/book/CabinCalendar.module.scss	Replaces `color.adjust` with `color-mix` for range background.
src/app/articles/[category]/SideBar.module.scss	Reworks sidebar layering/padding/z-index for new theme.
src/app/applications/[periodName]/page.module.scss	Replaces `darken(...)` with `color-mix(...)` for hover styling.
src/app/admin/SlideSidebar.module.scss	Restyles admin sidebar with layering, mobile fixed behavior, and scroll handling.
src/app/admin/page.module.scss	Updates icon color to match new text token.
src/app/admin/layout.tsx	Wraps `SlideSidebar` in a dedicated container for layout styling.
src/app/admin/layout.module.scss	Adds sticky sidebar behavior and mobile layout constraints.
src/app/admin/groups/page.module.scss	Uses `layer` styling for group rows and updates text color.
src/app/admin/dots/page.module.scss	Uses `layer` styling for “create new” container.
src/app/admin/dots/DotList.module.scss	Uses `layer` styling and tweaks selection layout.
src/app/admin/dots/CreateDotForm.module.scss	Updates SVG icon color to match new text token.
src/app/admin/api-keys/page.module.scss	Replaces `lighten(...)` with `color-mix(...)` for status badges.
src/app/(frontpage)/Section.module.scss	Adjusts section colors to the new theme tokens.
src/app/(frontpage)/LoggedInSection.module.scss	Updates link colors and hover states.
src/app/(frontpage)/InfoBubbles.module.scss	Applies layer styling and adjusts icon/text colors.
src/app/(auth)/login/page.tsx	Refactors login markup (form structure, divider, copy, links).
src/app/(auth)/login/page.module.scss	Adds styling for new login layout elements.
src/app/(auth)/layout.module.scss	Refactors auth layout to flex-based neumorphism card layout.
src/app/_components/YouTube/YouTube.tsx	Adds `title` to iframe for accessibility.
src/app/_components/User/UserList/UserList.module.scss	Applies layer + boxShadow styling and padding tweaks.
src/app/_components/User/UserCard.module.scss	Applies layer + new hover shadow behavior and spacing updates.
src/app/_components/UI/TextInput.module.scss	Updates “black” variant colors to new text token.
src/app/_components/UI/Textarea.module.scss	Applies layer styling, padding, and text color.
src/app/_components/UI/Slider.tsx	Changes default slider color from secondary to primary.
src/app/_components/UI/ProfileButton.tsx	Adds a new Link-based “profile button” component.
src/app/_components/UI/ProfileButton.module.scss	Styles the new `ProfileButton` with layer/shadow and hover states.
src/app/_components/UI/Dropzone.module.scss	Replaces `lighten(...)` with `color-mix(...)` for backgrounds.
src/app/_components/School/School.module.scss	Updates shadow behavior to new `boxShadow(state)` mixin.
src/app/_components/PopUp/PopUp.module.scss	Applies layer + new shadows/padding and mobile border radius tweaks.
src/app/_components/Permission/Permission.module.scss	Applies layer styling.
src/app/_components/NavBar/UserNavigation.tsx	Fixes spelling (“Innstillinger”).
src/app/_components/NavBar/UserNavigation.module.scss	Applies new shadow/layer behaviors and hover transitions.
src/app/_components/NavBar/ReportButton.module.scss	Adjusts margins and hover transition placement.
src/app/_components/NavBar/NavBar.tsx	Updates `Menu` usage to new prop (`openBtnContext`).
src/app/_components/NavBar/NavBar.module.scss	Updates NavBar colors/background and layout sizing.
src/app/_components/NavBar/MobileNavBar.tsx	Updates `Menu` usage to new prop (`openBtnContext`).
src/app/_components/NavBar/MobileNavBar.module.scss	Removes left border styling between items.
src/app/_components/NavBar/Menu.tsx	Refactors menu open button to context-based rendering (desktop/mobile).
src/app/_components/NavBar/Menu.module.scss	Reworks menu layout/animation and card-like item styling.
src/app/_components/NavBar/Item.module.scss	Updates link color to new text token.
src/app/_components/MazeMap/MazeMap.tsx	Adds `title` to iframe for accessibility.
src/app/_components/ImageCard/ImageCard.module.scss	Adjusts sizing/padding, layering, and uses `card()` styling.
src/app/_components/Footer/Footer.tsx	Comments out PWA special image/link section.
src/app/_components/Footer/Footer.module.scss	Updates footer styling and icon link mixin name.
src/app/_components/Event/SmallEventTag.module.scss	Adjusts hover label positioning.
src/app/_components/Event/EventCard.tsx	Redesigns EventCard markup/layout and introduces attendance bar/footer.
src/app/_components/Event/EventCard.module.scss	Adds full styling for the redesigned EventCard layout.
src/app/_components/EditModeSwitch/EditModeSwitch.module.scss	Updates icon color to new text token.
src/app/_components/EditableTextField/EditableTextField.module.scss	Updates icon/border colors to primary.
src/app/_components/CommitteeImage/CommitteeImage.module.scss	Replaces `color.adjust` with `color-mix`.
src/app/_components/CommitteeCard/CommitteeCard.module.scss	Updates card styling (shape, layering, hover behavior, text colors).
src/app/_components/Cms/CmsParagraph/CmsParagraph.module.scss	Updates CMS text/link colors to new tokens.
src/app/_components/Cms/CmsImage/CmsImageEditor.module.scss	Updates backgrounds to new theme colors/mixes.
src/app/_components/Cms/Article/Article.module.scss	Adjusts article gradient overlay color.
src/app/_components/BackdropImage/BackdropImage.tsx	Removes inline width style on the image container.
src/app/_components/BackdropImage/BackdropImage.module.scss	Adjusts backdrop image sizing/overflow and internal element sizing.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-10T17:42:46Z

src/styles/_mixins.scss

    th, td {
-        border: 1px solid colors.$gray-300;
-        padding: 8px;
+        padding: variables.$gap
    }


@mixin table: missing semicolon after padding: variables.$gap will cause SCSS compilation to fail. Add the semicolon (and ensure the declaration block still parses correctly).

This should be a lint rule...

Copilot · 2026-03-10T17:42:46Z

src/app/_components/EditableTextField/EditableTextField.module.scss

        right: calc($padding / 2);
        top: calc($padding / 2);
-        color: ohma.$colors-yellow;
+        color: ohma.$colors-primary
    }
    .text {
        position: relative;
        padding: $padding;
-        border: $border solid ohma.$colors-yellow;; // Add this line
+        border: $border solid ohma.$colors-primary;; // Add this line
        border-radius: ohma.$rounding;


Missing semicolon after color: ohma.$colors-primary will break SCSS parsing for this rule. Add the trailing semicolon (and consider removing the double ;; on the border line while touching this block).

Copilot · 2026-03-10T17:42:46Z

src/app/_components/NavBar/Menu.tsx

                        <div ref={menuRef} className={styles.Menu}>
-                            <FontAwesomeIcon className={styles.close} icon={faTimes} onClick={() => closeMenu(menuRef)}/>
-                            <ul>
+                            <FontAwesomeIcon className={styles.close} icon={faTimes} onClick={() => closeMenu}/>


The close button handler is never invoked: onClick={() => closeMenu} returns the function instead of calling it, so the menu can't be closed via the X button. Call closeMenu(menuRef) (or otherwise invoke the close logic) in the click handler.

Suggested change

<FontAwesomeIcon className={styles.close} icon={faTimes} onClick={() => closeMenu}/>

<FontAwesomeIcon className={styles.close} icon={faTimes} onClick={() => closeMenu(menuRef)}/>

Copilot · 2026-03-10T17:42:47Z

src/app/_components/NavBar/Menu.tsx

                ) : null
            }
            <button className={styles.openBtn} onClick={() => setIsOpen(true)}>
-                {openBtnContent}
+                {openBtnContext === 'mobile' && !isOpen &&


openBtn always calls setIsOpen(true), so when the menu is open the button (showing “Mindre”/X) still cannot close it. Make this a toggle (or call the same close routine) so the UI state matches the control’s behavior.

Copilot · 2026-03-10T17:42:47Z

src/app/_components/Event/EventCard.tsx

 import SmallEventTag from './SmallEventTag'
 import styles from './EventCard.module.scss'
-import ImageCard from '@/components/ImageCard/ImageCard'
-import { formatVevenUri } from '@/lib/urlEncoding'
+import CmsImage from '@/components/Cms/CmsImage/CmsImage'
+import {updateEventCmsCoverImageAction} from "@/services/events/actions";
 import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCalendar, faLocationDot, faUsers } from '@fortawesome/free-solid-svg-icons'
 import type { EventExpanded } from '@/services/events/types'
+import {configureAction} from "@/services/configureAction";



This file now has several unused imports (CmsImage, updateEventCmsCoverImageAction, configureAction, and React) because the related code is commented out. With @typescript-eslint/no-unused-vars enabled, this will fail lint/CI—either remove the imports or re-enable the implementation.

Copilot · 2026-03-10T17:42:49Z

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

+        {
+            name: 'Dragonlore',
+            colors: {
+                primary: 'linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C)',
+                secondary: 'hsl(210, 5%, 12%)',
+                layer: 'linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C)',
+                text: 'hsl(0,0%,10%)',
+                textMuted: 'hsl(0,0%,20%)',
+            },
+        },


Some themes set CSS vars like primary/layer to linear-gradient(...) values. Those vars are also used in places that expect a plain color (e.g. color, border-color, box-shadow), so applying such a theme can yield invalid CSS and unreadable UI. Consider restricting theme values to actual colors or splitting gradient vars from color vars.

Copilot · 2026-03-10T17:42:49Z

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

+                        {Object.entries(theme.colors).map(([key, value]) => (
+                            <div
+                                key={key}
+                                className={styles.ColorSwatch}
+                                style={{ backgroundColor: value }}
+                                title={`${key}: ${value}`}
+                            />


The swatches use style={{ backgroundColor: value }}, but for non-color values (e.g. gradients) backgroundColor will be ignored. Use background (or filter out unsupported values) so the preview matches the applied theme.

Copilot · 2026-03-10T17:42:49Z

src/app/_components/UI/ProfileButton.tsx

+import type { ButtonHTMLAttributes } from 'react'
+
+
+export type PropTypes = ButtonHTMLAttributes<HTMLButtonElement> & {
+    children: React.ReactNode,
+    href: string,
+}
+
+export default function ProfileButton({ children, href }: PropTypes) {
+    return <Link className={styles.button} href={href}>{ children }</Link>
+}


ProfileButton is typed as ButtonHTMLAttributes<HTMLButtonElement> but renders a next/link and doesn’t forward any of those props (e.g. onClick, disabled, type). This is misleading and will cause callers’ props to be silently ignored. Prefer LinkProps/AnchorHTMLAttributes<HTMLAnchorElement> and forward remaining props to the rendered element.

Copilot · 2026-03-10T17:42:50Z

src/styles/_variables.scss

+.html {
+    --rounding: 12px;
+}
+
+$gap: 8px;


_variables.scss now emits a real CSS rule (.html { --rounding: 12px; }). Since this file is @forwarded through styles/ohma.scss and @used by many SCSS modules, that global rule is likely duplicated across many compiled CSS module outputs. Move this global custom property to globals.scss (or another single global stylesheet) and keep _variables.scss for Sass variables only.

Copilot · 2026-03-10T17:42:50Z

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

+import styles from './page.module.scss'
+import { readUserProfileAction } from '@/services/users/actions'
+import { notFound } from 'next/navigation'
+import type { PropTypes } from '@/app/users/[username]/page'
+import ThemeForm from "@/app/users/[username]/(user-admin)/theme/ThemeForm";
+


styles is imported but never used in this file. With @typescript-eslint/no-unused-vars enabled, this will fail lint/CI—remove the import or use the styles.

Vegard Bauge and others added 11 commits October 2, 2025 16:50

Style changes to navbar

44b062d

Added opened/closed text to menu

a13612d

Style changes

408e6f7

refactor: style changes

e0c11c1

change scss variables to new system add shadow to cards based upon material design

Merge branch 'main' into refactor/style-changes

1185556

refactor: large style changes

182b5c3

refactor: changed styling of event cards and made colors use css vari…

9ec14f8

…ables

refactor: added better accessibility styling

009a8e3

refactor: styles login page

12ad556

Merge remote-tracking branch 'origin/main'

c32a259

# Conflicts: # src/app/(auth)/login/page.tsx # src/app/_components/NavBar/Menu.tsx # src/app/users/[username]/page.module.scss # src/app/users/[username]/page.tsx

refactor: updated neumorphism mixin with variables

d0c0145

kake21 requested a review from Copilot March 10, 2026 17:33

kake21 self-assigned this Mar 10, 2026

Copilot started reviewing on behalf of kake21 March 10, 2026 17:34 View session

Copilot AI reviewed Mar 10, 2026

View reviewed changes

Vegard Bauge added 6 commits March 10, 2026 19:24

refactor: changed styling of CMS image editor

c0c02a4

style: fix linting issues

c3520fa

style: fix more linting issues

5da4ddc

feat: add canEdit prop to cmsimage in eventcard

0b09403

refactor: fixed firstSection in loggedIn

10a6655

style: update styles for various components and fix linting issues

de984f3

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor/style changes#514

refactor/style changes#514
kake21 wants to merge 17 commits intomainfrom
refactor/style-changes

kake21 commented Mar 10, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

JohanHjelsethStorstad Mar 16, 2026

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	<FontAwesomeIcon className={styles.close} icon={faTimes} onClick={() => closeMenu}/>
	<FontAwesomeIcon className={styles.close} icon={faTimes} onClick={() => closeMenu(menuRef)}/>

Conversation

kake21 commented Mar 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Minor visual overhaul

General changes

Additions

Linked issues

Follow ups

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

JohanHjelsethStorstad Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

kake21 commented Mar 10, 2026 •

edited

Loading