Use different approach to sinfo session colors

Author: anees-asghar

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

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

src/components/ListCard.tsx

@@ -13,7 +13,7 @@ interface ListCardProps {
   subtitle?: string;
   headtext?: string;
   label?: string;
-  labelExtraClassName?: string;
+  labelColor?: string;
   link?: string;
   linkProps?: LinkProps;
   extraClassName?: string;
@@ -41,7 +41,7 @@ export default function ListCard({
   subtitle,
   headtext,
   label,
-  labelExtraClassName,
+  labelColor,
   link,
   extraComponent,
   imgProps,
@@ -74,7 +74,8 @@ export default function ListCard({
             )}
             {label && (
               <span
-                className={`bg-sinfo-secondary text-white rounded-md px-2 py-0.5 uppercase ${labelExtraClassName ?? ""}`}
+                className={`bg-sinfo-secondary text-white rounded-md px-2 py-0.5 uppercase`}
+                style={labelColor ? { backgroundColor: labelColor } : undefined}
               >
                 {label}
               </span>

src/components/session/SessionTile.tsx

@@ -1,5 +1,5 @@
 import ListCard from "@/components/ListCard";
-import { generateTimeInterval, getSessionColorClassName } from "@/utils/utils";
+import { generateTimeInterval, getSessionColor } from "@/utils/utils";
 
 interface SesionTileProps {
   session: SINFOSession;
@@ -29,7 +29,7 @@ export function SessionTile({
         onlyHours: onlyShowHours,
       })}
       label={session.kind}
-      labelExtraClassName={getSessionColorClassName(session.kind)}
+      labelColor={getSessionColor(session.kind)}
       link={`/sessions/${session.id}`}
       extraClassName={
         pastSession ? "!bg-neutral-200 hover:!bg-neutral-300" : ""

src/utils/utils.ts

@@ -1,3 +1,5 @@
+import config from "../../tailwind.config";
+
 export function convertToAppRole(role: string): UserRole {
   switch (role) {
     case "company":
@@ -132,14 +134,15 @@ export function isToday(date: Date | string): boolean {
   );
 }
 
-export function getSessionColorClassName(sessionKind: string) {
+export function getSessionColor(sessionKind: string) {
   switch (sessionKind) {
     case "Presentation":
-      return "!bg-sinfo-tertiary";
+      return config.theme.extend.colors.sinfo.tertiary;
     case "Workshop":
-      return "!bg-sinfo-quaternary";
+      return config.theme.extend.colors.sinfo.quaternary;
     case "Keynote":
+      return config.theme.extend.colors.sinfo.secondary;
     default:
-      return "!bg-sinfo-secondary";
+      return "#000";
   }
 }

tailwind.config.ts

@@ -1,6 +1,6 @@
 import type { Config } from "tailwindcss";
 
-const config: Config = {
+const config = {
   content: [
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
@@ -23,4 +23,5 @@ const config: Config = {
   },
   plugins: [],
 };
-export default config;
+
+export default config satisfies Config;