Update frontend colors to match style guide (#10188)

* Get main background colors going

* Finish sidebar

* Get light mode colors working

* Adjust icons

* Adjust icons

* remove unused

* Fix mobile colors

web/src/views/events/EventView.tsx

@@ -247,7 +247,7 @@ export default function EventView({
 
   return (
     <div className="flex flex-col size-full">
-      <div className="h-8 relative flex justify-between items-center mb-2">
+      <div className="h-10 relative flex justify-between items-center mb-2">
         {isMobile && (
           <Logo className="absolute inset-y-0 inset-x-1/2 -translate-x-1/2 h-8" />
         )}

web/src/views/live/LiveCameraView.tsx

@@ -101,7 +101,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
         </Button>
         <TooltipProvider>
           <div
-            className={`flex flex-row items-center gap-1 mr-1 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`}
+            className={`flex flex-row items-center gap-2 mr-1 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`}
           >
             <CameraFeatureToggle
               className="p-2 md:p-0"

web/src/views/live/LiveDashboardView.tsx

@@ -81,17 +81,23 @@ export default function LiveDashboardView({
           <div />
           <div className="flex items-center gap-1">
             <Button
-              className={layout == "grid" ? "text-blue-600 bg-blue-200" : ""}
+              className={
+                layout == "grid"
+                  ? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
+                  : "text-muted-foreground bg-muted"
+              }
               size="xs"
-              variant="secondary"
               onClick={() => setLayout("grid")}
             >
               <CiGrid31 className="m-1" />
             </Button>
             <Button
-              className={layout == "list" ? "text-blue-600 bg-blue-200" : ""}
+              className={
+                layout == "list"
+                  ? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
+                  : "text-muted-foreground bg-muted"
+              }
               size="xs"
-              variant="secondary"
               onClick={() => setLayout("list")}
             >
               <CiGrid2H className="m-1" />