polishing

Client/src/App.jsx

@@ -1,7 +1,23 @@
+import { Routes, Route } from "react-router-dom";
+// import "./App.css";
+import NotFound from "./Pages/NotFound";
+import Login from "./Pages/Login";
+import Register from "./Pages/Register";
+import HomeLayout from "./Layouts/HomeLayout";
+import Demo from "./Pages/Demo/Demo";
+import PlayGround from "./Pages/PlayGround/PlayGround";
+
 function App() {
   return (
     <>
-      <div></div>
+      {/* <Routes>
+        <Route exact path="/" element={<HomeLayout />} />
+        <Route exact path="/register" element={<Register />} />
+        <Route exact path="/login" element={<Login />} />
+        <Route exact path="/demo" element={<Demo />} />
+        <Route path="*" element={<NotFound />} />
+      </Routes> */}
+      <PlayGround />
     </>
   );
 }

Client/src/Components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.jsx

@@ -2,6 +2,7 @@ import "./announcementsDualButtonWithIcon.css";
 import React from "react";
 import CloseIcon from "@mui/icons-material/Close";
 import PropTypes from "prop-types";
+import { useTheme } from "@mui/material";
 
 /**
  * @component
@@ -21,8 +22,16 @@ const AnnouncementsDualButtonWithIcon = ({
   esc,
   primary,
 }) => {
+  const theme = useTheme();
+
+  const fontLookup = {
+    default: theme.font.default.font,
+  };
+
+  const fontFamily = fontLookup["default"];
+
   return (
-    <div className="announcement-tile">
+    <div className="announcement-tile" style={{ fontFamily: fontFamily }}>
       {icon && <div className="announcement-icon">{icon}</div>}
       <div className="announcement-content">
         {subject && (

Client/src/Pages/PlayGround/PlayGround-Charts.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import "./playGround.css";
-import Statistic from "../../components/Charts/Statistics/Statistic";
-import ServerStatus from "../../components/Charts/Servers/ServerStatus";
+import Statistic from "../../Components/Charts/Statistics/Statistic";
+import ServerStatus from "../../Components/Charts/Servers/ServerStatus";
 
 function PlayGroundCharts() {
   return (

Client/src/Pages/PlayGround/PlayGround-Popup-Modals.jsx

@@ -1,6 +1,6 @@
 import React from "react";
-import DualButtonPopupModal from "../../components/PopupModals/DualButtonPopupModal/DualButtonPopupModal";
-import DualButtonPopupModalWithTextfields from "../../components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields";
+import DualButtonPopupModal from "../../Components/PopupModals/DualButtonPopupModal/DualButtonPopupModal";
+import DualButtonPopupModalWithTextfields from "../../Components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields";
 
 function PlayGroundPopupModals() {
   return (

Client/src/Pages/PlayGround/PlayGround-Tooltips.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import TooltipWithTail from "../../components/Tooltips/TooltipWithTail/TooltipWithTail";
+import TooltipWithTail from "../../Components/Tooltips/TooltipWithTail/TooltipWithTail";
 import "./playGround.css";
 
 function PlayGroundTooltips() {

Client/src/Pages/PlayGround/PlayGround-announcements.jsx

@@ -1,11 +1,11 @@
 import "./playGround.css";
 import React from "react";
-import AnnouncementsDualButtonWithIcon from "../../components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon";
+import AnnouncementsDualButtonWithIcon from "../../Components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
-import ComplexAlert from "../../components/Icons/ComplexAlert/ComplexAlert";
-import AnnouncementsMessageBar from "../../components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar";
-import AnnouncementsDualButton from "../../components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton";
-import AnnouncementUpdateSubscription from "../../components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription";
+import ComplexAlert from "../../Components/Icons/ComplexAlert/ComplexAlert";
+import AnnouncementsMessageBar from "../../Components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar";
+import AnnouncementsDualButton from "../../Components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton";
+import AnnouncementUpdateSubscription from "../../Components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription";
 
 function PlayGroundAnnouncements() {
   return (

Client/src/Pages/PlayGround/PlayGround.jsx

@@ -1,9 +1,9 @@
 import React from "react";
-import EmailTextField from "../../components/TextFields/Email/EmailTextField";
+import EmailTextField from "../../Components/TextFields/Email/EmailTextField";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
-import WebsiteTextField from "../../components/TextFields/Website/WebsiteTextField";
-import DescriptionTextField from "../../components/TextFields/Description/DescriptionTextField";
+import WebsiteTextField from "../../Components/TextFields/Website/WebsiteTextField";
+import DescriptionTextField from "../../Components/TextFields/Description/DescriptionTextField";
 
 // This Component is just for the development and test
 // purposes and just to see what my components look like while development

Client/src/Utils/Theme.js

@@ -16,6 +16,10 @@ const labelRed = "#F04438";
 //Section colros
 const sectionBorder = "#D0D5DD";
 const sectionBg = "#F8F9F8";
+
+// Global Font Family
+const fontFamilyDefault = '"Roboto", "Helvetica", "Arial", sans-serif';
+
 const theme = createTheme({
   palette: {
     primary: {
@@ -48,6 +52,11 @@ const theme = createTheme({
       bgColor: sectionBg,
     },
   },
+  font :{
+    default: {
+      font: fontFamilyDefault,
+    },
+  },
   shape: {
     borderRadius: 4,
   },

Client/src/components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx

@@ -1,6 +1,7 @@
 import "./announcementUpdateSubscription.css";
 import React from "react";
 import PropTypes from "prop-types";
+import { useTheme } from "@mui/material";
 
 /**
  * @component
@@ -22,8 +23,16 @@ const AnnouncementUpdateSubscription = ({
   header,
   button,
 }) => {
+  const theme = useTheme();
+
+  const fontLookup = {
+    default: theme.font.default.font,
+  };
+
+  const fontFamily = fontLookup["default"];
+
   return (
-    <div className="update-subscription">
+    <div className="update-subscription" style={{ fontFamily: fontFamily }}>
       <div className="update-subscription-dialog">
         <div className="subscription-dialog-title">{title}</div>
         <div className="v-spacing-small"></div>

Client/src/components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css

@@ -1,5 +1,4 @@
 :root {
-  --update-subscription-font-family: "Roboto", "Helvetica", "Arial", sans-serif;
   --update-subscription-color-0: #101828;
   --update-subscription-color-1: #475467;
   --update-subscription-color-2: #fff;
@@ -18,7 +17,6 @@
 
 .update-subscription,
 .update-subscription-dialog {
-  font-family: var(--update-subscription-font-family);
   max-width: 770px;
   border-radius: 4px;
   border: 1px solid #eaecf0;
@@ -30,7 +28,6 @@
 
 .subscription-dialog-title {
   font-size: 1rem;
-  font-family: var(--update-subscription-font-family);
   font-weight: 700;
   color: var(--update-subscription-color-0);
 }
@@ -45,7 +42,6 @@
 
 .subscription-dialog-text {
   font-size: 13px;
-  font-family: var(--update-subscription-font-family);
   color: var(--update-subscription-color-1);
 }
 

Client/src/components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx

@@ -2,6 +2,7 @@ import "./announcementsDualButton.css";
 import React from "react";
 import CloseIcon from "@mui/icons-material/Close";
 import PropTypes from "prop-types";
+import { useTheme } from "@mui/material";
 
 /**
  * @component
@@ -14,8 +15,19 @@ import PropTypes from "prop-types";
  */
 
 const AnnouncementsDualButton = ({ subject, body, esc, primary }) => {
+  const theme = useTheme();
+
+  const fontLookup = {
+    default: theme.font.default.font,
+  };
+
+  const fontFamily = fontLookup["default"];
+
   return (
-    <div className="announcement-without-tile">
+    <div
+      className="announcement-without-tile"
+      style={{ fontFamily: fontFamily }}
+    >
       <div className="announcement-without-content">
         <div className="announcement-without-content-subject">{subject}</div>
         <div className="v-spacing"></div>

Client/src/components/Announcements/AnnouncementsDualButton/announcementsDualButton.css

@@ -2,7 +2,7 @@
   --announcement-border-color: #d0d5dd;
   --announcement-border-radius: 4px;
   --announcement-border-radius-2: 8px;
-  --announcement-font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  /* --announcement-font-family: "Roboto", "Helvetica", "Arial", sans-serif; */
   --announcement-font-size-0: 13px;
   --announcement-font-color-0: #344054;
   --announcement-font-color-1: #475467;
@@ -16,7 +16,7 @@
   width: fit-content;
   display: flex;
   border: 1px solid var(--announcement-border-color);
-  font-family: var(--announcement-font-family);
+  /* font-family: var(--announcement-font-family); */
   padding: var(--announcement-padding);
   border-radius: var(--announcement-border-radius);
 }

Client/src/components/Announcements/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css

@@ -2,7 +2,6 @@
   --announcement-border-color: #d0d5dd;
   --announcement-border-radius: 4px;
   --announcement-border-radius-2: 8px;
-  --announcement-font-family: "Roboto", "Helvetica", "Arial", sans-serif;
   --announcement-font-size-0: 13px;
   --announcement-font-color-0: #344054;
   --announcement-font-color-1: #475467;
@@ -15,7 +14,6 @@
   width: fit-content;
   display: flex;
   border: 1px solid var(--announcement-border-color);
-  font-family: var(--announcement-font-family);
   padding: var(--announcement-padding);
   border-radius: var(--announcement-border-radius);
 }

