From b45f297da9aef369a1be9997173236226809d5e3 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 20 Mar 2024 11:39:41 -0600
Subject: [PATCH] Fix icons for live grid

---
 web/src/components/icons/LiveIcons.tsx   | 42 ++++++++++++++++++++++++
 web/src/views/live/LiveDashboardView.tsx | 22 ++++++-------
 2 files changed, 53 insertions(+), 11 deletions(-)
 create mode 100644 web/src/components/icons/LiveIcons.tsx

diff --git a/web/src/components/icons/LiveIcons.tsx b/web/src/components/icons/LiveIcons.tsx
new file mode 100644
index 000000000..dc491b612
--- /dev/null
+++ b/web/src/components/icons/LiveIcons.tsx
@@ -0,0 +1,42 @@
+type LiveIconProps = {
+  layout?: "list" | "grid";
+};
+
+export function LiveGridIcon({ layout }: LiveIconProps) {
+  return (
+    <div className="size-full flex flex-col gap-0.5 rounded-md overflow-hidden">
+      <div
+        className={`h-1 w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
+      />
+      <div className="h-1 w-full flex gap-0.5">
+        <div
+          className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
+        />
+        <div
+          className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
+        />
+      </div>
+      <div className="h-1 w-full flex gap-0.5">
+        <div
+          className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
+        />
+        <div
+          className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
+        />
+      </div>
+    </div>
+  );
+}
+
+export function LiveListIcon({ layout }: LiveIconProps) {
+  return (
+    <div className="size-full flex flex-col gap-0.5 rounded-md overflow-hidden">
+      <div
+        className={`size-full ${layout == "list" ? "bg-selected" : "bg-muted-foreground"}`}
+      />
+      <div
+        className={`size-full ${layout == "list" ? "bg-selected" : "bg-muted-foreground"}`}
+      />
+    </div>
+  );
+}
diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index 071a9d71e..d5a7401c5 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -1,6 +1,7 @@
 import { useFrigateReviews } from "@/api/ws";
 import Logo from "@/components/Logo";
 import { CameraGroupSelector } from "@/components/filter/CameraGroupSelector";
+import { LiveGridIcon, LiveListIcon } from "@/components/icons/LiveIcons";
 import { AnimatedEventThumbnail } from "@/components/image/AnimatedEventThumbnail";
 import BirdseyeLivePlayer from "@/components/player/BirdseyeLivePlayer";
 import LivePlayer from "@/components/player/LivePlayer";
@@ -12,7 +13,6 @@ import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
 import { ReviewSegment } from "@/types/review";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { isDesktop, isMobile, isSafari } from "react-device-detect";
-import { CiGrid2H, CiGrid31 } from "react-icons/ci";
 import useSWR from "swr";
 
 type LiveDashboardViewProps = {
@@ -89,26 +89,26 @@ export default function LiveDashboardView({
           <CameraGroupSelector />
           <div className="flex items-center gap-1">
             <Button
-              className={
+              className={`p-1 ${
                 layout == "grid"
-                  ? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
-                  : "text-muted-foreground bg-muted"
-              }
+                  ? "bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
+                  : "bg-muted"
+              }`}
               size="xs"
               onClick={() => setLayout("grid")}
             >
-              <CiGrid31 className="m-1" />
+              <LiveGridIcon layout={layout} />
             </Button>
             <Button
-              className={
+              className={`p-1 ${
                 layout == "list"
-                  ? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
-                  : "text-muted-foreground bg-muted"
-              }
+                  ? "bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
+                  : "bg-muted"
+              }`}
               size="xs"
               onClick={() => setLayout("list")}
             >
-              <CiGrid2H className="m-1" />
+              <LiveListIcon layout={layout} />
             </Button>
           </div>
         </div>