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>
This commit is contained in:
Sonia Appasamy 2023-12-01 17:48:09 -05:00 committed by Will Norris
parent f13255d54d
commit 5e125750bc
2 changed files with 4 additions and 4 deletions

View File

@ -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"

View File

@ -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,
}
)}
>