From 5e125750bc688df940d6a40b108bea08bc51f4bb Mon Sep 17 00:00:00 2001
From: Sonia Appasamy <sonia@tailscale.com>
Date: Fri, 1 Dec 2023 17:48:09 -0500
Subject: [PATCH] client/web: center and fix height of header

Centers login pill with Tailscale icon, and fixes height of login
pill.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
---
 client/web/src/components/app.tsx          | 2 +-
 client/web/src/components/login-toggle.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/web/src/components/app.tsx b/client/web/src/components/app.tsx
index cf4a3b622..6d2d438cd 100644
--- a/client/web/src/components/app.tsx
+++ b/client/web/src/components/app.tsx
@@ -140,7 +140,7 @@ function Header({
 
   return (
     <>
-      <div className="flex justify-between mb-12">
+      <div className="flex justify-between items-center mb-12">
         <div className="flex gap-3">
           <TailscaleIcon
             className="cursor-pointer"
diff --git a/client/web/src/components/login-toggle.tsx b/client/web/src/components/login-toggle.tsx
index b6a32ac52..f3ed08be2 100644
--- a/client/web/src/components/login-toggle.tsx
+++ b/client/web/src/components/login-toggle.tsx
@@ -37,7 +37,7 @@ export default function LoginToggle({
       {!auth.canManageNode ? (
         <button
           className={cx(
-            "pl-3 py-1 bg-zinc-800 rounded-full flex justify-start items-center",
+            "pl-3 py-1 bg-gray-700 rounded-full flex justify-start items-center h-[34px]",
             { "pr-1": auth.viewerIdentity, "pr-3": !auth.viewerIdentity }
           )}
           onClick={() => setOpen(!open)}
@@ -56,10 +56,10 @@ export default function LoginToggle({
       ) : (
         <div
           className={cx(
-            "w-[34px] h-[34px] p-1 rounded-full items-center inline-flex",
+            "w-[34px] h-[34px] p-1 rounded-full justify-center items-center inline-flex",
             {
               "bg-transparent": !open,
-              "bg-neutral-300": open,
+              "bg-gray-300": open,
             }
           )}
         >