Fixed colors

Author: coder13

dev-dist/sw.js

@@ -81,7 +81,7 @@ define(['./workbox-5357ef54'], function (workbox) {
     [
       {
         url: 'index.html',
-        revision: '0.mtq2duqj29g',
+        revision: '0.4hfq3gsql8',
       },
     ],
     {},

src/components/ActivityRow/ActivityRow.tsx

@@ -6,7 +6,7 @@ import { Stage } from '@/extensions/org.cubingusa.natshelper.v1/types';
 import { useNow } from '@/hooks/useNow';
 import { activityCodeToName } from '@/lib/activityCodes';
 import { formatTimeRange } from '@/lib/time';
-import { Pill } from '../Pill';
+import { RoomPill } from '../Pill';
 
 interface ActivityRowProps {
   activity: Activity;
@@ -38,15 +38,15 @@ export function ActivityRow({ activity, stage, timeZone, showRoom = true }: Acti
       )}
       to={`/competitions/${competitionId}/activities/${activity.id}`}>
       <span>{activityName}</span>
-      <span className="text-xs md:text-sm font-light flex justify-between">
+      <span className="flex justify-between text-xs font-light md:text-sm">
         {showRoom && stage && (
-          <Pill
-            className="mr-2 px-1 rounded"
+          <RoomPill
+            className="px-1 mr-2 rounded"
             style={{
               backgroundColor: `${stage.color}70`,
             }}>
             {stage.name}
-          </Pill>
+          </RoomPill>
         )}
         <span>{formatTimeRange(activity.startTime, activity.endTime, 5, timeZone)}</span>
       </span>

src/components/Pill/Pill.tsx

@@ -37,3 +37,15 @@ export const BaseAssignmentPill = ({ className, ...props }: PillProps) => {
     />
   );
 };
+
+export const RoomPill = ({ className, ...props }: PillProps) => {
+  return (
+    <span
+      className={classNames(
+        `inline-flex justify-center items-center px-2 py-1 ring-1 ring-inset font-medium rounded-md bg-gray-100 text-gray-800 shadow-sm dark:ring-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:shadow-gray-800`,
+        className,
+      )}
+      {...props}
+    />
+  );
+};