update header icons

sandboxnu · Nov 3, 2024 · 30da862 · 30da862
1 parent 672224a
commit 30da862
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 33 deletions.
diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
     "cross-env": "^7.0.3",
     "fuse.js": "^7.0.0",
     "nodemailer": "^6.9.1",
+    "react-icons": "^5.3.0",
     "universal-cookie": "^7.2.0"
   },
   "devDependencies": {

diff --git a/packages/frontend/components/Header/GraduateHeaders.tsx b/packages/frontend/components/Header/GraduateHeaders.tsx
@@ -17,13 +17,15 @@ import {
   useMediaQuery,
   Stack,
   HStack,
+  ButtonGroup,
 } from "@chakra-ui/react";
 import { MetaInfoWidget } from "../MetaInfo/MetaInfo";
-import { HamburgerIcon, RepeatClockIcon } from "@chakra-ui/icons";
+import { HamburgerIcon, RepeatClockIcon, ChatIcon } from "@chakra-ui/icons";
 import {
   useWhatsNewModal,
   WhatsNewModalContextProvider,
 } from "../WhatsNewModal/WhatsNewModalContextProvider";
+import { MdChatBubbleOutline, MdOutlineBugReport } from "react-icons/md";
 
 export const GraduatePreAuthHeader: React.FC = () => {
   const [isMobile] = useMediaQuery("(max-width: 640px)");
@@ -81,11 +83,21 @@ const GraduateHeaderContent: React.FC<GraduateHeaderProps> = ({
           <LatestReleaseNotesIcon mx="4px" />
           <Text>Latest Release Notes</Text>
         </Flex>
-        <ChakraLink href="https://forms.gle/uXDfLFWvgCiYcqgf9" isExternal>
+        <ChakraLink
+          href="https://forms.gle/uXDfLFWvgCiYcqgf9"
+          isExternal
+          display="inline-flex"
+          alignItems="center"
+        >
           <FeedbackIcon mx="2px" />
           Feedback
         </ChakraLink>
-        <ChakraLink href="https://forms.gle/bXgRXyYTXN8wgYy78" isExternal>
+        <ChakraLink
+          href="https://forms.gle/bXgRXyYTXN8wgYy78"
+          isExternal
+          display="inline-flex"
+          alignItems="center"
+        >
           <BugIcon mx="2px" />
           Bug/Feature
         </ChakraLink>
@@ -159,35 +171,15 @@ const MobileHeader: React.FC = () => {
 };
 
 const LatestReleaseNotesIcon: React.FC<IconProps> = (props) => {
-  return <RepeatClockIcon {...props} />;
+  return <RepeatClockIcon height="16px" width="16px" {...props} />;
 };
 
 const FeedbackIcon: React.FC<IconProps> = (props) => {
   return (
-    <Icon
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      className="w-6 h-6"
-      {...props}
-    >
-      <path d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
-    </Icon>
+    <Icon as={MdChatBubbleOutline} height="20px" width="20px" {...props} />
   );
 };
 
 const BugIcon: React.FC<IconProps> = (props) => {
-  return (
-    <Icon
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      className="w-6 h-6"
-      {...props}
-    >
-      <path d="M12 12.75c1.148 0 2.278.08 3.383.237 1.037.146 1.866.966 1.866 2.013 0 3.728-2.35 6.75-5.25 6.75S6.75 18.728 6.75 15c0-1.046.83-1.867 1.866-2.013A24.204 24.204 0 0112 12.75zm0 0c2.883 0 5.647.508 8.207 1.44a23.91 23.91 0 01-1.152 6.06M12 12.75c-2.883 0-5.647.508-8.208 1.44.125 2.104.52 4.136 1.153 6.06M12 12.75a2.25 2.25 0 002.248-2.354M12 12.75a2.25 2.25 0 01-2.248-2.354M12 8.25c.995 0 1.971-.08 2.922-.236.403-.066.74-.358.795-.762a3.778 3.778 0 00-.399-2.25M12 8.25c-.995 0-1.97-.08-2.922-.236-.402-.066-.74-.358-.795-.762a3.734 3.734 0 01.4-2.253M12 8.25a2.25 2.25 0 00-2.248 2.146M12 8.25a2.25 2.25 0 012.248 2.146M8.683 5a6.032 6.032 0 01-1.155-1.002c.07-.63.27-1.222.574-1.747m.581 2.749A3.75 3.75 0 0115.318 5m0 0c.427-.283.815-.62 1.155-.999a4.471 4.471 0 00-.575-1.752M4.921 6a24.048 24.048 0 00-.392 3.314c1.668.546 3.416.914 5.223 1.082M19.08 6c.205 1.08.337 2.187.392 3.314a23.882 23.882 0 01-5.223 1.082" />
-    </Icon>
-  );
+  return <Icon as={MdOutlineBugReport} height="20px" width="20px" {...props} />;
 };
diff --git a/packages/frontend/components/MetaInfo/MetaInfo.tsx b/packages/frontend/components/MetaInfo/MetaInfo.tsx
@@ -1,3 +1,4 @@
+import { UpDownIcon } from "@chakra-ui/icons";
 import { Box, Flex, Icon, Link, Text, Tooltip } from "@chakra-ui/react";
 import { API } from "@graduate/api-client";
 import { Maybe } from "@graduate/common";
@@ -71,13 +72,7 @@ export const MetaInfoWidget: React.FC = () => {
         transition="background 0.15s ease"
         userSelect="none"
       >
-        <Icon
-          xmlns="http://www.w3.org/2000/svg"
-          fill="black"
-          viewBox="0 0 24 24"
-        >
-          <path d="M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6Z"></path>
-        </Icon>
+        <UpDownIcon transform="rotate(90deg)" />
         {process.env.NODE_ENV === "development" && <Text>Dev</Text>}
       </Flex>
       {

diff --git a/yarn.lock b/yarn.lock
@@ -8208,6 +8208,7 @@ __metadata:
     prettier: ^2.5.1
     prettier-plugin-jsdoc: ^0.3.38
     pretty-quick: ^3.1.3
+    react-icons: ^5.3.0
     typescript: ^4.6.2
     universal-cookie: ^7.2.0
   languageName: unknown
@@ -11702,6 +11703,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-icons@npm:^5.3.0":
+  version: 5.3.0
+  resolution: "react-icons@npm:5.3.0"
+  peerDependencies:
+    react: "*"
+  checksum: 3aa5f50e05aafc6d31e0d995fe0d98560069aa88717b24ce8aaa082a7e7b20ca95e1e19d847ed6e52d658a5a30e15826af20d7554bf993a743edd55586db62e3
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.13.1, react-is@npm:^16.7.0":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"