Adds custom logs icon

Author: samejr

apps/webapp/app/assets/icons/LogsIcon.tsx

@@ -0,0 +1,66 @@
+export function LogsIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="4" cy="10" r="1" fill="currentColor" />
+      <circle cx="4" cy="5" r="1" fill="currentColor" />
+      <circle cx="4" cy="14" r="1" fill="currentColor" />
+      <circle cx="4" cy="19" r="1" fill="currentColor" />
+      <path
+        d="M7 9.75L10 9.75"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M7 5L10 5"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M7 14.25H10"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M7 19H10"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M13 5H20"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M13 9.75H20"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M13 14.25H20"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M13 19H20"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -8,7 +8,6 @@ import {
   ClockIcon,
   Cog8ToothIcon,
   CogIcon,
-  DocumentTextIcon,
   FolderIcon,
   FolderOpenIcon,
   GlobeAmericasIcon,
@@ -24,9 +23,10 @@ import {
 import { Link, useNavigation } from "@remix-run/react";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import simplur from "simplur";
-import { BranchEnvironmentIconSmall } from "~/assets/icons/EnvironmentIcons";
 import { ConcurrencyIcon } from "~/assets/icons/ConcurrencyIcon";
+import { BranchEnvironmentIconSmall } from "~/assets/icons/EnvironmentIcons";
 import { ListCheckedIcon } from "~/assets/icons/ListCheckedIcon";
+import { LogsIcon } from "~/assets/icons/LogsIcon";
 import { RunsIconExtraSmall } from "~/assets/icons/RunsIcon";
 import { TaskIconSmall } from "~/assets/icons/TaskIcon";
 import { WaitpointTokenIcon } from "~/assets/icons/WaitpointTokenIcon";
@@ -57,10 +57,10 @@ import {
   v3BatchesPath,
   v3BillingPath,
   v3BulkActionsPath,
-  v3LogsPath,
   v3DeploymentsPath,
   v3EnvironmentPath,
   v3EnvironmentVariablesPath,
+  v3LogsPath,
   v3ProjectAlertsPath,
   v3ProjectPath,
   v3ProjectSettingsPath,
@@ -264,8 +264,8 @@ export function SideMenu({
             />
             <SideMenuItem
               name="Logs"
-              icon={DocumentTextIcon}
-              activeIconColor="text-deployments"
+              icon={LogsIcon}
+              activeIconColor="text-logs"
               to={v3LogsPath(organization, project, environment)}
               data-action="logs"
             />

apps/webapp/tailwind.config.js

@@ -160,6 +160,7 @@ const batches = colors.pink[500];
 const schedules = colors.yellow[500];
 const queues = colors.purple[500];
 const deployments = colors.green[500];
+const logs = colors.blue[500];
 const tests = colors.lime[500];
 const apiKeys = colors.amber[500];
 const environmentVariables = colors.pink[500];
@@ -236,6 +237,7 @@ module.exports = {
         schedules,
         queues,
         deployments,
+        logs,
         tests,
         apiKeys,
         environmentVariables,