feat(view): change to Insights icon and apply new badge (#907)

Author: Jxxunnn

packages/view/src/App.tsx

@@ -13,7 +13,7 @@ import type { IDESentEvents } from "types/IDESentEvents";
 import { useBranchStore, useDataStore, useGithubInfo, useLoadingStore, useThemeStore } from "store";
 import { THEME_INFO } from "components/ThemeSelector/ThemeSelector.const";
 import { NetworkGraph } from "components/NetworkGraph";
-import { NewButton } from "components/NewButton";
+import { InsightsButton } from "components/InsightsButton";
 
 const App = () => {
   const initRef = useRef<boolean>(false);
@@ -71,7 +71,8 @@ const App = () => {
         <ThemeSelector />
         <BranchSelector />
         <RefreshButton />
-        <NewButton
+        <InsightsButton
+          isNew
           sx={{
             width: "1.875rem",
             height: "1.875rem",

packages/view/src/components/InsightsButton/InsightsButton.tsx

@@ -0,0 +1,26 @@
+import { Badge, IconButton, IconButtonProps } from "@mui/material";
+import InsightsIcon from "@mui/icons-material/Insights";
+
+type InsightsButtonProps = {
+  isNew?: boolean;
+} & IconButtonProps;
+
+const InsightsButton = ({ isNew = false, ...props }: InsightsButtonProps) => {
+  return (
+    <IconButton {...props}>
+      <Badge
+        badgeContent="NEW"
+        invisible={!isNew}
+        sx={{
+          "& .MuiBadge-badge": {
+            fontSize: "0.625rem",
+          },
+        }}
+      >
+        <InsightsIcon />
+      </Badge>
+    </IconButton>
+  );
+};
+
+export default InsightsButton;

packages/view/src/components/InsightsButton/index.ts

@@ -0,0 +1 @@
+export { default as InsightsButton } from "./InsightsButton";