From 56cc28993cb12a7eeee64c8c4d8ad2893d32d18f Mon Sep 17 00:00:00 2001
From: Manuel Raimann <raimannma@outlook.de>
Date: Tue, 11 Feb 2025 19:13:20 +0100
Subject: [PATCH] Revert "Add opacity control to widget settings and match
 history display"

This reverts commit 689b5cea
---
 app/components/widget-builder.tsx             | 23 -------------------
 app/components/widgets/MatchHistory.tsx       |  3 +--
 app/components/widgets/box.tsx                | 10 +-------
 ...widgets.$region.$accountId.$widgetType.tsx |  4 +---
 app/types/match-history.ts                    |  1 -
 app/types/widget.ts                           |  1 -
 6 files changed, 3 insertions(+), 39 deletions(-)

diff --git a/app/components/widget-builder.tsx b/app/components/widget-builder.tsx
index bd42b3f..5eaf3ec 100644
--- a/app/components/widget-builder.tsx
+++ b/app/components/widget-builder.tsx
@@ -22,7 +22,6 @@ type PreviewBackgroundColor = RGB | RGBA | HEX;
 export default function WidgetBuilder({ region, accountId }: WidgetBuilderProps) {
   const [widgetType, setWidgetType] = useState<string>(widgetTypes[0]);
   const [theme, setTheme] = useState<Theme>("dark");
-  const [opacity, setOpacity] = useState<number>(100);
   const [widgetUrl, setWidgetUrl] = useState<string | null>(null);
   const [widgetPreview, setWidgetPreview] = useState<ReactElement | null>(null);
   const [widgetPreviewBackgroundImage, setWidgetPreviewBackgroundImage] = useState<boolean>(true);
@@ -58,7 +57,6 @@ export default function WidgetBuilder({ region, accountId }: WidgetBuilderProps)
     if (variables.length > 0) url.searchParams.set("vars", variables.join(","));
     if (labels.length > 0) url.searchParams.set("labels", labels.join(","));
     url.searchParams.set("theme", theme);
-    url.searchParams.set("opacity", opacity.toString());
     url.searchParams.set("showHeader", showHeader.toString());
     url.searchParams.set("showBranding", showBranding.toString());
     url.searchParams.set("showMatchHistory", showMatchHistory.toString());
@@ -78,7 +76,6 @@ export default function WidgetBuilder({ region, accountId }: WidgetBuilderProps)
             labels={labels}
             extraArgs={extraArgs}
             theme={theme}
-            opacity={opacity}
             showHeader={showHeader}
             showBranding={showBranding}
             showMatchHistory={showMatchHistory}
@@ -98,7 +95,6 @@ export default function WidgetBuilder({ region, accountId }: WidgetBuilderProps)
     labels,
     extraArgs,
     theme,
-    opacity,
     showHeader,
     showBranding,
     matchHistoryShowsToday,
@@ -151,25 +147,6 @@ export default function WidgetBuilder({ region, accountId }: WidgetBuilderProps)
           </select>
         </div>
 
-        <div>
-          <label htmlFor="opacity" className="block text-sm font-medium text-gray-700">
-            Opacity
-          </label>
-          <div className="flex items-center gap-2">
-            <input
-              id="opacity"
-              type="range"
-              min={0}
-              max={100}
-              step={5}
-              value={opacity}
-              onChange={(e) => setOpacity(Number.parseInt(e.target.value))}
-              className="rounded border-gray-300 bg-gray-200 w-min"
-            />
-            <span className="text-sm font-medium text-gray-700">{opacity.toFixed(0)}%</span>
-          </div>
-        </div>
-
         <div className="space-y-4">
           <div className="flex items-center gap-2">
             <input
diff --git a/app/components/widgets/MatchHistory.tsx b/app/components/widgets/MatchHistory.tsx
index a2d5717..1293b84 100644
--- a/app/components/widgets/MatchHistory.tsx
+++ b/app/components/widgets/MatchHistory.tsx
@@ -5,7 +5,7 @@ import { UPDATE_INTERVAL_MS } from "~/constants/widget";
 import { cn } from "~/lib/utils";
 import type { Hero, Match, MatchHistoryProps } from "~/types/match-history";
 
-export const MatchHistory: FC<MatchHistoryProps> = ({ theme, opacity, numMatches, accountId, refresh }) => {
+export const MatchHistory: FC<MatchHistoryProps> = ({ theme, numMatches, accountId, refresh }) => {
   const [matches, setMatches] = useState<Match[]>([]);
   const [heroes, setHeroes] = useState<Map<number, string>>(new Map());
   const [loading, setLoading] = useState(true);
@@ -62,7 +62,6 @@ export const MatchHistory: FC<MatchHistoryProps> = ({ theme, opacity, numMatches
         "flex gap-0.5 justify-start items-center h-9 rounded-t-xl pt-1",
         theme === "light" ? "bg-white" : theme === "dark" ? "bg-[#1A1B1E]" : "text-white",
       )}
-      style={{ opacity: opacity / 100 }}
     >
       {[...matches].map((match) => {
         const heroImage = heroes.get(match.hero_id);
diff --git a/app/components/widgets/box.tsx b/app/components/widgets/box.tsx
index 8a13549..a916027 100644
--- a/app/components/widgets/box.tsx
+++ b/app/components/widgets/box.tsx
@@ -13,7 +13,6 @@ export const BoxWidget: FC<BoxWidgetProps> = ({
   labels = DEFAULT_LABELS,
   extraArgs = {},
   theme = "dark",
-  opacity = 100,
   showHeader = true,
   refreshInterval = UPDATE_INTERVAL_MS,
   showBranding = true,
@@ -98,13 +97,7 @@ export const BoxWidget: FC<BoxWidgetProps> = ({
             className="grow-1 w-0 overflow-clip
           "
           >
-            <MatchHistory
-              theme={theme}
-              opacity={opacity}
-              refresh={refreshChildren}
-              numMatches={numMatchesToShow}
-              accountId={accountId}
-            />
+            <MatchHistory theme={theme} refresh={refreshChildren} numMatches={numMatchesToShow} accountId={accountId} />
           </div>
         </div>
       )}
@@ -122,7 +115,6 @@ export const BoxWidget: FC<BoxWidgetProps> = ({
           "shadow-lg",
           THEME_STYLES[theme].container,
         )}
-        style={{ opacity: opacity / 100 }}
       >
         {shouldShowHeader && (
           <div
diff --git a/app/routes/widgets.$region.$accountId.$widgetType.tsx b/app/routes/widgets.$region.$accountId.$widgetType.tsx
index e5fb591..b76ca27 100644
--- a/app/routes/widgets.$region.$accountId.$widgetType.tsx
+++ b/app/routes/widgets.$region.$accountId.$widgetType.tsx
@@ -50,12 +50,11 @@ export default function Widget() {
       const variables = searchParams.get("vars")?.split(",");
       const labels = searchParams.get("labels")?.split(",") ?? variables?.map(snakeToPretty);
       const theme = (searchParams.get("theme") ?? "dark") as Theme;
-      const opacity = Number.parseFloat(searchParams.get("opacity") ?? "100");
       const showHeader = searchParams.get("showHeader") !== "false";
       const showBranding = searchParams.get("showBranding") !== "false";
       const showMatchHistory = searchParams.get("showMatchHistory") !== "false";
       const matchHistoryShowsToday = searchParams.get("matchHistoryShowsToday") !== "false";
-      const numMatches = Number.parseInt(searchParams.get("numMatches") ?? "10");
+      const numMatches = Number.parseInt(searchParams.get("numMatches") ?? "10", 10);
       const extraArgs = Object.fromEntries(
         Array.from(searchParams.entries()).filter(
           ([key]) =>
@@ -80,7 +79,6 @@ export default function Widget() {
           labels={labels}
           extraArgs={extraArgs}
           theme={theme}
-          opacity={opacity}
           showHeader={showHeader}
           showBranding={showBranding}
           showMatchHistory={showMatchHistory}
diff --git a/app/types/match-history.ts b/app/types/match-history.ts
index 9a945f9..a60653c 100644
--- a/app/types/match-history.ts
+++ b/app/types/match-history.ts
@@ -14,7 +14,6 @@ export type Hero = {
 
 export type MatchHistoryProps = {
   theme: string;
-  opacity: number;
   numMatches?: number;
   accountId: string;
   refresh: number;
diff --git a/app/types/widget.ts b/app/types/widget.ts
index 36cb939..77bb9bd 100644
--- a/app/types/widget.ts
+++ b/app/types/widget.ts
@@ -21,7 +21,6 @@ export type BoxWidgetProps = {
   labels?: string[];
   extraArgs?: Record<string, string>;
   theme?: Theme;
-  opacity?: number;
   showHeader?: boolean;
   refreshInterval?: number;
   showBranding?: boolean;