diff --git a/js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.tsx b/js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.tsx
index 03626d7df..ab2d99a08 100644
--- a/js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.tsx
+++ b/js/src/app/user/[userId]/submissions/_components/UserSubmissions/UserSubmissions.tsx
@@ -22,11 +22,28 @@ import {
Group,
Card,
Flex,
+ Tooltip,
} from "@mantine/core";
import { useMediaQuery } from "@mantine/hooks";
+import { IconClock } from "@tabler/icons-react";
+import d from "dayjs";
import { useMemo } from "react";
import { Link } from "react-router-dom";
+const clockIconStyle = {
+ position: "absolute" as const,
+ top: -8,
+ right: -8,
+ width: 22,
+ height: 22,
+ borderRadius: "50%",
+ backgroundColor: "var(--mantine-color-teal-7)",
+ border: "2px solid var(--mantine-color-dark-7)",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+};
+
export default function UserSubmissions({ userId }: { userId: string }) {
const {
data,
@@ -73,6 +90,10 @@ export default function UserSubmissions({ userId }: { userId: string }) {
const pageData = data.payload;
+ const dateRangeLabel =
+ (startDate || endDate) &&
+ `Viewing submissions from ${startDate ? d(startDate).format("MMM D, YYYY") : "now"} to ${endDate ? d(endDate).format("MMM D, YYYY") : "now"}`;
+
return (
{!isMobile && (
-
-
-
- Points Received
-
- }
- />
-
-
+
+
+
+
+ Points Received
+
+ }
+ />
+
+
+ {dateRangeLabel && (
+
+
+
+
+
+ )}
+
)}
{isMobile && (
-
-
-
- Points Received
-
- }
- />
-
-
+
+
+
+
+ Points Received
+
+ }
+ />
+
+
+ {dateRangeLabel && (
+
+
+
+ )}
+
)}