dashboard: change mixer to gear icon (#35016)

Let's reserve the mixer icon for filtering.

GitOrigin-RevId: c3885bf1005676b01170715828de52e85aa90904

Author: atrakh

npm-packages/dashboard-common/src/layouts/DeploymentDashboardLayout.tsx

@@ -1,11 +1,11 @@
 import {
   FileIcon,
   TableIcon,
-  MixerHorizontalIcon,
   CodeIcon,
   StopwatchIcon,
   CounterClockwiseClockIcon,
   TextAlignBottomIcon,
+  GearIcon,
 } from "@radix-ui/react-icons";
 import { useQuery } from "convex/react";
 import Link from "next/link";
@@ -97,7 +97,7 @@ export function DeploymentDashboardLayout({
         {
           key: "settings",
           label: "Settings",
-          Icon: MixerHorizontalIcon,
+          Icon: GearIcon,
           href: `${uriPrefix}/settings`,
         },
       ],

npm-packages/dashboard/src/components/header/ProjectSelector/ProjectSelector.tsx

@@ -5,11 +5,7 @@ import React, { useRef, useState } from "react";
 import { useCurrentProject, useProjects } from "api/projects";
 import { Button } from "dashboard-common/elements/Button";
 import { Popover } from "dashboard-common/elements/Popover";
-import {
-  CaretSortIcon,
-  MixerHorizontalIcon,
-  ResetIcon,
-} from "@radix-ui/react-icons";
+import { CaretSortIcon, GearIcon, ResetIcon } from "@radix-ui/react-icons";
 import { Avatar } from "elements/Avatar";
 import { useScrolling, useWindowSize } from "react-use";
 import { usePopper } from "react-popper";
@@ -233,7 +229,7 @@ function ProjectSelectorPanel({
                 onClick={close}
                 inline
                 variant="neutral"
-                icon={<MixerHorizontalIcon />}
+                icon={<GearIcon />}
                 tip="Team settings"
                 aria-label={`Team settings for ${team.name}`}
                 tipSide="right"
@@ -294,7 +290,7 @@ function ProjectSelectorPanel({
                 onClick={close}
                 inline
                 variant="neutral"
-                icon={<MixerHorizontalIcon />}
+                icon={<GearIcon />}
                 tip={`Project settings for ${lastHoveredProject.slug}`}
               />
             </div>

npm-packages/dashboard/src/components/projects/ProjectCard.tsx

@@ -1,8 +1,4 @@
-import {
-  EyeOpenIcon,
-  MixerHorizontalIcon,
-  TrashIcon,
-} from "@radix-ui/react-icons";
+import { EyeOpenIcon, TrashIcon, GearIcon } from "@radix-ui/react-icons";
 import { Card, CardProps } from "elements/Card";
 import { Tooltip } from "dashboard-common/elements/Tooltip";
 import { Loading } from "dashboard-common/elements/Loading";
@@ -41,7 +37,7 @@ export function ProjectCard({ project }: { project: ProjectDetails }) {
 
   const dropdownItems: CardProps["dropdownItems"] = [
     {
-      Icon: MixerHorizontalIcon,
+      Icon: GearIcon,
       text: "Settings",
       action: openSettings,
     },

npm-packages/dashboard/src/elements/DeploymentDisplay.tsx

@@ -1,9 +1,5 @@
 import { CommandLineIcon, SignalIcon } from "@heroicons/react/20/solid";
-import {
-  GlobeIcon,
-  MixerHorizontalIcon,
-  Pencil2Icon,
-} from "@radix-ui/react-icons";
+import { GearIcon, GlobeIcon, Pencil2Icon } from "@radix-ui/react-icons";
 import { useCurrentDeployment, useDeployments } from "api/deployments";
 import { useCurrentTeam, useTeamMembers } from "api/teams";
 import { useProjectById } from "api/projects";
@@ -47,7 +43,7 @@ export function DeploymentDisplay({ project }: { project: ProjectDetails }) {
 
   return isProjectSettings ? (
     <div className="flex items-center gap-2">
-      <MixerHorizontalIcon />
+      <GearIcon />
       <span className="hidden sm:block">Project settings</span>
     </div>
   ) : !isDoneLoading ? null : whoseName ? (