From a655e31774e8008afd06f4125095a90480c9cccb Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 10 Jul 2023 19:20:53 +0000
Subject: [PATCH 1/2] refactor(site): adjust the proxy menu design

---
 site/src/components/Navbar/NavbarView.tsx     | 56 ++++++++++---------
 .../ProxyStatusLatency/ProxyStatusLatency.tsx |  3 +-
 2 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/site/src/components/Navbar/NavbarView.tsx b/site/src/components/Navbar/NavbarView.tsx
index cb3d522a84e59..c3bfdc1131b04 100644
--- a/site/src/components/Navbar/NavbarView.tsx
+++ b/site/src/components/Navbar/NavbarView.tsx
@@ -29,6 +29,7 @@ import {
   HelpTooltipText,
   HelpTooltipTitle,
 } from "components/Tooltips/HelpTooltip"
+import Typography from "@mui/material/Typography"
 
 export const USERS_LINK = `/users?filter=${encodeURIComponent("status:active")}`
 
@@ -191,7 +192,6 @@ export const NavbarView: FC<NavbarViewProps> = ({
 const ProxyMenu: FC<{ proxyContextValue: ProxyContextValue }> = ({
   proxyContextValue,
 }) => {
-  const styles = useStyles()
   const buttonRef = useRef<HTMLButtonElement>(null)
   const [isOpen, setIsOpen] = useState(false)
   const [refetchDate, setRefetchDate] = useState<Date>()
@@ -275,33 +275,39 @@ const ProxyMenu: FC<{ proxyContextValue: ProxyContextValue }> = ({
         onClose={closeMenu}
         sx={{ "& .MuiMenu-paper": { py: 1 } }}
       >
-        <MenuItem
-          sx={[
-            { fontSize: 14 },
-            { "&:hover": { backgroundColor: "transparent" } },
-            { wordWrap: "break-word" },
-            { inlineSize: "200px" },
-            { whiteSpace: "normal" },
-            { textAlign: "center" },
-          ]}
-          onClick={(e) => {
-            // Stop the menu from closing
-            e.stopPropagation()
+        <Box
+          sx={{
+            w: "100%",
+            fontSize: 14,
+            padding: 2,
+            maxWidth: "320px",
+            lineHeight: "140%",
           }}
         >
-          <div>
+          <Typography
+            component="h4"
+            sx={{
+              fontSize: "inherit",
+              fontWeight: 600,
+              lineHeight: "inherit",
+              margin: 0,
+            }}
+          >
             Reduce workspace latency by selecting the region nearest you.
-            {/* This was always on a newline below the text. This puts it on the same line.
-                It still doesn't look great, but it is marginally better.  */}
-            <HelpTooltip buttonClassName={styles.displayInitial}>
-              <HelpTooltipTitle>Workspace Proxy Selection</HelpTooltipTitle>
-              <HelpTooltipText>
-                Only applies to web connections. Local ssh connections will
-                automatically select the nearest region based on latency.
-              </HelpTooltipText>
-            </HelpTooltip>
-          </div>
-        </MenuItem>
+          </Typography>
+          <Typography
+            component="p"
+            sx={{
+              fontSize: "inherit",
+              color: (theme) => theme.palette.text.secondary,
+              lineHeight: "inherit",
+              marginTop: 0.5,
+            }}
+          >
+            * Only applies to web connections. Local ssh connections will
+            automatically select the nearest region based on latency.
+          </Typography>
+        </Box>
         <Divider sx={{ borderColor: (theme) => theme.palette.divider }} />
         {proxyContextValue.proxies?.map((proxy) => (
           <MenuItem
diff --git a/site/src/components/ProxyStatusLatency/ProxyStatusLatency.tsx b/site/src/components/ProxyStatusLatency/ProxyStatusLatency.tsx
index 301efe990ccce..6a6b09e3d057e 100644
--- a/site/src/components/ProxyStatusLatency/ProxyStatusLatency.tsx
+++ b/site/src/components/ProxyStatusLatency/ProxyStatusLatency.tsx
@@ -17,10 +17,11 @@ export const ProxyStatusLatency: FC<{
     return (
       <Tooltip title="Loading latency...">
         <CircularProgress
-          size="14px"
+          size={14}
           sx={{
             // Always use the no latency color for loading.
             color: getLatencyColor(theme, undefined),
+            marginLeft: "auto",
           }}
         />
       </Tooltip>

From 72a4caf994bb2634ab620264cab394368d36bfd0 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 10 Jul 2023 19:47:13 +0000
Subject: [PATCH 2/2] Remove unused imports

---
 site/src/components/Navbar/NavbarView.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/site/src/components/Navbar/NavbarView.tsx b/site/src/components/Navbar/NavbarView.tsx
index c3bfdc1131b04..a2ae924fbb039 100644
--- a/site/src/components/Navbar/NavbarView.tsx
+++ b/site/src/components/Navbar/NavbarView.tsx
@@ -24,11 +24,6 @@ import Skeleton from "@mui/material/Skeleton"
 import { BUTTON_SM_HEIGHT } from "theme/theme"
 import { ProxyStatusLatency } from "components/ProxyStatusLatency/ProxyStatusLatency"
 import { usePermissions } from "hooks/usePermissions"
-import {
-  HelpTooltip,
-  HelpTooltipText,
-  HelpTooltipTitle,
-} from "components/Tooltips/HelpTooltip"
 import Typography from "@mui/material/Typography"
 
 export const USERS_LINK = `/users?filter=${encodeURIComponent("status:active")}`