From 0fda7147bed8534d5f9cd083cb8d18457778a63a Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sun, 24 Mar 2024 11:23:39 -0600
Subject: [PATCH] UI tweaks (#10645)

* Use green chip instead of dimming to show that item has been reviewed

* Redesign log page to use similar style to events

* Use icon only in mobile

* Remove unused
---
 .../player/PreviewThumbnailPlayer.tsx         |  7 +-
 web/src/pages/Logs.tsx                        | 73 ++++++++-----------
 2 files changed, 35 insertions(+), 45 deletions(-)

diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
index 3c1648e9d..52b3e7b53 100644
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@@ -202,7 +202,9 @@ export default function PreviewThumbnailPlayer({
               <div className="flex h-full justify-between items-start mx-3 pb-1 text-white text-sm ">
                 {(review.severity == "alert" ||
                   review.severity == "detection") && (
-                  <Chip className="absolute top-2 left-2 flex gap-1 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 z-0">
+                  <Chip
+                    className={`absolute top-2 left-2 flex gap-1 bg-gradient-to-br ${review.has_been_reviewed ? "from-green-600 to-green-700 bg-green-600" : "from-gray-400 to-gray-500 bg-gray-500"} z-0`}
+                  >
                     {review.data.objects.map((object) => {
                       return getIconForLabel(object, "size-3 text-white");
                     })}
@@ -225,9 +227,6 @@ export default function PreviewThumbnailPlayer({
           </>
         )}
       </div>
-      {!playingBack && imgLoaded && review.has_been_reviewed && (
-        <div className="absolute inset-0 z-10 bg-black bg-opacity-60" />
-      )}
     </div>
   );
 }
diff --git a/web/src/pages/Logs.tsx b/web/src/pages/Logs.tsx
index c09f71ab0..77b9f05f0 100644
--- a/web/src/pages/Logs.tsx
+++ b/web/src/pages/Logs.tsx
@@ -1,16 +1,8 @@
 import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuLabel,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import Heading from "@/components/ui/heading";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import copy from "copy-to-clipboard";
 import { useCallback, useMemo, useRef, useState } from "react";
+import { LuCopy } from "react-icons/lu";
 import useSWR from "swr";
 
 const logTypes = ["frigate", "go2rtc", "nginx"] as const;
@@ -61,38 +53,37 @@ function Logs() {
   );
 
   return (
-    <div className="relative w-full h-full overflow-hidden">
+    <div className="size-full flex flex-col pr-2">
       <div className="flex justify-between items-center">
-        <Heading className="first:mt-2" as="h2">
-          Logs
-        </Heading>
+        <ToggleGroup
+          className="*:px-3 *:py-4 *:rounded-2xl"
+          type="single"
+          size="sm"
+          value={logService}
+          onValueChange={(value: LogType) =>
+            value ? setLogService(value) : null
+          } // don't allow the severity to be unselected
+        >
+          {Object.values(logTypes).map((item) => (
+            <ToggleGroupItem
+              key={item}
+              className={`flex items-center justify-between gap-2 ${logService == item ? "" : "text-gray-500"}`}
+              value={item}
+              aria-label={`Select ${item}`}
+            >
+              <div className="capitalize">{`${item} Logs`}</div>
+            </ToggleGroupItem>
+          ))}
+        </ToggleGroup>
         <div>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button className="mx-2 capitalize" variant="outline">
-                {logService} Logs
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent>
-              <DropdownMenuLabel>Select Logs To View</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuRadioGroup
-                value={logService}
-                onValueChange={(type) => setLogService(type as LogType)}
-              >
-                {Object.values(logTypes).map((item) => (
-                  <DropdownMenuRadioItem
-                    className="capitalize"
-                    key={item}
-                    value={item}
-                  >
-                    {item} Logs
-                  </DropdownMenuRadioItem>
-                ))}
-              </DropdownMenuRadioGroup>
-            </DropdownMenuContent>
-          </DropdownMenu>
-          <Button onClick={handleCopyLogs}>Copy to Clipboard</Button>
+          <Button
+            className="flex justify-between items-center gap-2"
+            size="sm"
+            onClick={handleCopyLogs}
+          >
+            <LuCopy />
+            <div className="hidden md:block">Copy to Clipboard</div>
+          </Button>
         </div>
       </div>
 
@@ -113,7 +104,7 @@ function Logs() {
 
       <div
         ref={contentRef}
-        className="absolute left-0 top-16 bottom-2 right-2 overflow-auto font-mono text-sm bg-secondary rounded p-2 whitespace-pre-wrap"
+        className="w-full h-min my-2 font-mono text-sm bg-secondary rounded p-2 whitespace-pre-wrap overflow-auto"
       >
         {logs}
         <div ref={endLogRef} />