Update tailwind css and cleanup classNames (#10107)

* Bump tailwindcss from 3.3.5 to 3.4.1 in /web

Bumps [tailwindcss](https://github.com/tailwindlabs/tailwindcss) from 3.3.5 to 3.4.1.
- [Release notes](https://github.com/tailwindlabs/tailwindcss/releases)
- [Changelog](https://github.com/tailwindlabs/tailwindcss/blob/master/CHANGELOG.md)
- [Commits](https://github.com/tailwindlabs/tailwindcss/compare/v3.3.5...v3.4.1)

---
updated-dependencies:
- dependency-name: tailwindcss
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

* Update tailwind css and cleanup

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

web/package-lock.json

@@ -90,7 +90,7 @@
         "msw": "^2.2.1",
         "postcss": "^8.4.32",
         "prettier": "^3.2.5",
-        "tailwindcss": "^3.3.5",
+        "tailwindcss": "^3.4.1",
         "typescript": "^5.2.2",
         "vite": "^5.1.4",
         "vitest": "^1.3.1"
@@ -7618,9 +7618,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.3.5",
+      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.5.tgz",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
-      "integrity": "sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==",
+      "integrity": "sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",

web/package.json

@@ -95,7 +95,7 @@
     "msw": "^2.2.1",
     "postcss": "^8.4.32",
     "prettier": "^3.2.5",
-    "tailwindcss": "^3.3.5",
+    "tailwindcss": "^3.4.1",
     "typescript": "^5.2.2",
     "vite": "^5.1.4",
     "vitest": "^1.3.1"

web/src/App.tsx

@@ -21,13 +21,13 @@ function App() {
     <Providers>
       <BrowserRouter>
         <Wrapper>
-          <div className="w-full h-full pt-2 overflow-hidden">
+          <div className="size-full pt-2 overflow-hidden">
             {isDesktop && <Sidebar />}
             {isDesktop && <Statusbar />}
             {isMobile && <Bottombar />}
             <div
               id="pageRoot"
-              className="absolute left-0 md:left-16 top-2 right-0 bottom-16 md:bottom-8 overflow-hidden"
+              className="absolute left-0 top-2 right-0 bottom-16 md:left-16 md:bottom-8 overflow-hidden"
             >
               <Routes>
                 <Route path="/" element={<Live />} />

web/src/components/card/MiniEventCard.tsx

@@ -1,83 +0,0 @@
-import { useApiHost } from "@/api";
-import { Card } from "../ui/card";
-import { Event as FrigateEvent } from "@/types/event";
-import { LuClock, LuStar } from "react-icons/lu";
-import { useCallback } from "react";
-import TimeAgo from "../dynamic/TimeAgo";
-import { HiOutlineVideoCamera } from "react-icons/hi";
-import { MdOutlineLocationOn } from "react-icons/md";
-import axios from "axios";
-
-type MiniEventCardProps = {
-  event: FrigateEvent;
-  onUpdate?: () => void;
-};
-
-export default function MiniEventCard({ event, onUpdate }: MiniEventCardProps) {
-  const baseUrl = useApiHost();
-  const onSave = useCallback(
-    async (e: Event) => {
-      e.stopPropagation();
-      let response;
-      if (!event.retain_indefinitely) {
-        response = await axios.post(`events/${event.id}/retain`);
-      } else {
-        response = await axios.delete(`events/${event.id}/retain`);
-      }
-      if (response.status === 200 && onUpdate) {
-        onUpdate();
-      }
-    },
-    [event]
-  );
-
-  return (
-    <Card className="mr-2 min-w-[260px] max-w-[320px]">
-      <div className="flex">
-        <div
-          className="relative rounded-l min-w-[125px] h-[125px] bg-contain bg-no-repeat bg-center"
-          style={{
-            backgroundImage: `url(${baseUrl}api/events/${event.id}/thumbnail.jpg)`,
-          }}
-        >
-          <LuStar
-            className="h-6 w-6 text-yellow-300 absolute top-1 right-1 cursor-pointer"
-            onClick={(e: Event) => onSave(e)}
-            fill={event.retain_indefinitely ? "currentColor" : "none"}
-          />
-          {event.end_time ? null : (
-            <div className="bg-slate-300 dark:bg-slate-700 absolute bottom-0 text-center w-full uppercase text-sm rounded-bl">
-              In progress
-            </div>
-          )}
-        </div>
-        <div className="p-1 flex flex-col justify-between">
-          <div className="capitalize text-lg font-bold">
-            {event.label.replaceAll("_", " ")}
-            {event.sub_label
-              ? `: ${event.sub_label.replaceAll("_", " ")}`
-              : null}
-          </div>
-          <div>
-            <div className="text-sm flex">
-              <LuClock className="h-4 w-4 mr-2 inline" />
-              <div>
-                <TimeAgo time={event.start_time * 1000} dense />
-              </div>
-            </div>
-            <div className="capitalize text-sm flex align-center mt-1 whitespace-nowrap">
-              <HiOutlineVideoCamera className="h-4 w-4 mr-2 inline" />
-              {event.camera.replaceAll("_", " ")}
-            </div>
-            {event.zones.length ? (
-              <div className="capitalize whitespace-nowrap text-sm flex align-center">
-                <MdOutlineLocationOn className="w-4 h-4 mr-2 inline" />
-                {event.zones.join(", ").replaceAll("_", " ")}
-              </div>
-            ) : null}
-          </div>
-        </div>
-      </div>
-    </Card>
-  );
-}

web/src/components/image/AnimatedEventThumbnail.tsx

@@ -41,8 +41,8 @@ export function AnimatedEventThumbnail({ event }: AnimatedEventThumbnailProps) {
             aspectRatio: aspectRatio,
           }}
         >
-          <div className="absolute bottom-0 w-full h-6 bg-gradient-to-t from-slate-900/50 to-transparent rounded">
+          <div className="absolute bottom-0 inset-x-0 h-6 bg-gradient-to-t from-slate-900/50 to-transparent rounded">
-            <div className="absolute left-1 bottom-0 text-xs text-white w-full">
+            <div className="w-full absolute left-1 bottom-0 text-xs text-white">
               <TimeAgo time={event.start_time * 1000} dense />
             </div>
           </div>

web/src/components/navigation/Bottombar.tsx

@@ -4,7 +4,7 @@ import SettingsNavItems from "../settings/SettingsNavItems";
 
 function Bottombar() {
   return (
-      <div className="absolute h-16 left-4 bottom-0 right-4 flex flex-row items-center justify-between">
+      <div className="absolute h-16 inset-x-4 bottom-0 flex flex-row items-center justify-between">
         {navbarLinks.map((item) => (
           <NavItem
             className=""

web/src/components/navigation/NavItem.tsx

@@ -52,7 +52,7 @@ export default function NavItem({
           }
         >
           <TooltipTrigger>
-            <Icon className="w-5 h-5 m-[6px]" />
+            <Icon className="size-5 md:m-[6px]" />
           </TooltipTrigger>
         </NavLink>
         <TooltipContent side="right">

web/src/components/navigation/Sidebar.tsx

@@ -5,7 +5,7 @@ import NavItem from "./NavItem";
 
 function Sidebar() {
   return (
-    <aside className="w-[52px] z-10 h-screen sticky top-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between">
+    <aside className="absolute w-[52px] z-10 left-o inset-y-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between">
       <span tabIndex={0} className="sr-only" />
       <div className="w-full flex flex-col gap-0 items-center">
         <Logo className="w-8 h-8 mb-6" />

web/src/components/player/LivePlayer.tsx

@@ -131,17 +131,17 @@ export default function LivePlayer({
           : "outline-0"
       } transition-all duration-500 ${className}`}
     >
-      <div className="absolute top-0 left-0 right-0 rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
+      <div className="absolute top-0 inset-x-0 rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
-      <div className="absolute bottom-0 left-0 right-0 rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
+      <div className="absolute bottom-0 inset-x-0 rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
       {player}
 
       <div
-        className={`absolute left-0 top-0 right-0 bottom-0 w-full ${
+        className={`absolute inset-0 w-full ${
           showStillWithoutActivity && !liveReady ? "visible" : "invisible"
         }`}
       >
         <AutoUpdatingCameraImage
-          className="w-full h-full"
+          className="size-full"
           camera={cameraConfig.name}
           showFps={false}
           reloadInterval={stillReloadInterval}
@@ -153,7 +153,7 @@ export default function LivePlayer({
           in={activeMotion}
           className={`bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500`}
         >
-          <MdLeakAdd className="w-4 h-4 text-motion" />
+          <MdLeakAdd className="size-4 text-motion" />
           <div className="hidden md:block ml-1 text-white text-xs">Motion</div>
         </Chip>
 
@@ -162,7 +162,7 @@ export default function LivePlayer({
             in={activeAudio}
             className={`bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500`}
           >
-            <BsSoundwave className="w-4 h-4 text-audio" />
+            <BsSoundwave className="size-4 text-audio" />
             <div className="hidden md:block ml-1 text-white text-xs">Sound</div>
           </Chip>
         )}
@@ -171,7 +171,7 @@ export default function LivePlayer({
       {isDesktop && (
         <Chip className="absolute right-2 top-2 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500">
           {recording == "ON" && (
-            <MdCircle className="w-2 h-2 drop-shadow-md shadow-danger text-danger" />
+            <MdCircle className="size-2 drop-shadow-md shadow-danger text-danger" />
           )}
           <div className="ml-1 capitalize text-white text-xs">
             {cameraConfig.name.replaceAll("_", " ")}

web/src/pages/Live.tsx

@@ -88,7 +88,7 @@ function Live() {
   }, []);
 
   return (
-    <div className="w-full h-full overflow-y-scroll px-2">
+    <div className="size-full overflow-y-scroll px-2">
       {isMobile && (
         <div className="relative h-9 flex items-center justify-between">
           <Logo className="absolute inset-y-0 inset-x-1/2 -translate-x-1/2 h-8" />
@@ -128,7 +128,7 @@ function Live() {
       )}
 
       <div
-        className={`mt-4 grid ${layout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4`}
+        className={`mt-4 grid ${layout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4  *:rounded-2xl *:bg-black`}
       >
         {cameras.map((camera) => {
           let grow;
@@ -143,7 +143,7 @@ function Live() {
           return (
             <LivePlayer
               key={camera.name}
-              className={`rounded-2xl bg-black ${grow}`}
+              className={grow}
               windowVisible={windowVisible}
               cameraConfig={camera}
               preferredLiveMode={isSafari ? "webrtc" : "mse"}

web/src/views/events/DesktopRecordingView.tsx

@@ -82,11 +82,11 @@ export default function DesktopRecordingView({
         className="absolute left-0 top-0 rounded-lg"
         onClick={() => navigate(-1)}
       >
-        <IoMdArrowRoundBack className="w-5 h-5 mr-[10px]" />
+        <IoMdArrowRoundBack className="size-5 mr-[10px]" />
         Back
       </Button>
 
-      <div className="absolute left-[20%] top-8 right-[20%]">
+      <div className="absolute top-8 inset-x-[20%]">
         <DynamicVideoPlayer
           camera={selectedReview.camera}
           timeRange={timeRange.ranges[selectedRangeIdx]}
@@ -106,7 +106,7 @@ export default function DesktopRecordingView({
         />
       </div>
 
-      <div className="absolute top-0 right-0 bottom-0">
+      <div className="absolute inset-y-0 right-0">
         <EventReviewTimeline
           segmentDuration={30}
           timestampSpread={15}

web/src/views/events/EventView.tsx

@@ -189,33 +189,30 @@ export default function EventView({
   }
 
   return (
-    <div className="flex flex-col w-full h-full">
+    <div className="flex flex-col size-full">
       <div className="relative flex justify-between mb-2">
         <Logo className="absolute inset-y-0 inset-x-1/2 -translate-x-1/2 h-8" />
         <ToggleGroup
+          className="*:px-3 *:py4 *:rounded-2xl"
           type="single"
           defaultValue="alert"
           size="sm"
           onValueChange={(value: ReviewSeverity) => setSeverity(value)}
         >
           <ToggleGroupItem
-            className={`px-3 py-4 rounded-2xl ${
+            className={`${severity == "alert" ? "" : "text-gray-500"}`}
-              severity == "alert" ? "" : "text-gray-500"
-            }`}
             value="alert"
             aria-label="Select alerts"
           >
-            <MdCircle className="w-2 h-2 md:mr-[10px] text-severity_alert" />
+            <MdCircle className="size-2 md:mr-[10px] text-severity_alert" />
             <div className="hidden md:block">Alerts</div>
           </ToggleGroupItem>
           <ToggleGroupItem
-            className={`px-3 py-4 rounded-2xl ${
+            className={`${severity == "detection" ? "" : "text-gray-500"}`}
-              severity == "detection" ? "" : "text-gray-500"
-            }`}
             value="detection"
             aria-label="Select detections"
           >
-            <MdCircle className="w-2 h-2 md:mr-[10px] text-severity_detection" />
+            <MdCircle className="size-2 md:mr-[10px] text-severity_detection" />
             <div className="hidden md:block">Detections</div>
           </ToggleGroupItem>
           <ToggleGroupItem
@@ -225,7 +222,7 @@ export default function EventView({
             value="significant_motion"
             aria-label="Select motion"
           >
-            <MdCircle className="w-2 h-2 md:mr-[10px] text-severity_motion" />
+            <MdCircle className="size-2 md:mr-[10px] text-severity_motion" />
             <div className="hidden md:block">Motion</div>
           </ToggleGroupItem>
         </ToggleGroup>
@@ -245,14 +242,14 @@ export default function EventView({
           />
 
           {reachedEnd && currentItems == null && (
-            <div className="w-full h-full flex flex-col justify-center items-center">
+            <div className="size-full flex flex-col justify-center items-center">
-              <LuFolderCheck className="w-16 h-16" />
+              <LuFolderCheck className="size-16" />
               There are no {severity} items to review
             </div>
           )}
 
           <div
-            className="w-full mx-2 my-2 md:grid md:grid-cols-3 3xl:grid-cols-4 gap-4"
+            className="w-full m-2 md:grid md:grid-cols-3 3xl:grid-cols-4 gap-4"
             ref={contentRef}
           >
             {currentItems ? (