From 8241d915f56fe5e1cd4da41911148bd5ddbf5a18 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Thu, 12 Jan 2023 13:25:48 +0000
Subject: [PATCH 1/3] Make navbar wider

---
 site/src/components/NavbarView/NavbarView.tsx | 43 +++++--------------
 1 file changed, 11 insertions(+), 32 deletions(-)

diff --git a/site/src/components/NavbarView/NavbarView.tsx b/site/src/components/NavbarView/NavbarView.tsx
index ea1835cabc4cf..e8ccfe1ee4f5e 100644
--- a/site/src/components/NavbarView/NavbarView.tsx
+++ b/site/src/components/NavbarView/NavbarView.tsx
@@ -4,13 +4,13 @@ import List from "@material-ui/core/List"
 import ListItem from "@material-ui/core/ListItem"
 import { makeStyles } from "@material-ui/core/styles"
 import MenuIcon from "@material-ui/icons/Menu"
+import { CoderIcon } from "components/Icons/CoderIcon"
 import { useState } from "react"
 import { NavLink, useLocation } from "react-router-dom"
 import { colors } from "theme/colors"
 import * as TypesGen from "../../api/typesGenerated"
-import { containerWidth, navHeight, sidePadding } from "../../theme/constants"
+import { navHeight } from "../../theme/constants"
 import { combineClasses } from "../../util/combineClasses"
-import { Logo } from "../Icons/Logo"
 import { UserDropdown } from "../UserDropdown/UsersDropdown"
 
 export interface NavbarViewProps {
@@ -117,7 +117,7 @@ export const NavbarView: React.FC<React.PropsWithChildren<NavbarViewProps>> = ({
               {logo_url ? (
                 <img src={logo_url} alt="Custom Logo" />
               ) : (
-                <Logo fill="white" opacity={1} width={125} />
+                <CoderIcon className={styles.logo} />
               )}
             </div>
             <NavItems
@@ -131,7 +131,7 @@ export const NavbarView: React.FC<React.PropsWithChildren<NavbarViewProps>> = ({
           {logo_url ? (
             <img src={logo_url} alt="Custom Logo" />
           ) : (
-            <Logo fill="white" opacity={1} width={125} />
+            <CoderIcon fill="white" opacity={1} width={125} />
           )}
         </NavLink>
 
@@ -159,20 +159,13 @@ const useStyles = makeStyles((theme) => ({
   root: {
     height: navHeight,
     background: theme.palette.background.paper,
-    "@media (display-mode: standalone)": {
-      borderTop: `1px solid ${theme.palette.divider}`,
-    },
     borderBottom: `1px solid ${theme.palette.divider}`,
-    transition: "margin 150ms ease",
   },
   wrapper: {
     position: "relative",
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
-    margin: "0 auto",
-    maxWidth: containerWidth,
-    padding: `0 ${sidePadding}px`,
     [theme.breakpoints.up("md")]: {
       justifyContent: "flex-start",
     },
@@ -195,6 +188,7 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   profileButton: {
+    paddingRight: theme.spacing(2),
     [theme.breakpoints.up("md")]: {
       marginLeft: "auto",
     },
@@ -208,11 +202,14 @@ const useStyles = makeStyles((theme) => ({
     alignItems: "center",
     display: "flex",
     height: navHeight,
-    paddingRight: theme.spacing(4),
+    color: theme.palette.text.primary,
+    width: "fit-content",
+    maxWidth: theme.spacing(15),
+    padding: theme.spacing(2),
     // svg is for the Coder logo, img is for custom images
     "& svg, & img": {
-      width: 109,
-      maxHeight: `calc(${navHeight}px)`,
+      width: "100%",
+      height: "100%",
     },
   },
   title: {
@@ -238,26 +235,8 @@ const useStyles = makeStyles((theme) => ({
 
     // NavLink adds this class when the current route matches.
     "&.active": {
-      position: "relative",
       color: theme.palette.text.primary,
       fontWeight: "bold",
-
-      "&::before": {
-        content: `" "`,
-        left: 0,
-        width: 2,
-        height: "100%",
-        background: theme.palette.secondary.dark,
-        position: "absolute",
-
-        [theme.breakpoints.up("md")]: {
-          bottom: 0,
-          left: theme.spacing(3),
-          width: `calc(100% - 2 * ${theme.spacing(3)}px)`,
-          right: theme.spacing(3),
-          height: 2,
-        },
-      },
     },
 
     [theme.breakpoints.up("md")]: {

From efc75b1f75f2de106be1379a7228f6bd57361e16 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Thu, 12 Jan 2023 13:45:38 +0000
Subject: [PATCH 2/3] Adjust logo

---
 site/src/components/NavbarView/NavbarView.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/site/src/components/NavbarView/NavbarView.tsx b/site/src/components/NavbarView/NavbarView.tsx
index e8ccfe1ee4f5e..fbbf81e9d184a 100644
--- a/site/src/components/NavbarView/NavbarView.tsx
+++ b/site/src/components/NavbarView/NavbarView.tsx
@@ -114,11 +114,13 @@ export const NavbarView: React.FC<React.PropsWithChildren<NavbarViewProps>> = ({
         >
           <div className={styles.drawer}>
             <div className={styles.drawerHeader}>
-              {logo_url ? (
-                <img src={logo_url} alt="Custom Logo" />
-              ) : (
-                <CoderIcon className={styles.logo} />
-              )}
+              <div className={combineClasses([styles.logo, styles.drawerLogo])}>
+                {logo_url ? (
+                  <img src={logo_url} alt="Custom Logo" />
+                ) : (
+                  <CoderIcon />
+                )}
+              </div>
             </div>
             <NavItems
               canViewAuditLog={canViewAuditLog}
@@ -203,15 +205,18 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     height: navHeight,
     color: theme.palette.text.primary,
-    width: "fit-content",
-    maxWidth: theme.spacing(15),
     padding: theme.spacing(2),
     // svg is for the Coder logo, img is for custom images
     "& svg, & img": {
       width: "100%",
       height: "100%",
+      objectFit: "contain",
     },
   },
+  drawerLogo: {
+    padding: 0,
+    maxHeight: theme.spacing(5),
+  },
   title: {
     flex: 1,
     textAlign: "center",

From 486214731a03aca369eed072cc92ce69052771cc Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Thu, 12 Jan 2023 16:26:13 +0000
Subject: [PATCH 3/3] Remove unecessary test

---
 .../src/components/NavbarView/NavbarView.test.tsx | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/site/src/components/NavbarView/NavbarView.test.tsx b/site/src/components/NavbarView/NavbarView.test.tsx
index 2b65a81b0026c..cae48b7a8ddcf 100644
--- a/site/src/components/NavbarView/NavbarView.test.tsx
+++ b/site/src/components/NavbarView/NavbarView.test.tsx
@@ -20,21 +20,6 @@ describe("NavbarView", () => {
     process.env = env
   })
 
-  it("renders content", async () => {
-    // When
-    render(
-      <NavbarView
-        user={MockUser}
-        onSignOut={noop}
-        canViewAuditLog
-        canViewDeployment
-      />,
-    )
-
-    // Then
-    await screen.findAllByText("Coder", { exact: false })
-  })
-
   it("workspaces nav link has the correct href", async () => {
     render(
       <NavbarView