Add graph showing motion and object activity to history timeline desktop view (#9184)

* Add timeline graph component

* Add more custom colors and improve graph

* Add api and data

* Fix data sorting

* Add graph to timeline

* Only show timeline for selected hour

* Make data full range

web/src/pages/ConfigEditor.tsx

@@ -150,9 +150,9 @@ function ConfigEditor() {
         </div>
       </div>
 
-      {success && <div className="max-h-20 text-green-500">{success}</div>}
+      {success && <div className="max-h-20 text-success">{success}</div>}
       {error && (
-        <div className="p-4 overflow-scroll text-red-500 whitespace-pre-wrap">
+        <div className="p-4 overflow-scroll text-danger whitespace-pre-wrap">
           {error}
         </div>
       )}

web/src/pages/Dashboard.tsx

@@ -123,7 +123,7 @@ function Camera({ camera }: { camera: CameraConfig }) {
                     ? recordValue == "ON"
                       ? "text-primary"
                       : "text-gray-400"
-                    : "text-red-500"
+                    : "text-danger"
                 }
                 onClick={(e) => {
                   e.stopPropagation();

web/src/pages/Export.tsx

@@ -160,7 +160,7 @@ function Export() {
       {message.text && (
         <div
           className={`max-h-20 ${
-            message.error ? "text-red-500" : "text-green-500"
+            message.error ? "text-danger" : "text-success"
           }`}
         >
           {message.text}

web/src/pages/History.tsx

@@ -212,7 +212,7 @@ function History() {
               Cancel
             </AlertDialogCancel>
             <AlertDialogAction
-              className="bg-red-500"
+              className="bg-danger"
               onClick={() => onDeleteMulti()}
             >
               Delete