Add button icon and update icon colors

Author: samejr

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

@@ -351,23 +351,23 @@ export function SideMenu({
               <SideMenuItem
                 name="Concurrency"
                 icon={ConcurrencyIcon}
-                activeIconColor="text-amber-500"
+                activeIconColor="text-concurrency"
                 to={concurrencyPath(organization, project, environment)}
                 data-action="concurrency"
               />
             )}
             <SideMenuItem
               name="Regions"
               icon={GlobeAmericasIcon}
-              activeIconColor="text-green-500"
+              activeIconColor="text-regions"
               to={regionsPath(organization, project, environment)}
               data-action="regions"
               badge={<V4Badge />}
             />
             <SideMenuItem
               name="Limits"
               icon={AdjustmentsHorizontalIcon}
-              activeIconColor="text-purple-500"
+              activeIconColor="text-limits"
               to={limitsPath(organization, project, environment)}
               data-action="limits"
             />

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.limits/route.tsx

@@ -42,6 +42,7 @@ import {
   EnvironmentParamSchema,
   organizationBillingPath,
 } from "~/utils/pathBuilder";
+import { ConcurrencyIcon } from "~/assets/icons/ConcurrencyIcon";
 
 export const meta: MetaFunction = () => {
   return [
@@ -207,7 +208,12 @@ function ConcurrencySection({ concurrencyPath }: { concurrencyPath: string }) {
           <TableRow>
             <TableCell className="w-full text-sm">Concurrency</TableCell>
             <TableCell alignment="right">
-              <LinkButton to={concurrencyPath} variant="secondary/small">
+              <LinkButton
+                to={concurrencyPath}
+                variant="secondary/small"
+                LeadingIcon={ConcurrencyIcon}
+                leadingIconClassName="text-orange-500"
+              >
                 Manage concurrency
               </LinkButton>
             </TableCell>

apps/webapp/tailwind.config.js

@@ -160,6 +160,9 @@ const batches = colors.pink[500];
 const schedules = colors.yellow[500];
 const queues = colors.purple[500];
 const deployments = colors.green[500];
+const concurrency = colors.amber[500];
+const limits = colors.purple[500];
+const regions = colors.green[500];
 const logs = colors.blue[500];
 const tests = colors.lime[500];
 const apiKeys = colors.amber[500];
@@ -235,7 +238,10 @@ module.exports = {
         runs,
         batches,
         schedules,
+        concurrency,
         queues,
+        regions,
+        limits,
         deployments,
         logs,
         tests,