Show consistent session colors

Author: anees-asghar

src/app/(authenticated)/sessions/[id]/page.tsx

@@ -9,7 +9,11 @@ import { PrizeTile } from "@/components/prize";
 import AddToCalendarButton from "@/components/session/AddToCalendarButton";
 import { SessionService } from "@/services/SessionService";
 import { UserService } from "@/services/UserService";
-import { generateTimeInterval, isMember } from "@/utils/utils";
+import {
+  generateTimeInterval,
+  getSessionColorClassName,
+  isMember,
+} from "@/utils/utils";
 import { CalendarClock, MapPin, Scan, Users } from "lucide-react";
 import { getServerSession } from "next-auth";
 import Image from "next/image";
@@ -58,7 +62,9 @@ export default async function Session({ params }: { params: SessionParams }) {
             {sinfoSession.place}
           </span>
         </div>
-        <span className="bg-sinfo-secondary text-white rounded-md px-3 py-1 font-bold uppercase">
+        <span
+          className={`text-white rounded-md px-3 py-1 font-bold uppercase ${getSessionColorClassName(sinfoSession.kind)}`}
+        >
           {sinfoSession.kind}
         </span>
         <ShowMore lines={5} className="font-light">

src/components/session/SessionTile.tsx

@@ -1,23 +1,11 @@
 import ListCard from "@/components/ListCard";
-import { generateTimeInterval } from "@/utils/utils";
+import { generateTimeInterval, getSessionColorClassName } from "@/utils/utils";
 
 interface SesionTileProps {
   session: SINFOSession;
   onlyShowHours?: boolean;
 }
 
-export function getLabelClassName(text: string): string {
-  switch (text) {
-    case "Presentation":
-      return "!bg-sinfo-tertiary";
-    case "Workshop":
-      return "!bg-sinfo-quaternary";
-    case "Keynote":
-    default:
-      return ""; // Use default label color
-  }
-}
-
 export function SessionTile({
   session,
   onlyShowHours = false,
@@ -41,7 +29,7 @@ export function SessionTile({
         onlyHours: onlyShowHours,
       })}
       label={session.kind}
-      labelExtraClassName={getLabelClassName(session.kind)}
+      labelExtraClassName={getSessionColorClassName(session.kind)}
       link={`/sessions/${session.id}`}
       extraClassName={
         pastSession ? "!bg-neutral-200 hover:!bg-neutral-300" : ""

src/utils/utils.ts

@@ -131,3 +131,15 @@ export function isToday(date: Date | string): boolean {
     date.getDate() === today.getDate()
   );
 }
+
+export function getSessionColorClassName(sessionKind: string) {
+  switch (sessionKind) {
+    case "Presentation":
+      return "!bg-sinfo-tertiary";
+    case "Workshop":
+      return "!bg-sinfo-quaternary";
+    case "Keynote":
+    default:
+      return "!bg-sinfo-secondary";
+  }
+}