From 6adfd9b78d7726fea64da71eff6033c080bf46c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Greg=20Berg=C3=A9?= <berge.greg@gmail.com>
Date: Sun, 3 Nov 2024 10:24:36 +0100
Subject: [PATCH] feat: changes overlay settings

---
 .../src/containers/Team/SubscribeDialog.tsx   |  4 +-
 apps/frontend/src/pages/Build/BuildDetail.tsx | 55 ++++++++---
 .../src/pages/Build/BuildDetailToolbar.tsx    |  3 +
 .../src/pages/Build/BuildDiffColorState.tsx   | 54 ++++++++++
 .../src/pages/Build/BuildDiffList.tsx         | 13 ++-
 .../frontend/src/pages/Build/BuildHotkeys.tsx |  6 ++
 apps/frontend/src/pages/Build/BuildPage.tsx   | 65 ++++++------
 .../pages/Build/toolbar/SettingsButton.tsx    | 98 +++++++++++++++++++
 apps/frontend/src/pages/Signup.tsx            |  6 +-
 apps/frontend/src/ui/ColorPicker.tsx          | 53 ++++++++++
 apps/frontend/src/ui/FormLabel.tsx            | 21 ----
 apps/frontend/src/ui/FormTextInput.tsx        |  6 +-
 apps/frontend/src/ui/Label.tsx                | 28 ++++++
 apps/frontend/src/ui/Menu.tsx                 |  6 +-
 apps/frontend/src/ui/Popover.tsx              | 11 ++-
 apps/frontend/src/ui/Slider.tsx               | 84 ++++++++++++++++
 apps/frontend/src/ui/TwicPicture.tsx          | 14 +--
 .../frontend/src/util/color-detection/hook.ts |  4 +-
 18 files changed, 442 insertions(+), 89 deletions(-)
 create mode 100644 apps/frontend/src/pages/Build/BuildDiffColorState.tsx
 create mode 100644 apps/frontend/src/pages/Build/toolbar/SettingsButton.tsx
 create mode 100644 apps/frontend/src/ui/ColorPicker.tsx
 delete mode 100644 apps/frontend/src/ui/FormLabel.tsx
 create mode 100644 apps/frontend/src/ui/Label.tsx
 create mode 100644 apps/frontend/src/ui/Slider.tsx

diff --git a/apps/frontend/src/containers/Team/SubscribeDialog.tsx b/apps/frontend/src/containers/Team/SubscribeDialog.tsx
index 641081933..e26cc4b59 100644
--- a/apps/frontend/src/containers/Team/SubscribeDialog.tsx
+++ b/apps/frontend/src/containers/Team/SubscribeDialog.tsx
@@ -13,7 +13,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/ui/Dialog";
-import { FormLabel } from "@/ui/FormLabel";
+import { Label } from "@/ui/Label";
 import { Modal } from "@/ui/Modal";
 import { StripeCheckoutButton } from "@/ui/StripeLink";
 
