🖍️ Color n' Constant Changes (#739)

apps/next/src/app/globals.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  overscroll-behavior: none;
+}
+
 html,
 body {
   height: 100%;
@@ -50,6 +54,13 @@ body {
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
     --radius: 0.5rem;
+    --surface-elevated: #ffffff;
+    --surface-modal: #ffffff;
+    --button-primary-bg: #0069A8;
+    --primary-accent: rgba(0, 105, 168, 0.2);
+    --button-primary-fg: #ffffff;
+    --button-disabled-bg: rgba(0, 0, 0, 0.12);
+    --button-disabled-fg: rgba(0, 0, 0, 0.26);
     --donut-inner: white;
     --donut-outer: white;
     --donut-track: #ffffff;
@@ -84,6 +95,13 @@ body {
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
+    --surface-elevated: #323235;
+    --surface-modal: #303035;
+    --button-primary-bg: #93C5FD;
+    --button-primary-bg-transparent: rgba(147, 197, 253, 0.2);
+    --button-primary-fg: #111827;
+    --button-disabled-bg: #3F3F47;
+    --button-disabled-fg: #71717A;
     --donut-inner: #27272A;
     --donut-outer: #31373F;
     --donut-track: #27272A;
@@ -126,16 +144,16 @@ body {
 
 /* Light mode calendar borders */
 .events-calendar-wrapper .rbc-month-view,
-.events-calendar-wrapper .rbc-day-bg + .rbc-day-bg,
-.events-calendar-wrapper .rbc-month-row + .rbc-month-row,
+.events-calendar-wrapper .rbc-day-bg+.rbc-day-bg,
+.events-calendar-wrapper .rbc-month-row+.rbc-month-row,
 .events-calendar-wrapper .rbc-header {
   border-color: #0369a1 !important;
 }
 
 /* Dark mode calendar borders */
 .dark .events-calendar-wrapper .rbc-month-view,
-.dark .events-calendar-wrapper .rbc-day-bg + .rbc-day-bg,
-.dark .events-calendar-wrapper .rbc-month-row + .rbc-month-row,
+.dark .events-calendar-wrapper .rbc-day-bg+.rbc-day-bg,
+.dark .events-calendar-wrapper .rbc-month-row+.rbc-month-row,
 .dark .events-calendar-wrapper .rbc-header {
   border-color: #93c5fd !important;
 }
@@ -153,16 +171,20 @@ body {
 .MuiPickersDay-root {
   color: #111827 !important;
 }
+
 .MuiPickersDay-root.Mui-selected {
   background-color: #0369a1 !important;
   color: white !important;
 }
+
 .MuiDayCalendar-weekDayLabel {
   color: #111827 !important;
 }
+
 .MuiPickersCalendarHeader-label {
   color: #111827 !important;
 }
+
 .MuiPickersArrowSwitcher-button {
   color: #111827 !important;
 }
@@ -171,25 +193,30 @@ body {
 .dark .MuiPickersDay-root {
   color: white !important;
 }
+
 .dark .MuiPickersDay-root.Mui-selected {
   background-color: #93C5FD !important;
   color: #111827 !important;
 }
+
 .dark .MuiPickersDay-today {
   border-color: #93C5FD !important;
 }
+
 .dark .MuiDayCalendar-weekDayLabel {
   color: white !important;
 }
+
 .dark .MuiPickersCalendarHeader-label {
   color: white !important;
 }
+
 .dark .MuiPickersArrowSwitcher-button {
   color: white !important;
 }
+
 /* Date picker dialog dark mode (mobile) */
 .dark .MuiDialog-paper {
-  background-color: #323235 !important;
+  background-color: var(--surface-elevated) !important;
   background-image: none !important;
-}
-
+}

apps/next/src/app/page.tsx

@@ -119,7 +119,7 @@ function DesktopHome(): React.JSX.Element {
             {/* Brandywine Card */}
             <Link href="/brandywine" className="group">
               <Box
-                className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition dark:bg-[#323235]"
+                className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition dark:bg-surface-elevated"
                 sx={{ border: 1, borderColor: "divider" }}
               >
                 <div className="relative w-full h-56">
@@ -162,7 +162,7 @@ function DesktopHome(): React.JSX.Element {
             {/* Anteatery Card */}
             <Link href="/anteatery" className="group">
               <Box
-                className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition dark:bg-[#323235]"
+                className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition dark:bg-surface-elevated"
                 sx={{ border: 1, borderColor: "divider" }}
               >
                 <div className="relative w-full h-56">
@@ -338,7 +338,7 @@ function MobileHome(): React.JSX.Element {
             {/* Brandywine Card */}
             <Link href="/brandywine" className="group block">
               <Box
-                className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition dark:bg-[#323235]"
+                className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition dark:bg-surface-elevated"
                 sx={{ border: 1, borderColor: "divider" }}
               >
                 <div className="relative w-full h-24">
@@ -385,7 +385,7 @@ function MobileHome(): React.JSX.Element {
             {/* Anteatery Card */}
             <Link href="/anteatery" className="group block">
               <Box
-                className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition dark:bg-[#323235]"
+                className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition dark:bg-surface-elevated"
                 sx={{ border: 1, borderColor: "divider" }}
               >
                 <div className="relative w-full h-24">

apps/next/src/components/ui/dishes-info.tsx

@@ -64,7 +64,7 @@ export default function DishesInfo({
 
   return (
     <div
-      className="flex flex-col gap-6 mt-6 px-2 overflow-y-auto 
+      className="flex flex-col gap-6 overflow-y-auto 
       flex-grow h-1"
       id="food-scroll"
     >

apps/next/src/components/ui/edit-preferences-content.tsx

@@ -168,11 +168,12 @@ export default function EditPreferencesContent({
       ]);
 
       posthog.capture("preferences_updated", {
-        allergies: [...formData.allergies, ...customAllergies],
+        allergies: [...formData.allergies /*, ...customAllergies */],
         preferences: formData.preferences,
-        allergies_count: formData.allergies.length + customAllergies.length,
+        allergies_count:
+          formData.allergies.length /*+ customAllergies.length */,
         preferences_count: formData.preferences.length,
-        custom_allergies_count: customAllergies.length,
+        /*custom_allergies_count: customAllergies.length,*/
       });
 
       if (onSaved) {

apps/next/src/components/ui/onboarding.tsx

@@ -356,17 +356,14 @@ const OnboardingContent = React.forwardRef<
               sx={{
                 height: "45px",
                 width: "80px",
-                bgcolor: "#0069A8",
+                bgcolor: "var(--button-primary-bg)",
+                color: "var(--button-primary-fg)",
                 "&:hover": {
                   filter: "brightness(0.85)",
                 },
-                ".dark &": {
-                  bgcolor: "#93C5FD",
-                  color: "#111827",
-                },
-                ".dark &.Mui-disabled": {
-                  backgroundColor: "#3F3F47",
-                  color: "#71717A",
+                "&.Mui-disabled": {
+                  backgroundColor: "var(--button-disabled-bg)",
+                  color: "var(--button-disabled-fg)",
                 },
               }}
             >
@@ -381,17 +378,14 @@ const OnboardingContent = React.forwardRef<
               sx={{
                 height: "45px",
                 width: "80px",
-                bgcolor: "#0069A8",
+                bgcolor: "var(--button-primary-bg)",
+                color: "var(--button-primary-fg)",
                 "&:hover": {
                   filter: "brightness(0.85)",
                 },
-                ".dark &": {
-                  bgcolor: "#93C5FD",
-                  color: "#111827",
-                },
-                ".dark &.Mui-disabled": {
-                  backgroundColor: "#3F3F47",
-                  color: "#71717A",
+                "&.Mui-disabled": {
+                  backgroundColor: "var(--button-disabled-bg)",
+                  color: "var(--button-disabled-fg)",
                 },
               }}
             >
@@ -408,17 +402,14 @@ const OnboardingContent = React.forwardRef<
             sx={{
               height: "45px",
               width: "80px",
-              bgcolor: "#0069A8",
+              bgcolor: "var(--button-primary-bg)",
+              color: "var(--button-primary-fg)",
               "&:hover": {
                 filter: "brightness(0.85)",
               },
-              ".dark &": {
-                bgcolor: "#93C5FD",
-                color: "#111827",
-              },
-              ".dark &.Mui-disabled": {
-                backgroundColor: "#3F3F47",
-                color: "#71717A",
+              "&.Mui-disabled": {
+                backgroundColor: "var(--button-disabled-bg)",
+                color: "var(--button-disabled-fg)",
               },
             }}
           >
@@ -460,7 +451,7 @@ export default function OnboardingDialog(): React.JSX.Element {
                 border: "3px solid",
                 borderColor: "var(--mui-palette-divider)",
                 backgroundImage: "none",
-                backgroundColor: "#303035",
+                backgroundColor: "var(--surface-modal)",
               },
             },
           },
@@ -493,7 +484,7 @@ export default function OnboardingDialog(): React.JSX.Element {
           },
           ".dark & .MuiDrawer-paper": {
             backgroundImage: "none",
-            backgroundColor: "#303035",
+            backgroundColor: "var(--surface-modal)",
           },
         }}
       >

apps/next/src/components/ui/restaurant/dishes-view.tsx

@@ -91,12 +91,13 @@ export function DishesView({
         : // Normal View: Render active station logic
           activeStation && (
             <div className="[&_#food-scroll]:h-auto [&_#food-scroll]:overflow-y-visible">
-              <div className="mb-4">
+              <div className="my-4">
                 <Typography
                   variant="h5"
                   fontWeight={700}
                   color="text.primary"
                   sx={{ fontSize: "1.875rem" }}
+                  className="w-full bg-primary-accent pl-4 py-2 rounded-xl text-sky-700 dark:text-black"
                 >
                   {toTitleCase(activeStation.name)}
                 </Typography>

apps/next/src/components/ui/restaurant/header/desktop-tabs.tsx

@@ -45,7 +45,7 @@ export function DesktopTabs({
               setSelectedStation(val);
             }
           }}
-          className="flex w-full overflow-x-auto no-scrollbar !bg-sky-700/40 dark:!bg-[#46566a] !rounded-lg !p-2 [&_.MuiTabs-flexContainer]:justify-between [&_.MuiTabs-flexContainer]:gap-2 [&_.MuiTabs-indicator]:hidden"
+          className="flex w-full overflow-x-auto no-scrollbar bg-primary-accent dark:!bg-[#46566a] !rounded-lg !p-2 [&_.MuiTabs-flexContainer]:justify-between [&_.MuiTabs-flexContainer]:gap-2 [&_.MuiTabs-indicator]:hidden"
           variant="scrollable"
           scrollButtons={false}
         >

apps/next/src/components/ui/restaurant/restaurant-controls.tsx

@@ -70,16 +70,12 @@ export function RestaurantControls({
     <>
       <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-2 mb-2 flex-wrap md:flex-nowrap">
         {/* Desktop title & status (Header) */}
-        <RestaurantHeader isDesktop={isDesktop} hall={hall} />
-
-        <div className="flex flex-col gap-3 w-full md:w-auto md:flex-row md:items-center md:justify-end">
-          {/* Desktop Status - now next to selectors */}
-          {isDesktop && (
-            <div>
-              <DiningHallStatus status={derivedHallStatus} />
-            </div>
-          )}
+        <div className="inline-flex gap-4">
+          <RestaurantHeader isDesktop={isDesktop} hall={hall} />
+          {isDesktop && <DiningHallStatus status={derivedHallStatus} />}
+        </div>
 
+        <div className="flex flex-col gap-3 w-full md:w-auto md:flex-row md:items-center">
           {/* Meal & date selectors (Filters) */}
           <RestaurantFilters
             isDesktop={isDesktop}

apps/next/src/components/ui/restaurant/restaurant-page.tsx

@@ -14,12 +14,14 @@ import {
 import { useMediaQuery } from "@/hooks/useMediaQuery";
 import { isSameDay } from "@/utils/funcs";
 import { trpc } from "@/utils/trpc";
+import { cn } from "@/utils/tw";
 import {
   ANTEATERY_MAP_LINK_URL,
   BRANDYWINE_MAP_LINK_URL,
   HallEnum,
   HallStatusEnum,
 } from "@/utils/types";
+import { DiningHallStatus } from "../status";
 import { DishesView } from "./dishes-view";
 import { RestaurantControls } from "./restaurant-controls";
 import { Sidebar } from "./sidebar";
@@ -193,7 +195,10 @@ export function RestaurantPage({
           alt={hero.alt}
           fill
           priority
-          className="object-cover object-bottom"
+          className={cn(
+            "object-cover",
+            hall === HallEnum.BRANDYWINE && "object-bottom",
+          )}
         />
         <div className="absolute inset-0 bg-gradient-to-tr from-black/80 via-black/20 to-transparent" />
         {/* Mobile Header Overlay */}
@@ -207,20 +212,7 @@ export function RestaurantPage({
               >
                 {hall === HallEnum.ANTEATERY ? "Anteatery" : "Brandywine"}
               </Typography>
-              <div className="flex items-center gap-2 pl-1 text-md font-small text-white">
-                {openTime && closeTime ? (
-                  <>
-                    <div
-                      className={`w-2.5 h-2.5 rounded-full ${derivedHallStatus === HallStatusEnum.OPEN ? "bg-green-500" : "bg-red-500"}`}
-                    />
-                    <span>
-                      {derivedHallStatus === HallStatusEnum.OPEN
-                        ? "Open"
-                        : "Closed"}
-                    </span>
-                  </>
-                ) : null}
-              </div>
+              <DiningHallStatus status={derivedHallStatus} mobile />
             </div>
             <Link
               href={

apps/next/src/components/ui/restaurant/sidebar.tsx

@@ -40,7 +40,7 @@ export function Sidebar({
         className="mb-4 overflow-hidden dark:bg-[#303035]"
         sx={{ border: 1, borderColor: "divider" }}
       >
-        <div className="bg-sky-500/20 dark:bg-blue-300/10 px-4 py-3 border-b-2 border-sky-700 dark:border-blue-300">
+        <div className="bg-primary-accent dark:bg-blue-300/10 px-4 py-3 border-b-2 border-sky-700 dark:border-blue-300">
           <Typography
             variant="h6"
             className="!font-bold !text-center !text-sky-700 dark:!text-blue-300"