add legend

client/src/Components/design-elements/Dot.tsx

@@ -1,18 +1,28 @@
 import type { CSSProperties } from "react";
 
+export const DotSizes = ["xs", "sm", "md", "lg"] as const;
+export type DotSize = (typeof DotSizes)[number];
+
+const DOT_SIZE_PX: Record<DotSize, string> = {
+	xs: "2px",
+	sm: "4px",
+	md: "8px",
+	lg: "12px",
+};
+
 interface DotProps {
 	color?: string;
-	size?: string;
+	size?: DotSize;
 	style?: CSSProperties;
 }
 
-export const Dot = ({ color = "gray", size = "4px", style }: DotProps) => {
+export const Dot = ({ color = "gray", size = "sm", style }: DotProps) => {
 	return (
 		<span
 			style={{
 				content: '""',
-				width: size,
-				height: size,
+				width: DOT_SIZE_PX[size],
+				height: DOT_SIZE_PX[size],
 				borderRadius: "50%",
 				backgroundColor: color,
 				opacity: 0.8,