Progress

app/components/TimePopover.tsx

@@ -11,7 +11,7 @@ import { LocaleTime } from "./LocaleTime";
 import styles from "./TimePopover.module.css";
 
 export default function TimePopover({
-	time,
+	date,
 	options = {
 		minute: "numeric",
 		hour: "numeric",
@@ -22,7 +22,7 @@ export default function TimePopover({
 	className,
 	footerText,
 }: {
-	time: Date;
+	date: Date;
 	options?: Intl.DateTimeFormatOptions;
 	underline?: boolean;
 	className?: string;
@@ -61,7 +61,7 @@ export default function TimePopover({
 					setOpen(true);
 				}}
 			>
-				<LocaleTime date={time} options={options} inline />
+				<LocaleTime date={date} options={options} inline />
 			</button>
 			<Popover
 				isOpen={open}
@@ -73,7 +73,7 @@ export default function TimePopover({
 					<div className="stack sm">
 						<div className="text-center">
 							<LocaleTime
-								date={time}
+								date={date}
 								options={{
 									timeZoneName: "long",
 									hour: "numeric",
@@ -84,7 +84,7 @@ export default function TimePopover({
 						<SendouButton
 							size="miniscule"
 							variant="minimal"
-							onPress={() => copyToClipboard(`<t:${time.valueOf() / 1000}:F>`)}
+							onPress={() => copyToClipboard(`<t:${date.valueOf() / 1000}:F>`)}
 							icon={copySuccess ? <Check /> : <Clipboard />}
 						>
 							{t("common:actions.copyTimestampForDiscord")}

app/components/match-page/MatchBannerScheduledTime.tsx

@@ -9,7 +9,7 @@ export function MatchBannerScheduledTime({
 }: MatchBannerScheduledTimeProps) {
 	return (
 		<TimePopover
-			time={time}
+			date={time}
 			options={{
 				weekday: "short",
 				year: "numeric",

app/features/scrims/components/ScrimCard.tsx

@@ -262,7 +262,7 @@ function ScrimStartTimeDisplay({
 
 	const timeDisplay = (
 		<TimePopover
-			time={startTime}
+			date={startTime}
 			options={{
 				hour: "numeric",
 				minute: "numeric",

app/features/tournament/components/TournamentHeader.tsx

@@ -6,7 +6,7 @@ import { Avatar } from "~/components/Avatar";
 import { CopyToClipboardPopover } from "~/components/CopyToClipboardPopover";
 import { LinkButton, SendouButton } from "~/components/elements/Button";
 import { DiscordIcon } from "~/components/icons/Discord";
-import { LocaleTime } from "~/components/LocaleTime";
+import TimePopover from "~/components/TimePopover";
 import { useUser } from "~/features/auth/core/user";
 import type { Tournament } from "~/features/tournament-bracket/core/Tournament";
 import { databaseTimestampToDate } from "~/utils/dates";
@@ -35,7 +35,6 @@ export function TournamentHeader({ tournament }: { tournament: Tournament }) {
 		(date) => date.getTime(),
 	);
 
-	// xxx: for dates use the popover version
 	return (
 		<header className={styles.header}>
 			<div className={styles.identity}>
@@ -56,7 +55,7 @@ export function TournamentHeader({ tournament }: { tournament: Tournament }) {
 			</div>
 			<div className={styles.dates}>
 				{startTimes.map((date) => (
-					<LocaleTime
+					<TimePopover
 						key={date.getTime()}
 						date={date}
 						options={{