Added screen to remind students to clean after themselves

src/App.tsx

@@ -6,6 +6,7 @@ import { TransportScreen } from "./pages/transport-screen";
 import DateTime from "./components/date-time";
 import WelcomeScreen from "./pages/welcome-screen";
 import { isAugust } from "./utils/date";
+import { ReminderScreen } from "./pages/reminder-screen";
 
 export default function App() {
   const [queryClient] = useState(() => new QueryClient());
@@ -20,7 +21,7 @@ export default function App() {
     return () => clearInterval(interval);
   }, []);
 
-  const visibleScreens = [CalendarScreen, TransportScreen];
+  const visibleScreens = [CalendarScreen, TransportScreen, ReminderScreen];
   if (isAugust()) {
     visibleScreens.push(WelcomeScreen);
   }

src/components/bedpress-count-down.tsx

@@ -22,7 +22,7 @@ export default function BedpressCountDown() {
   const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
 
   if (!nextBedpres) {
-    return null
+    return null;
   }
 
   return (

src/components/birthday-countdown.tsx

@@ -29,15 +29,15 @@ export default function BdayCountDown() {
 
   if (isBirthdayToday) {
     return (
-        <div className="text-center flex w-100 flex-col justify-center items-center rounded-lg mb-1 pb-20 px-10 py-10 bg-background/70 border-2 shadow-lg">
-            <h1 className="font-semibold text-5xl pb-7">echo</h1>
-            <p className="text-2xl">Gratulerer med dagen!</p>
-            <p className="text-2xl">🥳🎉</p>
-        </div>
+      <div className="text-center flex w-100 flex-col justify-center items-center rounded-lg mb-1 pb-20 px-10 py-10 bg-background/70 border-2 shadow-lg">
+        <h1 className="font-semibold text-5xl pb-7">echo</h1>
+        <p className="text-2xl">Gratulerer med dagen!</p>
+        <p className="text-2xl">🥳🎉</p>
+      </div>
     );
   }
-  
-   return (
+
+  return (
     <div className="text-center flex-auto rounded-lg px-10 py-10 bg-background/70 border-2 shadow-lg">
       <h1 className="font-semibold text-3xl mt-5 pb-10 h-20">echo bursdag 🥳</h1>
       <p className="pb-3 h-14">Bursdagsfest om:</p>
@@ -50,7 +50,15 @@ export default function BdayCountDown() {
     </div>
   );
 
-  function TimeBox({ label, value, pad: doPad = false }: { label: string; value: number; pad?: boolean }) {
+  function TimeBox({
+    label,
+    value,
+    pad: doPad = false
+  }: {
+    label: string;
+    value: number;
+    pad?: boolean;
+  }) {
     return (
       <div className="flex flex-col items-center w-12">
         <span className="font-semibold text-2xl tabular-nums">{doPad ? pad(value) : value}</span>

src/pages/reminder-screen.tsx

@@ -0,0 +1,29 @@
+export const ReminderScreen = () => {
+  return (
+    <>
+      <div className="flex items-center justify-center w-full h-full pt-12">
+        <div className="bg-background/70 overflow-hidden rounded-4xl w-3/4 min-h-full border-2 !border-[#d0a4a4] flex flex-col">
+          <div className="bg-red-700 text-background pb-5 pt-2 !border-b-[#d0a4a4] border-b-2">
+            <h1 className="flex text-6xl font-semibold text-center flex-col">Hold det ryddig!</h1>
+          </div>
+          <div className="flex flex-col pt-5">
+            <p className="text-3xl text-center">
+              Det har vært mye rot på lesesalene dette semesteret, spesielt kjøkkenet til beta.
+            </p>
+            <div className="mt-5">
+              <p className="text-4xl text-center pt-5">Hvis dette ikke blir bedre</p>
+              <div className="flex flex-row justify-center">
+                <p className="text-6xl font-semibold text-center pt-5">⚠️FORSVINNER KAFFEN⚠️</p>
+              </div>
+            </div>
+            <div>
+              <p className="text-3xl text-center p-5">
+                Rydd etter deg selv - så slipper andre å gjøre det
+              </p>{" "}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};