From 9051c475e15e2046794ce7b01839996272c58807 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Fri, 2 Aug 2024 13:54:44 -0400
Subject: [PATCH] Fixed alignment issues

---
 Client/src/Components/BasicTable/index.css | 9 ++++-----
 Client/src/Components/NavBar/index.jsx     | 6 +++++-
 Client/src/Pages/Monitors/index.css        | 2 +-
 Client/src/Pages/Monitors/index.jsx        | 8 ++++++--
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css
index 9d8b31217..fd1f75b53 100644
--- a/Client/src/Components/BasicTable/index.css
+++ b/Client/src/Components/BasicTable/index.css
@@ -3,23 +3,22 @@
   height: var(--env-var-img-width-2);
   color: var(--env-var-color-5);
   margin-right: 10px;
-  margin-bottom: 2px;
 }
 .MuiTable-root .host a svg {
   width: var(--env-var-font-size-large);
   height: var(--env-var-font-size-large);
 }
-.MuiTable-root .host div:nth-child(3) {
-  font-size: var(--env-var-font-size-small);
-}
 .MuiTable-root .host div:nth-child(2) {
   width: fit-content;
-  margin-right: 10px;
   font-weight: 700;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
 }
+.MuiTable-root .host div:nth-child(2) span {
+  font-size: var(--env-var-font-size-small);
+  margin-left: 10px;
+}
 
 .MuiTable-root .label {
   line-height: 1;
diff --git a/Client/src/Components/NavBar/index.jsx b/Client/src/Components/NavBar/index.jsx
index bdf1231f7..08eb91580 100644
--- a/Client/src/Components/NavBar/index.jsx
+++ b/Client/src/Components/NavBar/index.jsx
@@ -145,7 +145,10 @@ function NavBar() {
           </IconButton>
         </Tooltip>
         <Menu
-          sx={{ mt: theme.spacing(5.5) }}
+          sx={{
+            mt: theme.spacing(5.5),
+            borderRadius: "4px",
+          }}
           id="menu-appbar"
           anchorEl={anchorElUser}
           anchorOrigin={{
@@ -172,6 +175,7 @@ function NavBar() {
                 fontSize="var(--env-var-font-size-medium)"
                 textAlign="center"
                 marginLeft="8px"
+                sx={{ fontWeight: 400, color: "#344054" }}
               >
                 {setting}
               </Typography>
diff --git a/Client/src/Pages/Monitors/index.css b/Client/src/Pages/Monitors/index.css
index bce3bee72..a9317d5da 100644
--- a/Client/src/Pages/Monitors/index.css
+++ b/Client/src/Pages/Monitors/index.css
@@ -51,7 +51,7 @@ body:has(.monitors) .actions-menu li.MuiButtonBase-root {
 body:has(.monitors) .actions-menu li.MuiButtonBase-root:last-of-type {
   color: var(--env-var-color-26);
 }
-body:has(.monitors) .MuiModal-root p.MuiTypography-root {
+body:has(.monitors) .actions-menu .MuiModal-root p.MuiTypography-root {
   font-size: var(--env-var-font-size-medium);
   color: var(--env-var-color-2);
 }
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index 9c9f99d15..9eb1c0ced 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -44,8 +44,12 @@ const Host = ({ params }) => {
       <a href={params.url} target="_blank" rel="noreferrer">
         <OpenInNewPage />
       </a>
-      <Box>{params.title}</Box>
-      <Box sx={{ color: params.percentageColor }}>{params.precentage}%</Box>
+      <Box>
+        {params.title}
+        <Typography component="span" sx={{ color: params.percentageColor }}>
+          {params.precentage}%
+        </Typography>
+      </Box>
     </Stack>
   );
 };