From c237b4ee37a646c7d86e7ee9eccb5c3231aa74d9 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Fri, 22 May 2026 00:35:51 -0700
Subject: [PATCH] [eric] toolbar: rounded teardrop chat bubble custom svg
 (Image #57)

---
 .../app/pages/Dashboard/DashboardToolbar.tsx  | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx b/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
index 52c05989..dfa27b66 100644
--- a/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
+++ b/frontend/src/app/pages/Dashboard/DashboardToolbar.tsx
@@ -6,9 +6,26 @@ import CircularProgress from '@mui/material/CircularProgress';
 import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
 import Icon from '@mui/material/Icon';
 import { styled } from '@mui/material/styles';
-import ChatBubbleOutlineRounded from '@mui/icons-material/ChatBubbleOutlineRounded';
 import AddRounded from '@mui/icons-material/AddRounded';
 import HistoryRounded from '@mui/icons-material/HistoryRounded';
+
+// Custom rounded speech bubble with a small tail at the bottom-left,
+// outlined in currentColor with the bubble interior knocked out so the
+// orange button fill shows through. Matches Image #57 exactly; MUI's
+// rounded chat icons are either filled or tail-less.
+function ChatBubbleTeardrop(props: { sx?: { fontSize?: number } }) {
+  const size = props.sx?.fontSize ?? 18;
+  return (
+    <svg
+      width={size} height={size} viewBox="0 0 24 24"
+      fill="none" stroke="currentColor" strokeWidth={1.8}
+      strokeLinecap="round" strokeLinejoin="round"
+      style={{ display: 'block' }}
+    >
+      <path d="M7 3.5 h10 a4 4 0 0 1 4 4 v7 a4 4 0 0 1 -4 4 h-8 l-3.2 3 v-3.2 a4 4 0 0 1 -2.8 -3.8 v-7 a4 4 0 0 1 4 -4 z" />
+    </svg>
+  );
+}
 import GridViewRoundedIcon from '@mui/icons-material/GridViewRounded';
 import StickyNote2OutlinedIcon from '@mui/icons-material/StickyNote2Outlined';
 import HistoryRoundedIcon from '@mui/icons-material/HistoryRounded';
@@ -664,7 +681,7 @@ const DashboardToolbar = React.forwardRef<HTMLDivElement, Props>(
                   }),
                 }}
               >
-                <ChatBubbleOutlineRounded sx={{ fontSize: 18 }} />
+                <ChatBubbleTeardrop sx={{ fontSize: 18 }} />
               </Box>
             </WarmTooltip>