Repository: webkom/lego-webapp
Pull request #5428: Add BannerPreview to editor and redesign banners
Author: login: itsisak
Labels: name: review-needed
description: Pull requests that need review
name: small-fix
description: Pull requests that fix something small
Created: 2025-03-10T09:53:53Z | Merged: 2025-03-10T12:12:20Z

# Description

Add a preview of the banner to the `BannerEditor`.
Dome banner design suggestions, the ones there before look bad.
Also fix bug where css is not applied correctly (after Vite/Vike)


# Result

If you've made visual changes, please check the boxes below and include images showing the changes. Descriptions are appreciated.

- [x] Changes look good on both light and dark theme.
- [x] Changes look good with different viewports (mobile, tablet, etc.).
- [x] Changes look good with slower Internet connections.

<table>
    <tr>
        <td width="25%">Description</td>
        <td>Before</td>
        <td>After</td>
    </tr>
    <tr>
        <td>
            `BannerPreview`
        </td>
        <td>

![Screenshot 2025-03-10 at 10 47 28](https://github.com/user-attachments/assets/d79aa4dd-9bbd-4ecd-a389-262d416f99f2)
        </td>
        <td>

![Screenshot 2025-03-10 at 10 46 49](https://github.com/user-attachments/assets/26b4d70d-b4a1-456e-b79c-40af106ab9ab)
        </td>
    </tr>
	<tr>
		<td>
			Banner redesigns
		</td>
		<td>

![Screenshot 2025-03-10 at 10 51 42](https://github.com/user-attachments/assets/f06d9a8b-600a-44a2-88cc-9a63bde95f17)

![Screenshot 2025-03-10 at 10 51 05](https://github.com/user-attachments/assets/354f0a2d-1e78-4a6c-9151-19d8e8015e23)
		</td>
		<td>

![Screenshot 2025-03-10 at 10 49 24](https://github.com/user-attachments/assets/98dbdfb7-4abb-44a7-8812-421135e3e1e9)

![Screenshot 2025-03-10 at 10 50 14](https://github.com/user-attachments/assets/967b0932-a1ed-428a-bd68-effe8b955e97)
		</td>
	</tr>
</table>

# Testing

- [X] I have thoroughly tested my changes.




Diff:
diff --git a/lego-webapp/components/Banner/Banner.module.css b/lego-webapp/components/Banner/Banner.module.css
index 188ee3ebba..5851fa1d8a 100644
--- a/lego-webapp/components/Banner/Banner.module.css
+++ b/lego-webapp/components/Banner/Banner.module.css
@@ -10,6 +10,7 @@
   animation-duration: 4s;
   animation-iteration-count: infinite;
   animation-delay: 5s;
+  transition: var(--easing-fast);
 }
 
 .subHeader {
@@ -20,31 +21,43 @@
   margin: 0;
 }
 
-.red {
-  background-color: var(--color-red-5);
-  color: var(--color-absolute-white);
+div.red {
+  color: var(--color-red-7);
+  background-color: transparent;
+  border: 3px solid var(--color-red-7);
+
+  &:hover {
+    background-color: var(--color-red-7);
+    color: var(--color-white);
+  }
 }
 
-.gray {
+div.gray {
   background-color: var(--color-gray-4);
   color: var(--color-white);
 }
 
-.white {
+div.white {
   color: var(--color-black);
 }
 
-.lightBlue {
+div.lightBlue {
   background-color: var(--color-blue-5);
   color: var(--color-white);
 }
 
-.itdageneBlue {
-  background-color: #0778bc;
-  color: var(--color-white);
+div.itdageneBlue {
+  background-color: transparent;
+  color: #0778bc;
+  border: 3px solid #0778bc;
+
+  &:hover {
+    background-color: #0778bc;
+    color: var(--color-white);
+  }
 }
 
-.buddyweek2024 {
+div.buddyweek2024 {
   border: 5px dashed var(--lego-red-color);
 }
 
diff --git a/lego-webapp/pages/admin/banners/BannerEditor.tsx b/lego-webapp/pages/admin/banners/BannerEditor.tsx
index 808acf49d4..61a877a377 100644
--- a/lego-webapp/pages/admin/banners/BannerEditor.tsx
+++ b/lego-webapp/pages/admin/banners/BannerEditor.tsx
@@ -6,10 +6,11 @@ import {
   Page,
 } from '@webkom/lego-bricks';
 import { usePreparedEffect } from '@webkom/react-prepare';
-import { Field } from 'react-final-form';
+import cx from 'classnames';
+import { Field, useFormState } from 'react-final-form';
 import { Helmet } from 'react-helmet-async';
 import { navigate } from 'vike/client/router';
-import { Color, COLORS } from '~/components/Banner';
+import Banner, { Color, COLORS } from '~/components/Banner';
 import { TextInput, Form, LegoFinalForm, SelectInput } from '~/components/Form';
 import { SubmitButton } from '~/components/Form/SubmitButton';
 import HTTPError from '~/components/errors/HTTPError';
@@ -25,10 +26,21 @@ import { selectBannerById } from '~/redux/slices/banner';
 import { guardLogin } from '~/utils/replaceUnlessLoggedIn';
 import { useParams } from '~/utils/useParams';
 import { createValidator, required } from '~/utils/validation';
+import styles from './BannerOverview.module.css';
+
+const colorToRepresentation: Record<Color, string> = {
+  red: 'Rød',
+  white: 'Hvit',
+  gray: 'Grå',
+  lightBlue: 'Lyseblå',
+  itdageneBlue: 'IT-dagene Blå',
+  buddyweek2024: 'Fadderuke',
+};
 
 type BannerEditorParams = {
   bannerId?: string;
 };
+
 const BannerEditor = () => {
   const { bannerId } = useParams<BannerEditorParams>();
 
@@ -61,15 +73,6 @@ const BannerEditor = () => {
   const onDelete = () =>
     dispatch(deleteBanner(bannerId!)).then(() => navigate('/admin/banners'));
 
-  const colorToRepresentation: Record<Color, string> = {
-    red: 'Rød',
-    white: 'Hvit',
-    gray: 'Grå',
-    lightBlue: 'Lyseblå',
-    itdageneBlue: 'IT-dagene Blå',
-    buddyweek2024: 'Fadderuke',
-  };
-
   const colorOptions = (Object.keys(COLORS) as Color[]).sort().map((color) => ({
     value: color,
     label: colorToRepresentation[color],
@@ -97,6 +100,7 @@ const BannerEditor = () => {
       >
         {({ handleSubmit }) => (
           <Form onSubmit={handleSubmit}>
+            <BannerPreview />
             <Field
               placeholder="Revyen har opptak!"
               name="header"
@@ -153,4 +157,25 @@ const BannerEditor = () => {
   );
 };
 
+const BannerPreview = () => {
+  const { values } = useFormState();
+
+  return (
+    <div
+      className={cx(
+        styles.cardSection,
+        styles.bannerContainer,
+        styles.bannerPreview,
+      )}
+    >
+      <Banner
+        header={values.header ?? 'Tittel'}
+        subHeader={values.subheader}
+        link={values.link ?? 'https://abakus.no'}
+        color={values.color.value}
+      />
+    </div>
+  );
+};
+
 export default guardLogin(BannerEditor);
diff --git a/lego-webapp/pages/admin/banners/BannerOverview.module.css b/lego-webapp/pages/admin/banners/BannerOverview.module.css
index f22c47db95..78790cc7db 100644
--- a/lego-webapp/pages/admin/banners/BannerOverview.module.css
+++ b/lego-webapp/pages/admin/banners/BannerOverview.module.css
@@ -21,3 +21,7 @@
 .editButton {
   flex-shrink: 0;
 }
+
+.bannerPreview {
+  border-radius: var(--border-radius-lg);
+}
diff --git a/lego-webapp/pages/sudo/+Page.tsx b/lego-webapp/pages/sudo/+Page.tsx
index 6e06912166..fce10bc06c 100644
--- a/lego-webapp/pages/sudo/+Page.tsx
+++ b/lego-webapp/pages/sudo/+Page.tsx
@@ -36,28 +36,23 @@ const links: PanelItem[] = [
   },
 ];
 
-const ControlPanelItem = ({ link, tag, description, iconNode }: PanelItem) => (
-  <a href={link}>
-    <Card>
-      <Icon iconNode={iconNode} size={20} />
-      <h3>{tag}</h3>
-      <p>{description}</p>
+const ControlPanelItem = ({ link }: { link: PanelItem }) => (
+  <a href={link.link} className={styles.controlPanelItem}>
+    <Card isHoverable>
+      <Icon iconNode={link.iconNode} size={20} />
+      <h3>{link.tag}</h3>
+      <p>{link.description}</p>
     </Card>
   </a>
 );
+
 const AdminControlPanel = () => {
   return (
     <div className={styles.controlPanel}>
       <h2>Kontrollpanel</h2>
-      <Flex>
-        {links.map((l) => (
-          <ControlPanelItem
-            key={l.tag}
-            link={l.link}
-            tag={l.tag}
-            description={l.description}
-            iconNode={l.iconNode}
-          />
+      <Flex gap="var(--spacing-md)">
+        {links.map((link) => (
+          <ControlPanelItem key={link.tag} link={link} />
         ))}
       </Flex>
     </div>
diff --git a/lego-webapp/pages/sudo/SudoAdmin.module.css b/lego-webapp/pages/sudo/SudoAdmin.module.css
index 9fcdccb51a..947f0681d5 100644
--- a/lego-webapp/pages/sudo/SudoAdmin.module.css
+++ b/lego-webapp/pages/sudo/SudoAdmin.module.css
@@ -1,3 +1,11 @@
 .list {
   list-style-type: disc;
 }
+
+.controlPanelItem {
+  color: var(--lego-font-color);
+}
+
+.controlPanelItem h3 {
+  color: var(--lego-link-color);
+}


Reviews:
user: login: jonasdeluna
body: Looks much better 🔥🔥
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-10T09:56:39Z
user: login: ivarnakken
body: Looks very good!!
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-10T10:04:25Z
user: login: itsisak
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-10T10:15:56Z
user: login: ch0rizo
body: So sexy🌶️
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-10T10:21:12Z
user: login: itsisak
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-10T10:21:14Z
user: login: eikhr
body: Very nice!!
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-10T10:26:20Z
user: login: ivarnakken
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-10T10:27:13Z
user: login: ivarnakken
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-10T10:27:35Z
user: login: itsisak
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-10T10:32:43Z

Review comments:
diff_hunk: @@ -1,5 +1,3 @@
-@import url('../../styles/variables.css');
path: lego-webapp/components/Banner/Banner.module.css
user: login: ivarnakken
body: Sure this isn't needed?
created_at: 2025-03-10T10:03:14Z
author_association: MEMBER
diff_hunk: @@ -22,31 +21,43 @@
   margin: 0;
 }
 
-.red {
-  background-color: var(--color-red-5);
-  color: var(--color-absolute-white);
+div.red {
+  color: var(--color-red-7);
+  background-color: var(--color-background-color);
path: lego-webapp/components/Banner/Banner.module.css
user: login: ivarnakken
body: Does this exist?
created_at: 2025-03-10T10:03:41Z
author_association: MEMBER
diff_hunk: @@ -1,5 +1,3 @@
-@import url('../../styles/variables.css');
path: lego-webapp/components/Banner/Banner.module.css
user: login: itsisak
body: See #5427
created_at: 2025-03-10T10:15:56Z
author_association: CONTRIBUTOR
diff_hunk: @@ -22,31 +21,43 @@
   margin: 0;
 }
 
-.red {
-  background-color: var(--color-red-5);
-  color: var(--color-absolute-white);
+div.red {
+  color: var(--color-red-7);
+  background-color: var(--color-background-color);
path: lego-webapp/components/Banner/Banner.module.css
user: login: itsisak
body: No it doesn't, but i think it became transparent and looked correct. 
created_at: 2025-03-10T10:21:13Z
author_association: CONTRIBUTOR
diff_hunk: @@ -22,31 +21,43 @@
   margin: 0;
 }
 
-.red {
-  background-color: var(--color-red-5);
-  color: var(--color-absolute-white);
+div.red {
+  color: var(--color-red-7);
+  background-color: var(--color-background-color);
path: lego-webapp/components/Banner/Banner.module.css
user: login: ivarnakken
body: It becomes transparent because it doesn't exist, right? Why not just set it to be transparent then?
created_at: 2025-03-10T10:27:13Z
author_association: MEMBER
diff_hunk: @@ -22,31 +21,43 @@
   margin: 0;
 }
 
-.red {
-  background-color: var(--color-red-5);
-  color: var(--color-absolute-white);
+div.red {
+  color: var(--color-red-7);
+  background-color: var(--color-background-color);
path: lego-webapp/components/Banner/Banner.module.css
user: login: ivarnakken
body: I see this is used multiple places
created_at: 2025-03-10T10:27:35Z
author_association: MEMBER
diff_hunk: @@ -22,31 +21,43 @@
   margin: 0;
 }
 
-.red {
-  background-color: var(--color-red-5);
-  color: var(--color-absolute-white);
+div.red {
+  color: var(--color-red-7);
+  background-color: var(--color-background-color);
path: lego-webapp/components/Banner/Banner.module.css
user: login: itsisak
body: I agree, transparent works fine too
created_at: 2025-03-10T10:32:43Z
author_association: CONTRIBUTOR

PR comments:
user: login: vercel[bot]
created_at: 2025-03-10T09:53:57Z
body: [vc]: #4a3KCdYdrbndc4KlsjYTiGM5RoSBnJbDT6pokZJoGug=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJsZWdvLWJyaWNrcy1zdG9yeWJvb2siLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoiIn0sImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9hYmFrdXMtbnRudS9sZWdvLWJyaWNrcy1zdG9yeWJvb2svREV1czU2bkFkTlVrNkE2dHFtQnZoVVFFaG5jSCIsIm5leHRDb21taXRTdGF0dXMiOiJJR05PUkVEIiwicm9vdERpcmVjdG9yeSI6InBhY2thZ2VzL2xlZ28tYnJpY2tzIiwicHJldmlld1VybCI6ImxlZ28tYnJpY2tzLXN0b3J5Ym9vay1naXQtaW1wcm92ZS1iYW5uZXJzLWFiYWt1cy1udG51LnZlcmNlbC5hcHAifV19
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)


<details><summary>1 Skipped Deployment</summary>

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **lego-bricks-storybook** | ⬜️ Ignored ([Inspect](https://vercel.com/abakus-ntnu/lego-bricks-storybook/DEus56nAdNUk6A6tqmBvhUQEhncH)) | [Visit Preview](https://lego-bricks-storybook-git-improve-banners-abakus-ntnu.vercel.app) |  | Mar 10, 2025 10:32am |
</details>


author_association: NONE
user: login: norbye
created_at: 2025-03-10T14:17:05Z
body: If you're still open to constructive criticism it's a tad hard to read the description when you're hovering now;

<img width="1095" alt="image" src="https://github.com/user-attachments/assets/cf6e50e6-8080-45a7-b0e7-dd3d2665035d" />

a little more contrast on hover could be nice
author_association: MEMBER
user: login: itsisak
created_at: 2025-03-10T15:21:20Z
body: > If you're still open to constructive criticism it's a tad hard to read the description when you're hovering now;
> [img]
> a little more contrast on hover could be nice

I agree, we should probably redo most of the banners to be fair
author_association: CONTRIBUTOR