From 0b16ddeebc5b32e55ba6399ed6d3832f60fe8058 Mon Sep 17 00:00:00 2001
From: 0x464e <36742501+0x464e@users.noreply.github.com>
Date: Wed, 8 Apr 2026 17:31:36 +0300
Subject: [PATCH] Simplify dialog radio buttons

---
 web/public/locales/en/components/dialog.json  |  2 -
 .../overlay/ShareTimestampDialog.tsx          | 74 +++++++++----------
 2 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/web/public/locales/en/components/dialog.json b/web/public/locales/en/components/dialog.json
index 473e401da..0231cfe41 100644
--- a/web/public/locales/en/components/dialog.json
+++ b/web/public/locales/en/components/dialog.json
@@ -103,9 +103,7 @@
       "label": "Share Timestamp",
       "title": "Share Timestamp",
       "description": "Share a timestamped URL of current player position or choose a custom timestamp. Note that this is not a public share URL and is only accessible to users with access to Frigate and this camera.",
-      "current": "Current Player Timestamp",
       "custom": "Custom Timestamp",
-      "customDescription": "Pick a specific point in time to share.",
       "button": "Share Timestamp URL",
       "shareTitle": "Frigate Review Timestamp: {{camera}}"
     },
diff --git a/web/src/components/overlay/ShareTimestampDialog.tsx b/web/src/components/overlay/ShareTimestampDialog.tsx
index 9911bca5c..a49d96ade 100644
--- a/web/src/components/overlay/ShareTimestampDialog.tsx
+++ b/web/src/components/overlay/ShareTimestampDialog.tsx
@@ -150,47 +150,47 @@ export function ShareTimestampContent({
           setSelectedOption(value as "current" | "custom")
         }
       >
-        <div className="space-y-2 rounded-lg border bg-secondary/40 p-3">
-          <div className="flex items-start gap-2">
-            <RadioGroupItem id="share-current" value="current" />
-            <Label className="cursor-pointer space-y-1" htmlFor="share-current">
-              <div className="text-sm font-medium">
-                {t("recording.shareTimestamp.current", {
-                  ns: "components/dialog",
-                })}
-              </div>
-              <div className="text-sm text-muted-foreground">
-                {currentTimestampLabel}
-              </div>
-            </Label>
-          </div>
+        <div className="flex items-start gap-2">
+          <RadioGroupItem
+            className={
+              selectedOption == "current"
+                ? "bg-selected from-selected/50 to-selected/90 text-selected"
+                : "bg-secondary from-secondary/50 to-secondary/90 text-secondary"
+            }
+            id="share-current"
+            value="current"
+          />
+          <Label className="cursor-pointer text-sm" htmlFor="share-current">
+            {currentTimestampLabel}
+          </Label>
         </div>
 
-        <div className="space-y-3 rounded-lg border bg-secondary/40 p-3">
-          <div className="flex items-start gap-2">
-            <RadioGroupItem id="share-custom" value="custom" />
-            <Label className="cursor-pointer space-y-1" htmlFor="share-custom">
-              <div className="text-sm font-medium">
-                {t("recording.shareTimestamp.custom", {
-                  ns: "components/dialog",
-                })}
-              </div>
-              <div className="text-sm text-muted-foreground">
-                {t("recording.shareTimestamp.customDescription", {
-                  ns: "components/dialog",
-                })}
-              </div>
-            </Label>
-          </div>
-          {selectedOption === "custom" && (
-            <CustomTimestampSelector
-              timestamp={customTimestamp}
-              setTimestamp={setCustomTimestamp}
-              label={t("recording.shareTimestamp.custom", {
+        <div className="flex items-start gap-2">
+          <RadioGroupItem
+            className={
+              selectedOption == "custom"
+                ? "bg-selected from-selected/50 to-selected/90 text-selected"
+                : "bg-secondary from-secondary/50 to-secondary/90 text-secondary"
+            }
+            id="share-custom"
+            value="custom"
+          />
+          <div className="space-y-3">
+            <Label className="cursor-pointer text-sm" htmlFor="share-custom">
+              {t("recording.shareTimestamp.custom", {
                 ns: "components/dialog",
               })}
-            />
-          )}
+            </Label>
+            {selectedOption === "custom" && (
+              <CustomTimestampSelector
+                timestamp={customTimestamp}
+                setTimestamp={setCustomTimestamp}
+                label={t("recording.shareTimestamp.custom", {
+                  ns: "components/dialog",
+                })}
+              />
+            )}
+          </div>
         </div>
       </RadioGroup>