From 7124142f7a5e909a18a203b522350dcf3ea197c5 Mon Sep 17 00:00:00 2001
From: Johanne Blikberg Herheim <joher2128@uib.no>
Date: Mon, 2 Feb 2026 12:42:39 +0100
Subject: [PATCH] small fixes

---
 src/App.tsx                     |  3 ++-
 src/components/date-time.tsx    |  2 +-
 src/components/progress-bar.tsx |  4 +++-
 src/components/weather.tsx      | 10 +++++-----
 src/index.css                   |  6 ++++++
 src/pages/message-screen.tsx    |  8 ++++----
 6 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 2a196ed..2c90edf 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -28,12 +28,13 @@ export default function App() {
   }
 
   const isValentines = isValentinesSeason();
+  document.body.classList.toggle("valentines", isValentines);
 
   return (
     <QueryClientProvider client={queryClient}>
       <AutoReload />
       <main
-        className={`p-8 pb-0 space-y-5 h-screen flex flex-col ${
+        className={`px-6 pt-6 pb-0 space-y-5 h-screen flex flex-col ${
           isValentines ? "bg-linear-to-tl from-pink-400 via-pink-200 to-pink-300" : ""
         }`}
       >
diff --git a/src/components/date-time.tsx b/src/components/date-time.tsx
index 6b9207f..08a5436 100644
--- a/src/components/date-time.tsx
+++ b/src/components/date-time.tsx
@@ -30,7 +30,7 @@ export default function DateTime() {
       <h1 className="text-4xl font-semibold flex justify-between items-center">
         <p className="text-left flex-1">{formattedDate}</p>
         <div className="flex flex-col">
-          <p className="text-center flex-1 mr-8">Uke {weekNumber}</p>
+          <p className="text-center flex-1">Uke {weekNumber}</p>
           <Weather />
         </div>
         <p className="text-right flex-1">{formattedTime}</p>
diff --git a/src/components/progress-bar.tsx b/src/components/progress-bar.tsx
index a9c012a..da50f78 100644
--- a/src/components/progress-bar.tsx
+++ b/src/components/progress-bar.tsx
@@ -1,11 +1,13 @@
 import { motion } from "framer-motion";
 import { TRANSITION_TIME } from "../config";
+import { isValentinesSeason } from "../utils/date";
 
 type ProgressBarProps = {
   width: number;
 };
 
 export const ProgressBar = ({ width }: ProgressBarProps) => {
+  const isValentines = isValentinesSeason();
   return (
     <motion.div
       animate={{
@@ -19,7 +21,7 @@ export const ProgressBar = ({ width }: ProgressBarProps) => {
       initial={{
         width: 0
       }}
-      className="h-2 w-6 bg-primary absolute top-0 left-0"
+      className={`h-2 w-6 ${isValentines ? "bg-valentines-border" : "bg-primary"} absolute top-0 left-0`}
     />
   );
 };
diff --git a/src/components/weather.tsx b/src/components/weather.tsx
index 090b112..00b5854 100644
--- a/src/components/weather.tsx
+++ b/src/components/weather.tsx
@@ -20,20 +20,20 @@ export function Weather() {
   const { TempIcon, temp } = getTempIcon(weather.temperature);
 
   return (
-    <div className="flex items-center gap-4 text-sm text-gray-700">
+    <div className="flex items-center gap-x-4 text-sm text-gray-700">
       <div className="flex items-center gap-1">
-        <span>{temp}°C</span>
         {TempIcon && <TempIcon className="text-md opacity-80" />}
+        <span>{temp}°C</span>
       </div>
 
       <div className="flex items-center gap-1">
-        {norCond && <span>{norCond}</span>}
         {WeatherIcon && <WeatherIcon className="text-md opacity-80" />}
+        {norCond && <span>{norCond}</span>}
       </div>
 
       <div className="flex items-center gap-1">
-        <span>{weather.wind_speed} m/s</span>
         <TiWeatherWindy className="text-md opacity-80" />
+        <span>{weather.wind_speed} m/s</span>
       </div>
     </div>
   );
@@ -72,7 +72,7 @@ function getIconForCondition(condition: string) {
       break;
     case "sunny":
       WeatherIcon = TiWeatherSunny;
-      norCond = "Sols";
+      norCond = "Sol";
       break;
     default:
       WeatherIcon = null;
diff --git a/src/index.css b/src/index.css
index cde29a7..fef743a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -9,11 +9,16 @@
   --muted-foreground: 215 22% 43%;
 
   --border: 214 32% 73%;
+  --valentines-border: 338, 68%, 63%;
 
   --primary: 186 100% 32%;
   --secondary: 42 96% 72%;
 }
 
+.valentines {
+  --border: 338, 68%, 63%;
+}
+
 @theme inline {
   --color-background: hsl(var(--background));
   --color-foreground: hsl(var(--foreground));
@@ -22,6 +27,7 @@
   --color-muted-foreground: hsl(var(--muted-foreground));
 
   --color-border: hsl(var(--border));
+  --color-valentines-border: hsl(var(--valentines-border));
 
   --color-primary: hsl(var(--primary));
   --color-secondary: hsl(var(--secondary));
diff --git a/src/pages/message-screen.tsx b/src/pages/message-screen.tsx
index 2cd7f0d..2b4cd62 100644
--- a/src/pages/message-screen.tsx
+++ b/src/pages/message-screen.tsx
@@ -5,12 +5,12 @@ export const MessageScreen = () => {
   const { data: message } = useMessage();
 
   return (
-    <div className="flex flex-col items-center justify-center w-full py-20 px-8">
-      <div className="bg-background/80 border border-gray-300 shadow-lg rounded-2xl p-12 max-w-5xl w-full text-center max-h-[600px] overflow-hidden">
-        <h1 className="text-3xl font-semibold text-gray-700 mb-8">Hovedstyret taler!</h1>
+    <div className="flex flex-col items-center justify-center w-full">
+      <div className="bg-background/80 border-2 shadow-lg rounded-2xl p-8 max-w-5xl w-full text-center max-h-[600px] overflow-hidden">
+        <h1 className="text-3xl font-semibold text-gray-700 mb-6">Hovedstyret taler!</h1>
 
         {message?.title && (
-          <h2 className="text-5xl font-bold text-gray-900 mb-8">{message.title}</h2>
+          <h2 className="text-5xl font-bold text-gray-900 mb-6">{message.title}</h2>
         )}
 
         <p className="text-2xl leading-relaxed text-gray-800 whitespace-pre-line">