Client/src/components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx

@@ -2,6 +2,7 @@ import "./announcementsMessageBar.css";
 import React from "react";
 import CloseIcon from "@mui/icons-material/Close";
 import PropTypes from "prop-types";
+import { useTheme } from "@mui/material";
 
 /**
  * @component
@@ -10,8 +11,16 @@ import PropTypes from "prop-types";
  * @returns {JSX.Element} - Renders the announcement message bar component
  */
 const AnnouncementsMessageBar = ({ message }) => {
+  const theme = useTheme();
+
+  const fontLookup = {
+    default: theme.font.default.font,
+  };
+
+  const fontFamily = fontLookup["default"];
+
   return (
-    <div className="announcement-tile">
+    <div className="announcement-tile" style={{ fontFamily: fontFamily }}>
       <div className="announcement-messagebar-body">{message}</div>
       <div className="announcement-close">
         <CloseIcon style={{ fill: "#98A2B3" }} />

Client/src/components/Announcements/AnnouncementsMessageBar/announcementsMessageBar.css

@@ -1,12 +1,10 @@
 :root {
-  --announcement-font-family: "Roboto", "Helvetica", "Arial", sans-serif;
   --announcement-font-size-0: 13px;
   --announcement-padding: 16px;
 }
 
 .announcement-messagebar-body {
   font-size: var(--announcement-font-size-0);
-  font-family: var(--announcement-font-family);
   padding: 0 var(--announcement-padding) 0 0;
   justify-content: center;
   align-items: center;

Client/src/components/Charts/Servers/ServerStatus.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import "./serverStatus.css";
 import PropTypes from "prop-types";
+import { useTheme } from "@mui/material";
 
 /**
  * @component
@@ -11,8 +12,16 @@ import PropTypes from "prop-types";
  * @returns {JSX.Element} - Renders the server status component
  */
 const ServerStatus = ({ title, value, state }) => {
+  const theme = useTheme();
+
+  const fontLookup = {
+    default: theme.font.default.font,
+  };
+
+  const fontFamily = fontLookup["default"];
+
   return (
-    <div className="server-status-tile">
+    <div className="server-status-tile" style={{ fontFamily: fontFamily }}>
       <div className="server-status-tile-title">{title}</div>
       <div className={`server-status-tile-value ` + " " + state}>{value}</div>
     </div>

Client/src/components/Charts/Servers/serverStatus.css

@@ -5,7 +5,6 @@
   --border-radius-0: 4px;
   --font-size-0: 1rem;
   --font-size-2: 36px;
-  --font-family-0: "Roboto", "Helvetica", "Arial", sans-serif;
 
   --color-up: #17b26a;
   --color-down: #f04438;
@@ -23,14 +22,12 @@
 
 .server-status-tile-title {
   font-size: var(--font-size-0);
-  font-family: var(--font-family-0);
   font-weight: bold;
   margin-bottom: 25px;
 }
 
 .server-status-tile-value {
   font-size: var(--font-size-2);
-  font-family: var(--font-family-0);
   font-weight: bolder;
 }
 

Client/src/components/Charts/Statistics/Statistic.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import "./statistic.css";
 import PropTypes from "prop-types";
+import { useTheme } from "@mui/material";
 
 /**
  * @component
@@ -10,8 +11,16 @@ import PropTypes from "prop-types";
  * @returns {JSX.Element} - Renders the statistic component
  */
 const Statistic = ({ title, value }) => {
+  const theme = useTheme();
+
+  const fontLookup = {
+    default: theme.font.default.font,
+  };
+
+  const fontFamily = fontLookup["default"];
+
   return (
-    <div className="statistic-tile">
+    <div className="statistic-tile" style={{ fontFamily: fontFamily }}>
       <div className="statistic-tile-title">{title}</div>
       <div className="statistic-tile-value">{value}</div>
     </div>

Client/src/components/Charts/Statistics/statistic.css

@@ -4,7 +4,6 @@
   --border-radius-0: 4px;
   --font-size-0: 1rem;
   --font-size-1: 13px;
-  --font-family-0: "Roboto", "Helvetica", "Arial", sans-serif;
   --font-color-0: #344054;
   --margin-bottom-0: 10px;
 }
@@ -20,14 +19,12 @@
 
 .statistic-tile-title {
   font-size: var(--font-size-0);
-  font-family: var(--font-family-0);
   color: var(--font-color-0);
   margin-bottom: var(--margin-bottom-0);
 }
 
 .statistic-tile-value {
   font-size: var(--font-size-1);
-  font-family: var(--font-family-0);
   color: var(--font-color-0);
   font-weight: 700;
   margin-bottom: var(--margin-bottom-0);

Client/src/components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx

@@ -1,6 +1,7 @@
 import "./dualButtonPopupModal.css";
 import React from "react";
 import PropTypes from "prop-types";
+import { useTheme } from "@mui/material";
 
 /**
  * @component
@@ -19,8 +20,19 @@ const DualButtonPopupModal = ({
   esc,
   save,
 }) => {
+  const theme = useTheme();
+
+  const fontLookup = {
+    default: theme.font.default.font,
+  };
+
+  const fontFamily = fontLookup["default"];
+
   return (
-    <div className="dual-button-popup-modal-holder">
+    <div
+      className="dual-button-popup-modal-holder"
+      style={{ fontFamily: fontFamily }}
+    >
       <div className="dual-button-popup-modal-subject">{subject}</div>
       <div className="dual-button-popup-modal-description">{description}</div>
       <div className="dual-modal-spacing"></div>

Client/src/components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css

@@ -1,6 +1,5 @@
 :root {
   --popup-color-border-0: #f2f2f2;
-  --popup-font-family-0: "Roboto", "Helvetica", "Arial", sans-serif;
   --popup-color-0: #101828;
   --popup-color-1: #475467;
   --color-0: #1570ef;
@@ -19,14 +18,12 @@
 }
 
 .dual-button-popup-modal-subject {
-  font-family: var(--popup-font-family-0);
   color: var(--popup-color-0);
   font-weight: bolder;
   font-size: 16px;
 }
 
 .dual-button-popup-modal-description {
-  font-family: var(--popup-font-family-0);
   color: var(--popup-color-1);
   font-size: 13px;
   margin-top: 10px;
@@ -51,7 +48,6 @@
   margin: 5px 0;
   margin-left: 20px;
   color: white;
-  font-family: var(--popup-font-family-0);
   cursor: pointer;
   font-size: 13px;
 }
@@ -59,7 +55,6 @@
 .transparent-discard-button {
   border: none;
   background-color: transparent;
-  font-family: var(--popup-font-family-0);
   margin: 5px 10px;
   font-size: 13px;
 }

Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx

@@ -2,6 +2,7 @@ import "./dualButtonPopupModalWithTextfields.css";
 import React from "react";
 import CloseIcon from "@mui/icons-material/Close";
 import PropTypes from "prop-types";
+import { useTheme } from "@mui/material";
 
 /**
  * @component
@@ -10,8 +11,16 @@ import PropTypes from "prop-types";
  * @returns {JSX.Element} - Renders a single text field component within a popup modal
  */
 const PopupModalTextfield = ({ title }) => {
+  const theme = useTheme();
+
+  const fontLookup = {
+    default: theme.font.default.font,
+  };
+
+  const fontFamily = fontLookup["default"];
+
   return (
-    <div className="popup-modal-input">
+    <div className="popup-modal-input" style={{ fontFamily: fontFamily }}>
       <div className="popup-modal-input-title">{title}</div>
       <input type="text" className="popup-modal-text-field" />
     </div>
@@ -27,8 +36,16 @@ const PopupModalTextfield = ({ title }) => {
  * @returns {JSX.Element} - Renders the dual button popup modal component with text fields
  */
 const DualButtonPopupModalWithTextfields = ({ title, esc, save }) => {
+  const theme = useTheme();
+
+  const fontLookup = {
+    default: theme.font.default.font,
+  };
+
+  const fontFamily = fontLookup["default"];
+
   return (
-    <div className="popup-modal-holder">
+    <div className="popup-modal-holder" style={{ fontFamily: fontFamily }}>
       <div className="popup-modal-header">
         <div className="popup-modal-title">{title}</div>
         <div className="popup-modal-close">

Client/src/components/TextFields/Description/DescriptionTextField.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import "./descriptionTextField.css";
 import { TextField } from "@mui/material";
 import PropTypes from "prop-types";
+import { useTheme } from "@mui/material";
 
 /**
  * @component
@@ -11,8 +12,19 @@ import PropTypes from "prop-types";
  * @returns {JSX.Element} - Renders the description text field component
  */
 const DescriptionTextField = ({ hintText, hasError }) => {
+  const theme = useTheme();
+
+  const fontLookup = {
+    default: theme.font.default.font,
+  };
+
+  const fontFamily = fontLookup["default"];
+
   return (
-    <div className="description-field-holder">
+    <div
+      className="description-field-holder"
+      style={{ fontFamily: fontFamily }}
+    >
       <div className="text-field-title">Description</div>
       <TextField
         id="description-field-area"

Client/src/components/TextFields/Description/descriptionTextField.css

@@ -1,6 +1,5 @@
 :root {
   --color-title-1: #344054;
-  --font-family-1: "Roboto", "Helvetica", "Arial", sans-serif;
   --text-field-margin-0: 10px 20px;
   --description-color-0: #344054;
 }
@@ -13,7 +12,6 @@
 .text-field-title {
   color: var(--color-title-1);
   font-weight: bold;
-  font-family: var(--font-family-1);
   margin-bottom: 10px;
   font-size: 13px;
   color: var(--description-color-0);
@@ -28,7 +26,6 @@
 
 .description-field-label {
   margin-top: 10px;
-  font-family: var(--font-family);
   font-size: 11px;
 }
 

Client/src/components/TextFields/Email/EmailTextField.jsx

@@ -3,6 +3,7 @@ import "./emailTextField.css";
 import { InputAdornment, TextField } from "@mui/material";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
+import { useTheme } from "@mui/material";
 
 /**
  * @component
@@ -25,13 +26,21 @@ const EmailTextField = ({
   helperText,
   error,
 }) => {
+  const theme = useTheme();
+
+  const fontLookup = {
+    default: theme.font.default.font,
+  };
+
+  const fontFamily = fontLookup["default"];
+
   const [showIcon, setShowIcon] = useState(false);
 
   const handleMouseEnter = () => setShowIcon(true);
   const handleMouseLeave = () => setShowIcon(false);
 
   return (
-    <>
+    <div style={{ fontFamily: fontFamily }}>
       <div className="email-text-field-title">Email</div>
       <div className="email-text-field">
         <TextField
@@ -72,7 +81,7 @@ const EmailTextField = ({
           onMouseLeave={handleMouseLeave}
         />
       </div>
-    </>
+    </div>
   );
 };
 

Client/src/components/TextFields/Email/emailTextField.css

@@ -15,7 +15,6 @@
 }
 
 .email-text-field-title {
-  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
   margin: 0 20px;
   margin-top: 30px;
   font-size: 13px;

Client/src/components/TextFields/Website/WebsiteTextField.jsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import "./websiteTextField.css";
 import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import { useTheme } from "@mui/material";
 
 /**
  * @component
@@ -16,6 +17,14 @@ const WebsiteTextField = ({
   hasCopyButton = false,
   hintText,
 }) => {
+  const theme = useTheme();
+
+  const fontLookup = {
+    default: theme.font.default.font,
+  };
+
+  const fontFamily = fontLookup["default"];
+
   const [copied, setCopied] = useState(false);
 
   const handleCopy = () => {
@@ -24,7 +33,7 @@ const WebsiteTextField = ({
   };
 
   return (
-    <>
+    <div style={{ fontFamily: fontFamily }}>
       <div className="website-textfield-title">Website</div>
       <div className="website-textfield">
         <label className="website-label">http://</label>
@@ -56,7 +65,7 @@ const WebsiteTextField = ({
         )}
       </div>
       <label className="website-textfield-hint">{hintText}</label>
-    </>
+    </div>
   );
 };
 

Client/src/components/TextFields/Website/websiteTextField.css

@@ -5,11 +5,9 @@
   --icon-color: #98a2b3;
   --text-field-margin-0: 10px 20px;
   --text-field-margin-1: 10px 20px 5px;
-  --font-family: "Roboto", "Helvetica", "Arial", sans-serif;
 }
 
 .website-textfield-title {
-  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
   margin: 0 20px;
   margin-top: 30px;
   font-size: 13px;
@@ -18,7 +16,6 @@
 }
 
 .website-textfield {
-  font-family: var(--font-family);
   display: flex;
   align-items: center;
   position: relative;
@@ -27,7 +24,6 @@
 
 .website-textfield-hint {
   margin: var(--text-field-margin-0);
-  font-family: var(--font-family);
   font-size: 11px;
 }
 

Client/src/components/Tooltips/TooltipWithTail/TooltipWithTail.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { styled } from "@mui/material/styles";
 import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip";
 import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
+import { useTheme } from "@mui/material";
 
 const CustomizedTooltip = styled(
   ({ className, placement, arrow, ...props }: TooltipProps) => (
@@ -22,9 +23,17 @@ const CustomizedTooltip = styled(
   },
 }));
 
-function TooltipWithTail({ placement, arrow = false, title, text }) {
+const TooltipWithTail = ({ placement, arrow = false, title, text }) => {
+  const theme = useTheme();
+
+  const fontLookup = {
+    default: theme.font.default.font,
+  };
+
+  const fontFamily = fontLookup["default"];
+
   return (
-    <div>
+    <div style={{ fontFamily: fontFamily }}>
       <CustomizedTooltip
         arrow={arrow}
         placement={placement}
@@ -40,6 +49,6 @@ function TooltipWithTail({ placement, arrow = false, title, text }) {
       </CustomizedTooltip>
     </div>
   );
-}
+};
 
 export default TooltipWithTail;

Client/src/components/Tooltips/TooltipWithTail/tooltipWithTail.css

@@ -15,7 +15,3 @@
   color: var(--tooltip-color-0);
   margin: var(--tooltip-margin);
 }
-
-/* box-shadow: 
-  0px 12px 16px -4px rgba(16, 24, 40, 0.08),
-  0px 4px 6px -2px rgba(16, 24, 40, 0.03); */