Updated default font and some small styling changes

Client/src/Components/Avatar/index.jsx

@@ -35,7 +35,8 @@ const Avatar = ({ src, small, sx }) => {
         src ? src : user?.avatarImage ? image : "/static/images/avatar/2.jpg"
       }
       sx={{
-        fontSize: small ? "13px" : "20px",
+        fontSize: small ? "13px" : "22px",
+        fontWeight: 400,
         display: "inline-flex",
         "&::before": {
           content: `""`,

Client/src/Components/BasicTable/index.css

@@ -85,7 +85,11 @@
 .MuiPaper-root + .MuiPagination-root ul {
   justify-content: center;
 }
-.MuiPaper-root + .MuiPagination-root ul li button {
+.MuiPaper-root
+  + .MuiPagination-root
+  ul
+  li:not(:first-child):not(:last-child)
+  button {
   font-size: var(--env-var-font-size-medium);
   color: var(--env-var-color-5);
   font-weight: 500;
@@ -123,6 +127,6 @@
 .MuiPaper-root + .MuiPagination-root .MuiPaginationItem-root.Mui-selected {
   background-color: var(--env-var-color-15);
 }
-.MuiPaper-root + .MuiPagination-root div.MuiPaginationItem-root{
+.MuiPaper-root + .MuiPagination-root div.MuiPaginationItem-root {
   user-select: none;
 }

Client/src/Components/Button/index.jsx

@@ -72,7 +72,8 @@ const Button = ({
       onClick={onClick}
       disableRipple
       sx={{
-        lineHeight: 1,
+        lineHeight: 1.5,
+        fontWeight: 400,
         boxShadow: "none",
         textTransform: "none",
         "&:focus": {

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

@@ -1,7 +1,6 @@
 import React from "react";
 import "./serverStatus.css";
 import PropTypes from "prop-types";
-import { useTheme } from "@mui/material";
 
 /**
  * @component
@@ -12,16 +11,8 @@ import { useTheme } from "@mui/material";
  * @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" style={{ fontFamily: fontFamily }}>
+    <div className="server-status-tile">
       <div className="server-status-tile-title">{title}</div>
       <div className={`server-status-tile-value ` + " " + state}>{value}</div>
     </div>

Client/src/Components/Inputs/Field/index.css

@@ -24,6 +24,7 @@
 .field h3.MuiTypography-root span.field-optional {
   opacity: 0.6;
   margin-left: 4px;
+  font-weight: 400;
 }
 .field h5.MuiTypography-root {
   position: relative;

Client/src/Components/Inputs/Select/index.css

@@ -15,6 +15,9 @@
   font-size: var(--env-var-font-size-medium);
   color: var(--env-var-color-5);
 }
+.select-wrapper h3.MuiTypography-root{
+  font-weight: 500;
+}
 .MuiInputBase-root:has(> .MuiSelect-select) fieldset {
   border-color: var(--env-var-color-29);
 }

Client/src/Pages/Account/index.css

@@ -31,7 +31,7 @@
 .account .MuiButtonGroup-root button {
   border-color: var(--env-var-color-16);
 }
-.account button{
+.account button:not(.MuiIconButton-root) {
   height: 34px;
 }
 .account [class$="-form"] {
@@ -70,7 +70,6 @@
   align-items: center;
 }
 
-
 /* for testing, will remove later */
 @media only screen and (max-width: 1600px) {
   .edit-profile-form__wrapper .MuiStack-root:not(.row-stack),
@@ -106,4 +105,4 @@
 }
 .edit-team-form .MuiTableBody-root .MuiTableCell-root {
   padding: var(--env-var-spacing-1-plus) var(--env-var-spacing-2) !important;
-}
+}

Client/src/Pages/Account/index.jsx

@@ -51,15 +51,12 @@ const Account = ({ open = "profile" }) => {
                   minWidth: "fit-content",
                   minHeight: 0,
                   paddingLeft: "0",
-                  paddingY: "10px",
-                  marginRight: "20px",
+                  paddingY: theme.gap.small,
+                  fontWeight: 400,
+                  marginRight: theme.gap.ml,
                   "&:focus": {
                     outline: "none",
                   },
-                  "& .MuiTouchRipple-root": {
-                    pointerEvents: "none",
-                    display: "none",
-                  },
                 }}
               />
             ))}

Client/src/Pages/Auth/Login.jsx

@@ -158,9 +158,9 @@ const Login = () => {
               }
               label="Remember me"
             />
-            <span onClick={() => navigate("/forgot-password")}>
+            <Typography component="span" onClick={() => navigate("/forgot-password")}>
               Forgot password
-            </span>
+            </Typography>
           </Stack>
         </Stack>
         <Stack gap={theme.gap.ml} mt={theme.gap.large}>
@@ -179,13 +179,13 @@ const Login = () => {
             <Typography component="p" sx={{ alignSelf: "center" }}>
               Don't have an account?
             </Typography>
-            <span
+            <Typography component="span"
               onClick={() => {
                 navigate("/register");
               }}
             >
               Sign up
-            </span>
+            </Typography>
           </Stack>
         </Stack>
       </form>

Client/src/Pages/Auth/index.css

@@ -103,7 +103,7 @@
 /* ///// */
 .login-page
   .MuiStack-root:not(:has(> .MuiButtonBase-root))
-  span:not(.MuiTypography-root):not(.field-required) {
+  > span:not(.field-required):not(.input-error) {
   color: var(--env-var-color-3);
   cursor: pointer;
   font-weight: 600;

Client/src/Pages/Monitors/Details/index.jsx

@@ -22,7 +22,9 @@ import "./index.css";
 const StatBox = ({ title, value }) => {
   return (
     <Box className="stat-box">
-      <Typography variant="h6">{title}</Typography>
+      <Typography variant="h6" sx={{ fontWeight: 400 }}>
+        {title}
+      </Typography>
       <Typography variant="h4">{value}</Typography>
     </Box>
   );
@@ -64,7 +66,13 @@ const DetailsPage = () => {
             data: [
               {
                 id: idx,
-                data: <StatusLabel status={status} text={status} />,
+                data: (
+                  <StatusLabel
+                    status={status}
+                    text={status}
+                    customStyles={{ textTransform: "capitalize" }}
+                  />
+                ),
               },
               { id: idx + 1, data: new Date(check.createdAt).toLocaleString() },
               { id: idx + 2, data: check.statusCode },

Client/src/Pages/PageSpeed/index.css

@@ -31,3 +31,7 @@
   font-size: var(--env-var-font-size-small);
   border-color: var(--env-var-color-29);
 }
+.page-speed button {
+  height: 34px;
+  align-self: flex-end;
+}

Client/src/Pages/PageSpeed/index.jsx

@@ -8,6 +8,8 @@ import { getPageSpeedByUserId } from "../../Features/PageSpeedMonitor/pageSpeedM
 import PageSpeedIcon from "../../assets/icons/page-speed.svg?react";
 import Fallback from "../../Components/Fallback";
 import "./index.css";
+import Button from "../../Components/Button";
+import { useNavigate } from "react-router";
 
 const Card = ({ data }) => {
   const theme = useTheme();
@@ -63,6 +65,7 @@ const Card = ({ data }) => {
 const PageSpeed = () => {
   const theme = useTheme();
   const dispatch = useDispatch();
+  const navigate = useNavigate();
 
   const { authToken } = useSelector((state) => state.auth);
   const { monitors } = useSelector((state) => state.pageSpeedMonitors);
@@ -74,10 +77,23 @@ const PageSpeed = () => {
     <Box className="page-speed">
       {monitors ? (
         <Stack gap={theme.gap.xs}>
-          <Typography component="h1">All page speed monitors</Typography>
-          <Typography mb={theme.gap.large}>
-            Click on one of the monitors to get more site speed information.
-          </Typography>
+          <Stack
+            direction="row"
+            justifyContent="space-between"
+            mb={theme.gap.large}
+          >
+            <Box>
+              <Typography component="h1">All page speed monitors</Typography>
+              <Typography mt={theme.gap.xs}>
+                Click on one of the monitors to get more site speed information.
+              </Typography>
+            </Box>
+            <Button
+              level="primary"
+              label="Create new"
+              onClick={() => navigate("/page-speed/create")}
+            />
+          </Stack>
           <Grid container spacing={theme.gap.large}>
             {monitors?.map((monitor) => (
               <Card data={monitor} key={`monitor-${monitor._id}`} />

Client/src/Utils/Theme.js

@@ -33,9 +33,11 @@ const shadow =
   "0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03)";
 
 // Global Font Family
-const fontFamilyDefault = '"Roboto", "Helvetica", "Arial", sans-serif';
+const fontFamilyDefault =
+  '"Inter","system-ui", "Avenir", "Helvetica", "Arial", sans-serif';
 
 const theme = createTheme({
+  typography: { fontFamily: fontFamilyDefault, fontSize: 13 },
   palette: {
     primary: {
       main: primaryMain,
@@ -78,11 +80,6 @@ const theme = createTheme({
       fillGray: otherColorsFillGray,
     },
   },
-  font: {
-    default: {
-      font: fontFamilyDefault,
-    },
-  },
   shape: {
     borderRadius: 4,
     borderThick: 2,

Client/src/index.css

@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   font-weight: 400;