feat: changes overlay settings

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}

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();

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>
   );

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>
+  );
+}

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,

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 &&

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>
   );