Skip to content

Commit a37a1db

Browse files
coder13coder13
committed
Consolidated assignment color styles
1 parent 30b79bb commit a37a1db

File tree

29 files changed

+673
-170
lines changed

29 files changed

+673
-170
lines changed

‎dev-dist/sw.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,11 +81,11 @@ define(['./workbox-5357ef54'], function (workbox) {
8181
[
8282
{
8383
url: 'registerSW.js',
84-
revision: '3ca0b8505b4bec776b69afdba2768812',
84+
revision: 'e0e9e1c501d0b08450003debc476f5d1',
8585
},
8686
{
8787
url: 'index.html',
88-
revision: '0.0mqaa5vqso8',
88+
revision: '0.tgisoegou88',
8989
},
9090
],
9191
{},

‎src/components/ActivityRow/ActivityRow.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export function ActivityRow({ activity, stage, timeZone, showRoom = true }: Acti
3131
<Link
3232
key={activity.id}
3333
className={classNames(
34-
'flex flex-col w-full p-2 type-body even:bg-slate-50 even:dark:bg-gray-800 hover:bg-slate-100 dark:hover:bg-gray-700 even:hover:bg-slate-200 even:dark:hover:bg-gray-600',
34+
'flex flex-col w-full p-2 type-body even:table-bg-row-alt hover:table-bg-row-hover',
3535
{
3636
'opacity-50': isOver,
3737
},

‎src/components/AssignmentCodeCell/AssignmentCodeCell.tsx‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
import classNames from 'classnames';
12
import { useMemo } from 'react';
23
import { useTranslation } from 'react-i18next';
34
import { AssignmentsMap, SupportedAssignmentCode } from '@/lib/assignments';
5+
import { getAssignmentColorClasses } from '@/lib/colors';
46

57
interface AssignmentCodeCellProps<T extends React.ElementType> {
68
children?: React.ReactNode;
@@ -58,22 +60,15 @@ export function AssignmentCodeCell<T extends React.ElementType = 'td'>({
5860

5961
const Component = as || 'td';
6062

61-
const twColor = assignment?.color;
62-
const twBorderColor = assignment?.colorClass?.[300];
63+
const colorClasses = assignmentCode ? getAssignmentColorClasses(assignmentCode) : null;
6364

6465
return (
6566
<Component
66-
style={{
67-
...(!border
68-
? {
69-
backgroundColor: twColor ? `${twColor}4f` : undefined,
70-
}
71-
: {
72-
borderColor: twBorderColor,
73-
borderBottomWidth: 4,
74-
}),
75-
}}
76-
className={className}
67+
className={classNames(
68+
className,
69+
colorClasses && !border && colorClasses.bgMuted,
70+
colorClasses && border && [colorClasses.border, 'border-b-4'],
71+
)}
7772
{...props}>
7873
{content}
7974
{count ? (

‎src/components/AssignmentLabel/AssignmentLabel.tsx‎

Lines changed: 4 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { AssignmentCode } from '@wca/helpers';
22
import { useTranslation } from 'react-i18next';
3+
import { getAssignmentColorClasses } from '@/lib/colors';
34
import { BaseAssignmentPill } from '../Pill';
45

56
interface AssignmentLabelProps {
@@ -9,60 +10,11 @@ interface AssignmentLabelProps {
910
export function AssignmentLabel({ assignmentCode }: AssignmentLabelProps) {
1011
const { t } = useTranslation();
1112

12-
if (assignmentCode.match(/judge/i)) {
13-
return (
14-
<BaseAssignmentPill className="bg-primary">
15-
{t('common.assignments.staff-judge.noun', {
16-
defaultValue: assignmentCode.replace('staff-', ''),
17-
})}
18-
</BaseAssignmentPill>
19-
);
20-
}
21-
2213
const name = t(`common.assignments.${assignmentCode}.noun`, {
2314
defaultValue: assignmentCode.replace('staff-', ''),
2415
});
2516

26-
switch (assignmentCode) {
27-
case 'competitor':
28-
return (
29-
<BaseAssignmentPill className="bg-green-200 dark:bg-green-900">{name}</BaseAssignmentPill>
30-
);
31-
case 'staff-scrambler':
32-
return (
33-
<BaseAssignmentPill className="bg-yellow-200 dark:bg-yellow-900">{name}</BaseAssignmentPill>
34-
);
35-
case 'staff-runner':
36-
return (
37-
<BaseAssignmentPill className="bg-orange-200 dark:bg-orange-900">{name}</BaseAssignmentPill>
38-
);
39-
case 'staff-dataentry':
40-
return (
41-
<BaseAssignmentPill className="bg-cyan-200 dark:bg-cyan-900">{name}</BaseAssignmentPill>
42-
);
43-
case 'staff-announcer':
44-
return (
45-
<BaseAssignmentPill className="bg-violet-200 dark:bg-violet-900">{name}</BaseAssignmentPill>
46-
);
47-
case 'staff-delegate':
48-
return (
49-
<BaseAssignmentPill className="bg-purple-200 dark:bg-purple-900">{name}</BaseAssignmentPill>
50-
);
51-
case 'staff-stagelead':
52-
return (
53-
<BaseAssignmentPill className="bg-fuchsia-200 dark:bg-fuchsia-900">
54-
{name}
55-
</BaseAssignmentPill>
56-
);
57-
case 'staff-stream':
58-
return (
59-
<BaseAssignmentPill className="bg-pink-300 dark:bg-pink-900">{name}</BaseAssignmentPill>
60-
);
61-
case 'staff-photo':
62-
return (
63-
<BaseAssignmentPill className="bg-amber-500 dark:bg-amber-900">{name}</BaseAssignmentPill>
64-
);
65-
default:
66-
return <BaseAssignmentPill className="bg-primary">{name}</BaseAssignmentPill>;
67-
}
17+
const colorClasses = getAssignmentColorClasses(assignmentCode);
18+
19+
return <BaseAssignmentPill className={colorClasses.bg}>{name}</BaseAssignmentPill>;
6820
}

‎src/containers/Competitors/CompetitorListItem.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const CompetitorListItem = ({
2020

2121
return (
2222
<Link key={person.registrantId} to={`persons/${person.registrantId}`}>
23-
<li className="border border-tertiary-weak bg-panel list-none rounded-md flex justify-between cursor-pointer hover:bg-blue-200 dark:hover:bg-gray-700 group transition-colors my-1 flex-row min-h-[40px] items-center text-gray-900 dark:text-white type-body">
23+
<li className="border border-tertiary-weak bg-panel list-none rounded-md flex justify-between cursor-pointer hover:table-bg-row-hover group transition-colors my-1 flex-row min-h-[40px] items-center text-gray-900 dark:text-white type-body">
2424
<div className="flex space-x-1">
2525
{highlight && (
2626
<div className="flex flex-shrink">

‎src/containers/Competitors/Competitors.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export const Competitors = ({ wcif }: { wcif: Competition }) => {
5050
);
5151

5252
return (
53-
<div className="space-y-2 text-gray-900 dark:text-white">
53+
<div className="space-y-2">
5454
{me && (
5555
<CompetitorListItem
5656
highlight
@@ -70,7 +70,7 @@ export const Competitors = ({ wcif }: { wcif: Competition }) => {
7070
<input
7171
type="search"
7272
id="competitor-search"
73-
className="block w-full p-3 h-[40px] ps-2 type-body-sm text-gray-900 dark:text-white placeholder-gray-600 dark:placeholder-gray-400 border border-gray-300 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-800 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400"
73+
className="input h-[40px]"
7474
placeholder={t('competition.competitors.searchCompetitors')}
7575
value={input}
7676
onChange={(e) => setInput(e.target.value)}

‎src/containers/LiveActivities/LiveActivities.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -68,10 +68,10 @@ export const LiveActivities = ({ competitionId }: LiveActivitiesProps) => {
6868

6969
return (
7070
<div className="grid grid-cols-12 space-y-2">
71-
<div className="col-span-full grid grid-cols-12 gap-x-4">
72-
<div className="col-span-6 font-bold p-1">Activity</div>
73-
<div className="col-span-3 font-bold p-1">Started</div>
74-
<div className="col-span-3 font-bold p-1">Duration</div>
71+
<div className="grid grid-cols-12 col-span-full gap-x-4">
72+
<div className="col-span-6 p-1 font-bold">Activity</div>
73+
<div className="col-span-3 p-1 font-bold">Started</div>
74+
<div className="col-span-3 p-1 font-bold">Duration</div>
7575
{childActivities?.map((activity) => {
7676
const liveActivity = liveActivities?.find((la) => la.activityId === activity.id);
7777
if (!liveActivity) {
@@ -86,9 +86,9 @@ export const LiveActivities = ({ competitionId }: LiveActivitiesProps) => {
8686
return (
8787
<Fragment key={activity.id}>
8888
{/* {multistage && <div className="col-span-3">{activity.room?.name}:</div>} */}
89-
<div className="p-1 col-span-6">{activity.name}</div>
90-
<div className="p-1 col-span-3">{formatTime(liveActivity.startTime!)}</div>
91-
<div className="p-1 col-span-3">{minutes ? duration : 'now'}</div>
89+
<div className="col-span-6 p-1">{activity.name}</div>
90+
<div className="col-span-3 p-1">{formatTime(liveActivity.startTime!)}</div>
91+
<div className="col-span-3 p-1">{minutes ? duration : 'now'}</div>
9292
</Fragment>
9393
);
9494
})}
@@ -104,7 +104,7 @@ export const LiveActivities = ({ competitionId }: LiveActivitiesProps) => {
104104
as="div"
105105
border
106106
assignmentCode={assignmentCode}
107-
className="px-2 py-1 type-heading drop-shadow-lg font-bold col-span-full"
107+
className="px-2 py-1 font-bold type-heading drop-shadow-lg col-span-full"
108108
/>
109109
{childActivities.map((ca) => {
110110
const personsInActivity = personsInActivities?.filter(
@@ -118,9 +118,9 @@ export const LiveActivities = ({ competitionId }: LiveActivitiesProps) => {
118118
}
119119

120120
return (
121-
<div key={ca.id} className="col-span-full grid grid-cols-2 group">
121+
<div key={ca.id} className="grid grid-cols-2 col-span-full group">
122122
<div
123-
className="col-span-1 px-2 py-1 group-hover:bg-slate-100 transition duration-150 ease-in-out transform"
123+
className="col-span-1 px-2 py-1 transition duration-150 ease-in-out transform group-hover:bg-gray-100 dark:group-hover:bg-gray-700"
124124
style={{
125125
gridRow: `span ${personsInActivity?.length || 0}`,
126126
}}>
@@ -135,15 +135,15 @@ export const LiveActivities = ({ competitionId }: LiveActivitiesProps) => {
135135
<Link
136136
key={ca.id.toString() + assignmentCode + person.registrantId}
137137
to={`/competitions/${competitionId}/persons/${person.registrantId}`}
138-
className="col-span-1 px-2 py-1 hover:bg-slate-100 transition duration-150 ease-in-out transform">
138+
className="col-span-1 px-2 py-1 transition duration-150 ease-in-out transform hover:bg-gray-100 dark:hover:bg-gray-700">
139139
{person.name}
140140
</Link>
141141
);
142142
})}
143143
</div>
144144
);
145145
})}
146-
<div className="col-span-full w-2" />
146+
<div className="w-2 col-span-full" />
147147
</Fragment>
148148
))}
149149
</div>

‎src/containers/OngoingActivities/OngoingActivities.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const OngoingActivities = ({ competitionId }: OngoingActivitiesProps) =>
2727
return isInChargeOfComp && wcif?.id ? (
2828
<div className="py-2">
2929
<a
30-
className="border border-green-200 rounded-md p-2 px-1 flex cursor-pointer hover:bg-green-200 group transition-colors flex-row"
30+
className="border border-assignment-competitor rounded-md p-2 px-1 flex cursor-pointer hover:bg-assignment-competitor-muted group transition-colors flex-row"
3131
href={`mailto:support@notifycomp.com?subject=${subject}&body=${body}`}
3232
target="_blank"
3333
rel="noreferrer">

‎src/containers/PersonalBests/PersonalBests.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@ export function PersonalBestsContainer({ wcif, person }: PersonalBestsContainerP
4040
<hr className="my-2 border-tertiary-weak" />
4141

4242
<table className="w-full type-body-sm">
43-
<thead className="bg-green-300 shadow-md dark:bg-green-900/60 dark:shadow-none">
44-
<tr className="dark:text-gray-100">
43+
<thead className="bg-assignment-competitor shadow-md dark:shadow-none">
44+
<tr className="text-assignment-competitor">
4545
<th className="px-3 py-2">{t('competition.personalRecords.type')}</th>
4646
<th>{t('competition.personalRecords.best')}</th>
4747
<th>{t('common.wca.recordType.WR')}</th>
@@ -67,7 +67,7 @@ export function PersonalBestsContainer({ wcif, person }: PersonalBestsContainerP
6767
<tr>
6868
<td
6969
colSpan={5}
70-
className="px-3 py-2 text-center bg-green-200 dark:bg-green-900/60">
70+
className="px-3 py-2 text-center bg-assignment-competitor-muted">
7171
<Link
7272
key={eventId}
7373
to={`/competitions/${wcif.id}/psych-sheet/${eventId}`}

‎src/containers/PersonalSchedule/PersonalExtraAssignment.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export const ExtraAssignment = ({
4040
return (
4141
<tr
4242
className={classNames(
43-
'table-row type-body-sm sm:type-body-sm hover:bg-slate-100 dark:hover:bg-gray-700 border-y border-tertiary-weak',
43+
'table-row type-body-sm sm:type-body-sm hover:bg-gray-100 dark:hover:bg-gray-700 border-y border-tertiary-weak',
4444
{
4545
'opacity-40': isOver,
4646
'bg-op': isCurrent,
@@ -54,7 +54,7 @@ export const ExtraAssignment = ({
5454
</td>
5555
<td></td>
5656
{room ? (
57-
<td className="py-2 type-body-sm text-center sm:type-body-sm" style={{}}>
57+
<td className="py-2 text-center type-body-sm sm:type-body-sm" style={{}}>
5858
<BaseAssignmentPill
5959
className="min-w-[7em]"
6060
style={{

0 commit comments

Comments
 (0)