@@ -80,7 +80,7 @@ export function TeamSubscribeDialog({
             <DialogTitle>Subscribe to Pro plan</DialogTitle>
 
             <div className="my-4">
-              <FormLabel>Team to subscribe</FormLabel>
+              <Label>Team to subscribe</Label>
               <AccountSelector
                 accounts={sortedTeams}
                 disabledAccountIds={disabledAccountIds}
diff --git a/apps/frontend/src/pages/Build/BuildDetail.tsx b/apps/frontend/src/pages/Build/BuildDetail.tsx
index 92f67a57e..6d6fc51c7 100644
--- a/apps/frontend/src/pages/Build/BuildDetail.tsx
+++ b/apps/frontend/src/pages/Build/BuildDetail.tsx
@@ -16,6 +16,10 @@ import { useScrollListener } from "@/ui/useScrollListener";
 import { useColoredRects } from "@/util/color-detection/hook";
 
 import { BuildDetailToolbar } from "./BuildDetailToolbar";
+import {
+  useBuildDiffColorState,
+  useBuildDiffColorStyle,
+} from "./BuildDiffColorState";
 import {
   BuildDiffFitStateProvider,
   useBuildDiffFitState,
@@ -175,14 +179,17 @@ function getImageScale(element: HTMLImageElement) {
   return element.height / element.naturalHeight;
 }
 
-function ScreenshotPicture(
-  props: Omit<React.ComponentProps<typeof TwicPicture>, "width" | "height"> & {
-    src: string;
-    width?: number | null | undefined;
-    height?: number | null | undefined;
-    onScaleChange?: (scale: number | null) => void;
-  },
-) {
+type ScreenshotPictureProps = Omit<
+  React.ComponentProps<typeof TwicPicture>,
+  "width" | "height"
+> & {
+  src: string;
+  width?: number | null | undefined;
+  height?: number | null | undefined;
+  onScaleChange?: (scale: number | null) => void;
+};
+
+function ScreenshotPicture(props: ScreenshotPictureProps) {
   const { src, style, width, height, onScaleChange, ...attrs } = props;
   const transform = useZoomTransform();
   const ref = useRef<HTMLImageElement>(null);
@@ -413,7 +420,7 @@ const CompareScreenshot = ({
 }) => {
   const { visible } = useBuildDiffVisibleState();
   const { contained } = useBuildDiffFitState();
-  const opacity = visible ? "" : "opacity-0";
+  const opacity = visible ? "opacity-70" : "opacity-0";
   switch (diff.status) {
     case ScreenshotDiffStatus.Added: {
       return (
@@ -550,7 +557,7 @@ function CompareScreenshotChanged(props: {
             )}
             {...getScreenshotPictureProps(diff.compareScreenshot!)}
           />
-          <ScreenshotPicture
+          <ChangesScreenshotPicture
             className={clsx(
               opacity,
               "relative z-10",
@@ -575,6 +582,17 @@ function CompareScreenshotChanged(props: {
   );
 }
 
+function ChangesScreenshotPicture(props: ScreenshotPictureProps) {
+  const style = useBuildDiffColorStyle();
+  return (
+    <ScreenshotPicture
+      alt="Changes screenshot"
+      {...props}
+      style={{ ...props.style, ...style }}
+    />
+  );
+}
+
 /**
  * Detects colored areas in the image provided by the URL.
  */
@@ -607,9 +625,9 @@ function DiffIndicator(props: {
             style={{ transform: `scaleY(${props.scale})` }}
           >
             {rects.map((rect, index) => (
-              <div
+              <DiffIndicatorRect
                 key={index}
-                className="bg-danger-solid absolute w-1.5"
+                className="absolute w-1.5"
                 style={{
                   top: rect.y,
                   height: rect.height,
@@ -623,6 +641,19 @@ function DiffIndicator(props: {
   );
 }
 
+function DiffIndicatorRect(props: React.ComponentPropsWithoutRef<"div">) {
+  const { color } = useBuildDiffColorState();
+  return (
+    <div
+      {...props}
+      style={{
+        backgroundColor: color,
+        ...props.style,
+      }}
+    />
+  );
+}
+
 const BuildScreenshots = memo(
   (props: { diff: Diff; build: BuildFragmentDocument }) => {
     const { viewMode } = useBuildDiffViewModeState();
diff --git a/apps/frontend/src/pages/Build/BuildDetailToolbar.tsx b/apps/frontend/src/pages/Build/BuildDetailToolbar.tsx
index 3b94d005a..77412b84e 100644
--- a/apps/frontend/src/pages/Build/BuildDetailToolbar.tsx
+++ b/apps/frontend/src/pages/Build/BuildDetailToolbar.tsx
@@ -20,6 +20,7 @@ import { ViewportIndicator } from "./metadata/ViewportIndicator";
 import { FitToggle } from "./toolbar/FitToggle";
 import { NextButton, PreviousButton } from "./toolbar/NavButtons";
 import { OverlayToggle } from "./toolbar/OverlayToggle";
+import { SettingsButton } from "./toolbar/SettingsButton";
 import { TrackButtons } from "./toolbar/TrackButtons";
 import { SplitViewToggle, ViewToggle } from "./toolbar/ViewToggle";
 
@@ -145,6 +146,8 @@ export const BuildDetailToolbar = memo(function BuildDetailToolbar({
             </>
           )}
         />
+        <Separator orientation="vertical" className="mx-1 !h-6" />
+        <SettingsButton />
       </div>
     </div>
   );
diff --git a/apps/frontend/src/pages/Build/BuildDiffColorState.tsx b/apps/frontend/src/pages/Build/BuildDiffColorState.tsx
new file mode 100644
index 000000000..a2d0baa3e
--- /dev/null
+++ b/apps/frontend/src/pages/Build/BuildDiffColorState.tsx
@@ -0,0 +1,54 @@
+import { createContext, useContext, useMemo } from "react";
+import { invariant } from "@argos/util/invariant";
+
+import { useStorageState } from "@/util/useStorageState";
+
+type DiffColorContextValue = {
+  color: string;
+  setColor: React.Dispatch<React.SetStateAction<string>>;
+  opacity: number;
+  setOpacity: React.Dispatch<React.SetStateAction<number>>;
+};
+
+const DiffColorContext = createContext<DiffColorContextValue | null>(null);
+
+export function useBuildDiffColorState() {
+  const context = useContext(DiffColorContext);
+  invariant(
+    context,
+    "useBuildDiffColorState must be used within a BuildDiffColorStateProvider",
+  );
+  return context;
+}
+
+export function useBuildDiffColorStyle() {
+  const { color, opacity } = useBuildDiffColorState();
+  return {
+    filter: `drop-shadow(0 2000px 0 ${color})`,
+    transform: "translateY(-2000px)",
+    overflow: "hidden",
+    opacity,
+  };
+}
+
+export function BuildDiffColorStateProvider(props: {
+  children: React.ReactNode;
+}) {
+  const [color, setColor] = useStorageState(
+    "preferences.overlay.color",
+    "#FD3A4A",
+  );
+  const [opacity, setOpacity] = useStorageState(
+    "preferences.overlay.opacity",
+    0.8,
+  );
+  const value = useMemo(
+    (): DiffColorContextValue => ({ color, setColor, opacity, setOpacity }),
+    [color, setColor, opacity, setOpacity],
+  );
+  return (
+    <DiffColorContext.Provider value={value}>
+      {props.children}
+    </DiffColorContext.Provider>
+  );
+}
diff --git a/apps/frontend/src/pages/Build/BuildDiffList.tsx b/apps/frontend/src/pages/Build/BuildDiffList.tsx
index a258b2df9..09fdf62d1 100644
--- a/apps/frontend/src/pages/Build/BuildDiffList.tsx
+++ b/apps/frontend/src/pages/Build/BuildDiffList.tsx
@@ -30,8 +30,9 @@ import { Badge } from "@/ui/Badge";
 import { Button, ButtonIcon, ButtonProps } from "@/ui/Button";
 import { HotkeyTooltip } from "@/ui/HotkeyTooltip";
 import { Truncable } from "@/ui/Truncable";
-import { TwicPicture } from "@/ui/TwicPicture";
+import { TwicPicture, TwicPictureProps } from "@/ui/TwicPicture";
 
+import { useBuildDiffColorStyle } from "./BuildDiffColorState";
 import { getGroupLabel } from "./BuildDiffGroup";
 import {
   Diff,
@@ -309,10 +310,9 @@ const DiffImage = memo(({ diff }: { diff: Diff }) => {
             <TwicPicture
               key={compareKey}
               {...compareAttrs}
-              className="absolute w-full"
+              className="opacity-disabled absolute w-full"
             />
-            <div className="bg-app absolute inset-0 opacity-70" />
-            <TwicPicture
+            <DiffPicture
               key={diffKey}
               {...diffAttrs}
               className="relative z-10 max-h-full w-full"
@@ -326,6 +326,11 @@ const DiffImage = memo(({ diff }: { diff: Diff }) => {
   }
 });
 
+function DiffPicture(props: TwicPictureProps) {
+  const style = useBuildDiffColorStyle();
+  return <TwicPicture {...props} style={{ ...style, ...props.style }} />;
+}
+
 const CardStack = ({
   isFirst,
   isLast,
diff --git a/apps/frontend/src/pages/Build/BuildHotkeys.tsx b/apps/frontend/src/pages/Build/BuildHotkeys.tsx
index a9bf871f8..ef6b9449a 100644
--- a/apps/frontend/src/pages/Build/BuildHotkeys.tsx
+++ b/apps/frontend/src/pages/Build/BuildHotkeys.tsx
@@ -183,6 +183,12 @@ export function useBuildHotkey(
         return;
       }
 
+      if (
+        document.getElementById("root")?.getAttribute("aria-hidden") === "true"
+      ) {
+        return;
+      }
+
       // Ignore key events from menu & menuitem elements
       if (
         event.target instanceof HTMLElement &&
diff --git a/apps/frontend/src/pages/Build/BuildPage.tsx b/apps/frontend/src/pages/Build/BuildPage.tsx
index b7de2de3d..b24fddc9d 100644
--- a/apps/frontend/src/pages/Build/BuildPage.tsx
+++ b/apps/frontend/src/pages/Build/BuildPage.tsx
@@ -5,6 +5,7 @@ import { PaymentBanner } from "@/containers/PaymentBanner";
 import { graphql } from "@/gql";
 
 import { BuildContextProvider } from "./BuildContext";
+import { BuildDiffColorStateProvider } from "./BuildDiffColorState";
 import { BuildDiffProvider } from "./BuildDiffState";
 import { BuildHotkeysDialog } from "./BuildHotkeys";
 import { useBuildHotkeysDialogState } from "./BuildHotkeysDialogState";
@@ -83,39 +84,41 @@ export const BuildPage = ({ params }: { params: BuildParams }) => {
   return (
     <BuildContextProvider permissions={data?.project?.permissions ?? null}>
       <BuildDiffProvider params={params} build={build}>
-        <BuildReviewStateProvider
-          params={params}
-          buildStatus={data?.project?.build?.status ?? null}
-        >
-          <BuildReviewDialogProvider project={data?.project ?? null}>
-            {hotkeysDialog && <BuildHotkeysDialog state={hotkeysDialog} />}
-            <div className="flex h-screen min-h-0 flex-col">
-              {data?.project?.account && (
-                <>
-                  <PaymentBanner account={data.project.account} />
-                  <OvercapacityBanner
-                    account={data.project.account}
-                    accountSlug={params.accountSlug}
-                  />
-                </>
-              )}
-              <BuildHeader
-                buildNumber={params.buildNumber}
-                accountSlug={params.accountSlug}
-                projectName={params.projectName}
-                build={build}
-                project={data?.project ?? null}
-              />
-              {project && build ? (
-                <BuildWorkspace
-                  params={params}
+        <BuildDiffColorStateProvider>
+          <BuildReviewStateProvider
+            params={params}
+            buildStatus={data?.project?.build?.status ?? null}
+          >
+            <BuildReviewDialogProvider project={data?.project ?? null}>
+              {hotkeysDialog && <BuildHotkeysDialog state={hotkeysDialog} />}
+              <div className="flex h-screen min-h-0 flex-col">
+                {data?.project?.account && (
+                  <>
+                    <PaymentBanner account={data.project.account} />
+                    <OvercapacityBanner
+                      account={data.project.account}
+                      accountSlug={params.accountSlug}
+                    />
+                  </>
+                )}
+                <BuildHeader
+                  buildNumber={params.buildNumber}
+                  accountSlug={params.accountSlug}
+                  projectName={params.projectName}
                   build={build}
-                  project={project}
+                  project={data?.project ?? null}
                 />
-              ) : null}
-            </div>
-          </BuildReviewDialogProvider>
-        </BuildReviewStateProvider>
+                {project && build ? (
+                  <BuildWorkspace
+                    params={params}
+                    build={build}
+                    project={project}
+                  />
+                ) : null}
+              </div>
+            </BuildReviewDialogProvider>
+          </BuildReviewStateProvider>
+        </BuildDiffColorStateProvider>
       </BuildDiffProvider>
     </BuildContextProvider>
   );
diff --git a/apps/frontend/src/pages/Build/toolbar/SettingsButton.tsx b/apps/frontend/src/pages/Build/toolbar/SettingsButton.tsx
new file mode 100644
index 000000000..a469eb828
--- /dev/null
+++ b/apps/frontend/src/pages/Build/toolbar/SettingsButton.tsx
@@ -0,0 +1,98 @@
+import { memo } from "react";
+import { invariant } from "@argos/util/invariant";
+import { PaintbrushIcon } from "lucide-react";
+import { Heading } from "react-aria-components";
+
+import {
+  ColorSwatch,
+  ColorSwatchPicker,
+  ColorSwatchPickerItem,
+} from "@/ui/ColorPicker";
+import { Dialog, DialogBody, DialogTrigger } from "@/ui/Dialog";
+import { IconButton } from "@/ui/IconButton";
+import { Label } from "@/ui/Label";
+import { Popover } from "@/ui/Popover";
+import { Slider, SliderOutput, SliderThumb, SliderTrack } from "@/ui/Slider";
+import { Tooltip } from "@/ui/Tooltip";
+
+import { useBuildDiffColorState } from "../BuildDiffColorState";
+
+export const SettingsButton = memo(() => {
+  return (
+    <DialogTrigger>
+      <Tooltip content="Customize overlay color and opacity">
+        <IconButton>
+          <PaintbrushIcon />
+        </IconButton>
+      </Tooltip>
+      <Popover placement="bottom end">
+        <OverlaySettingsDialog />
+      </Popover>
+    </DialogTrigger>
+  );
+});
+
+function OverlaySettingsDialog() {
+  const { setColor, color, opacity, setOpacity } = useBuildDiffColorState();
+  return (
+    <Dialog className="w-80 select-none">
+      <DialogBody>
+        <Heading slot="title" level={2} className="mb-4 font-medium">
+          Customize overlay
+        </Heading>
+        <div className="flex flex-col gap-6">
+          <div>
+            <Label>Color</Label>
+            <ColorSwatchPicker
+              value={color}
+              onChange={(color) => setColor(color.toString("css"))}
+            >
+              <ColorSwatchPickerItem color="#FF5470">
+                <ColorSwatch />
+              </ColorSwatchPickerItem>
+              <ColorSwatchPickerItem color="#FF007C">
+                <ColorSwatch />
+              </ColorSwatchPickerItem>
+              <ColorSwatchPickerItem color="#FD3A4A">
+                <ColorSwatch />
+              </ColorSwatchPickerItem>
+              <ColorSwatchPickerItem color="#FFAA1D">
+                <ColorSwatch />
+              </ColorSwatchPickerItem>
+              <ColorSwatchPickerItem color="#299617">
+                <ColorSwatch />
+              </ColorSwatchPickerItem>
+              <ColorSwatchPickerItem color="#2243B6">
+                <ColorSwatch />
+              </ColorSwatchPickerItem>
+              <ColorSwatchPickerItem color="#5DADEC">
+                <ColorSwatch />
+              </ColorSwatchPickerItem>
+              <ColorSwatchPickerItem color="#5946B2">
+                <ColorSwatch />
+              </ColorSwatchPickerItem>
+              <ColorSwatchPickerItem color="#000">
+                <ColorSwatch />
+              </ColorSwatchPickerItem>
+            </ColorSwatchPicker>
+          </div>
+          <Slider
+            minValue={50}
+            maxValue={100}
+            value={opacity * 100}
+            onChange={(value) => {
+              invariant(typeof value === "number", "Opacity must be a number");
+              setOpacity(value / 100);
+            }}
+          >
+            <Label>Opacity</Label>
+            <SliderOutput />
+            <SliderTrack>
+              <SliderThumb />
+            </SliderTrack>
+          </Slider>
+        </div>
+      </DialogBody>
+    </Dialog>
+  );
+}
diff --git a/apps/frontend/src/pages/Signup.tsx b/apps/frontend/src/pages/Signup.tsx
index cf9c0ae2b..0255b142f 100644
--- a/apps/frontend/src/pages/Signup.tsx
+++ b/apps/frontend/src/pages/Signup.tsx
@@ -6,7 +6,7 @@ import { useIsLoggedIn } from "@/containers/Auth";
 import { LoginButtons } from "@/containers/LoginButtons";
 import { Container } from "@/ui/Container";
 import { Details, Summary } from "@/ui/Details";
-import { FormLabel } from "@/ui/FormLabel";
+import { Label } from "@/ui/Label";
 import { RadioField } from "@/ui/Radio";
 import { TextInput } from "@/ui/TextInput";
 
@@ -90,9 +90,9 @@ const SignupPage = () => {
 
           {accountType && (
             <div>
-              <FormLabel htmlFor="name">
+              <Label htmlFor="name">
                 {proAccountSelected ? "Team Name" : "Your Name"}
-              </FormLabel>
+              </Label>
               <TextInput
                 ref={nameRef}
                 id="name"
diff --git a/apps/frontend/src/ui/ColorPicker.tsx b/apps/frontend/src/ui/ColorPicker.tsx
new file mode 100644
index 000000000..68cce3a35
--- /dev/null
+++ b/apps/frontend/src/ui/ColorPicker.tsx
@@ -0,0 +1,53 @@
+import { forwardRef } from "react";
+import { clsx } from "clsx";
+import {
+  ColorSwatchPickerItemProps,
+  ColorSwatchPickerProps,
+  ColorSwatchProps,
+  ColorSwatch as RACColorSwatch,
+  ColorSwatchPicker as RACColorSwatchPicker,
+  ColorSwatchPickerItem as RACColorSwatchPickerItem,
+} from "react-aria-components";
+
+export const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(
+  props: ColorSwatchPickerProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  return (
+    <RACColorSwatchPicker
+      ref={ref}
+      {...props}
+      className={clsx("flex flex-wrap gap-2", props.className)}
+    />
+  );
+});
+
+export const ColorSwatchPickerItem = forwardRef(function ColorSwatchPickerItem(
+  props: ColorSwatchPickerItemProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  return (
+    <RACColorSwatchPickerItem
+      ref={ref}
+      {...props}
+      className={clsx(
+        "rac-focus relative w-fit rounded outline-none forced-color-adjust-none",
+        "data-[selected]:ring-primary-active data-[selected]:ring-1 data-[selected]:ring-offset-1",
+        props.className,
+      )}
+    />
+  );
+});
+
+export const ColorSwatch = forwardRef(function ColorSwatch(
+  props: ColorSwatchProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  return (
+    <RACColorSwatch
+      ref={ref}
+      {...props}
+      className={clsx("size-6 rounded border", props.className)}
+    />
+  );
+});
diff --git a/apps/frontend/src/ui/FormLabel.tsx b/apps/frontend/src/ui/FormLabel.tsx
deleted file mode 100644
index 811d17e99..000000000
--- a/apps/frontend/src/ui/FormLabel.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { HTMLProps } from "react";
-import { clsx } from "clsx";
-
-export const FormLabel = ({
-  className,
-  invalid,
-  ...props
-}: {
-  invalid?: boolean;
-} & HTMLProps<HTMLLabelElement>) => {
-  return (
-    <label
-      className={clsx(
-        className,
-        "mb-2 inline-block text-sm font-medium",
-        invalid ? "text-danger-low" : "text-low",
-      )}
-      {...props}
-    />
-  );
-};
diff --git a/apps/frontend/src/ui/FormTextInput.tsx b/apps/frontend/src/ui/FormTextInput.tsx
index b56134986..1975b1b75 100644
--- a/apps/frontend/src/ui/FormTextInput.tsx
+++ b/apps/frontend/src/ui/FormTextInput.tsx
@@ -2,7 +2,7 @@ import { forwardRef, useId } from "react";
 import { useFormContext } from "react-hook-form";
 
 import { FormError } from "./FormError";
-import { FormLabel } from "./FormLabel";
+import { Label } from "./Label";
 import { TextInput, TextInputProps } from "./TextInput";
 
 type FormTextInputProps = {
@@ -33,9 +33,9 @@ export const FormTextInput = forwardRef<HTMLInputElement, FormTextInputProps>(
     return (
       <div className={className}>
         {!hiddenLabel && (
-          <FormLabel htmlFor={id} invalid={invalid}>
+          <Label htmlFor={id} invalid={invalid}>
             {label}
-          </FormLabel>
+          </Label>
         )}
         <TextInput
           ref={ref}
diff --git a/apps/frontend/src/ui/Label.tsx b/apps/frontend/src/ui/Label.tsx
new file mode 100644
index 000000000..3b1061692
--- /dev/null
+++ b/apps/frontend/src/ui/Label.tsx
@@ -0,0 +1,28 @@
+import { forwardRef } from "react";
+import { clsx } from "clsx";
+import {
+  Label as RACLabel,
+  LabelProps as RACLabelProps,
+} from "react-aria-components";
+
+export type LabelProps = RACLabelProps & {
+  invalid?: boolean;
+};
+
+export const Label = forwardRef(function Label(
+  props: LabelProps,
+  ref: React.ForwardedRef<HTMLLabelElement>,
+) {
+  const { invalid, ...rest } = props;
+  return (
+    <RACLabel
+      ref={ref}
+      {...rest}
+      className={clsx(
+        "mb-2 inline-block text-sm font-medium",
+        invalid ? "text-danger-low" : "text-low",
+        props.className,
+      )}
+    />
+  );
+});
diff --git a/apps/frontend/src/ui/Menu.tsx b/apps/frontend/src/ui/Menu.tsx
index c69338d84..c0d0d9df5 100644
--- a/apps/frontend/src/ui/Menu.tsx
+++ b/apps/frontend/src/ui/Menu.tsx
@@ -31,8 +31,8 @@ export function Menu<T extends object>({ className, ...props }: MenuProps<T>) {
 type MenuItemVariant = "default" | "danger";
 
 const menuItemVariantClasses: Record<MenuItemVariant, string> = {
-  default: "text hover:bg-active focus:bg-active",
-  danger: "text-danger-low hover:bg-danger-active focus:bg-danger-active",
+  default: "text hover:bg-hover focus:bg-hover",
+  danger: "text-danger-low hover:bg-danger-hover focus:bg-danger-hover",
 };
 
 export function MenuItem(
@@ -46,7 +46,7 @@ export function MenuItem(
       className={clsx(
         menuItemVariantClasses[props.variant ?? "default"],
         props.href ? "cursor-pointer" : "cursor-default",
-        "aria-disabled:opacity-disabled flex items-center rounded px-3 py-1.5 text-sm transition focus:outline-none aria-disabled:hover:bg-transparent",
+        "aria-disabled:opacity-disabled flex items-center rounded px-3 py-1.5 text-sm focus:outline-none aria-disabled:hover:bg-transparent",
       )}
       {...props}
     >
diff --git a/apps/frontend/src/ui/Popover.tsx b/apps/frontend/src/ui/Popover.tsx
index aed4271c8..ec28bc1f9 100644
--- a/apps/frontend/src/ui/Popover.tsx
+++ b/apps/frontend/src/ui/Popover.tsx
@@ -1,3 +1,4 @@
+import { forwardRef } from "react";
 import { clsx } from "clsx";
 import {
   PopoverProps,
@@ -9,16 +10,20 @@ const popoverStyles = (values: PopoverRenderProps) =>
   clsx(
     "bg-subtle z-50 bg-clip-padding border rounded-lg p-1 fill-mode-forwards flex",
     "data-[placement=bottom]:origin-top data-[placement=top]:origin-bottom data-[placement=left]:origin-right data-[placement=right]:origin-left",
-    values.isEntering && "animate-in fade-in zoom-in-95",
+    values.isEntering && "animate-in fade-in",
     values.isExiting && "animate-out fade-out zoom-out-95",
   );
 
-export function Popover({ className, ...props }: PopoverProps) {
+export const Popover = forwardRef(function Popover(
+  { className, ...props }: PopoverProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
   return (
     <RACPopover
+      ref={ref}
       offset={4}
       className={(values) => clsx(popoverStyles(values), className)}
       {...props}
     />
   );
-}
+});
diff --git a/apps/frontend/src/ui/Slider.tsx b/apps/frontend/src/ui/Slider.tsx
new file mode 100644
index 000000000..4b640c22e
--- /dev/null
+++ b/apps/frontend/src/ui/Slider.tsx
@@ -0,0 +1,84 @@
+import { forwardRef } from "react";
+import { clsx } from "clsx";
+import {
+  Slider as RACSlider,
+  SliderOutput as RACSliderOutput,
+  SliderOutputProps as RACSliderOutputProps,
+  SliderProps as RACSliderProps,
+  SliderThumb as RACSliderThumb,
+  SliderThumbProps as RACSliderThumbProps,
+  SliderTrack as RACSliderTrack,
+  SliderTrackProps as RACSliderTrackProps,
+} from "react-aria-components";
+
+export type SliderProps = RACSliderProps;
+
+export const Slider = forwardRef(function Slider(
+  props: SliderProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  return (
+    <RACSlider
+      ref={ref}
+      {...props}
+      className={clsx(
+        "grid grid-cols-[1fr_auto] flex-col [grid-template-areas:'label_output''track_track'] [&>label]:[grid-area:label]",
+        props.className,
+      )}
+    />
+  );
+});
+
+export type SliderOutputProps = RACSliderOutputProps;
+
+export const SliderOutput = forwardRef(function SliderOutput(
+  props: SliderOutputProps,
+  ref: React.ForwardedRef<HTMLOutputElement>,
+) {
+  return (
+    <RACSliderOutput
+      ref={ref}
+      {...props}
+      className={clsx(
+        "text-low text-sm tabular-nums [grid-area:output]",
+        props.className,
+      )}
+    />
+  );
+});
+
+export type SliderTrackProps = RACSliderTrackProps;
+
+export const SliderTrack = forwardRef(function SliderTrack(
+  props: SliderTrackProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  return (
+    <RACSliderTrack
+      ref={ref}
+      {...props}
+      className={clsx(
+        "before:bg-border relative h-4 w-full [grid-area:track] before:absolute before:top-1/2 before:block before:h-1 before:w-full before:-translate-y-1/2 before:rounded before:content-['']",
+        props.className,
+      )}
+    />
+  );
+});
+
+export type SliderThumbProps = RACSliderThumbProps;
+
+export const SliderThumb = forwardRef(function SliderThumb(
+  props: SliderThumbProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  return (
+    <RACSliderThumb
+      ref={ref}
+      {...props}
+      className={clsx(
+        "bg-primary-solid data-[dragging]:bg-primary-solid-active rac-focus top-1/2 size-4 rounded-full",
+        props.className,
+      )}
+    />
+  );
+});
diff --git a/apps/frontend/src/ui/TwicPicture.tsx b/apps/frontend/src/ui/TwicPicture.tsx
index e502eca14..f352dc782 100644
--- a/apps/frontend/src/ui/TwicPicture.tsx
+++ b/apps/frontend/src/ui/TwicPicture.tsx
@@ -1,12 +1,14 @@
 import { forwardRef } from "react";
 
+export type TwicPictureProps = React.ImgHTMLAttributes<HTMLImageElement> & {
+  src: string;
+  transforms?: string[];
+  original?: boolean;
+};
+
 export const TwicPicture = forwardRef(function TwicPicture(
-  props: React.ImgHTMLAttributes<HTMLImageElement> & {
-    src: string;
-    transforms?: string[];
-    original?: boolean;
-  },
-  ref: React.Ref<HTMLImageElement>,
+  props: TwicPictureProps,
+  ref: React.ForwardedRef<HTMLImageElement>,
 ) {
   const { src, transforms = [], original, ...rest } = props;
   if (original) {
diff --git a/apps/frontend/src/util/color-detection/hook.ts b/apps/frontend/src/util/color-detection/hook.ts
index 07fb3366d..801d73574 100644
--- a/apps/frontend/src/util/color-detection/hook.ts
+++ b/apps/frontend/src/util/color-detection/hook.ts
@@ -8,7 +8,9 @@ import type { Rect } from "./types";
 export function useColoredRects(input: { url: string }): null | Rect[] {
   const [rects, setRects] = useState<null | Rect[]>(null);
   useEffect(() => {
-    const worker = new Worker(new URL("./worker.ts", import.meta.url));
+    const worker = new Worker(new URL("./worker.ts", import.meta.url), {
+      type: "module",
+    });
     worker.onmessage = (event) => {
       setRects(event.data);
     };