client/web: adjust colors and some UI margins

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>

client/web/src/components/app.tsx

@@ -102,14 +102,17 @@ function Header({
   auth: AuthResponse
   newSession: () => Promise<void>
 }) {
-  const [loc] = useLocation()
+  const [loc, setLocation] = useLocation()
 
   return (
     <>
       <div className="flex justify-between mb-12">
         <div className="flex gap-3">
-          <TailscaleIcon />
-          <div className="inline text-neutral-800 text-lg font-medium leading-snug">
+          <TailscaleIcon
+            className="cursor-pointer"
+            onClick={() => setLocation("/")}
+          />
+          <div className="inline text-gray-800 text-lg font-medium leading-snug">
             {node.DomainName}
           </div>
         </div>
@@ -118,7 +121,7 @@ function Header({
       {loc !== "/" && loc !== "/update" && (
         <Link
           to="/"
-          className="text-indigo-500 font-medium leading-snug block mb-[10px]"
+          className="text-blue-500 font-medium leading-snug block mb-[10px]"
         >
           &larr; Back to {node.DeviceName}
         </Link>

client/web/src/components/exit-node-selector.tsx

@@ -78,7 +78,7 @@ export default function ExitNodeSelector({
           {
             "border-gray-200": none,
             "bg-amber-600 border-amber-600": advertising,
-            "bg-indigo-500 border-indigo-500": using,
+            "bg-blue-500 border-blue-500": using,
           },
           className
         )}
@@ -87,7 +87,7 @@ export default function ExitNodeSelector({
           className={cx("flex-1 px-2 py-1.5 rounded-[1px]", {
             "bg-white hover:bg-stone-100": none,
             "bg-amber-600 hover:bg-orange-400": advertising,
-            "bg-indigo-500 hover:bg-indigo-400": using,
+            "bg-blue-500 hover:bg-blue-400": using,
             "cursor-not-allowed": disabled,
           })}
           onClick={() => setOpen(!open)}
@@ -95,7 +95,7 @@ export default function ExitNodeSelector({
         >
           <p
             className={cx(
-              "text-neutral-500 text-xs text-left font-medium uppercase tracking-wide mb-1",
+              "text-gray-500 text-xs text-left font-medium uppercase tracking-wide mb-1",
               { "bg-opacity-70 text-white": advertising || using }
             )}
           >
@@ -103,7 +103,7 @@ export default function ExitNodeSelector({
           </p>
           <div className="flex items-center">
             <p
-              className={cx("text-neutral-800", {
+              className={cx("text-gray-800", {
                 "text-white": advertising || using,
               })}
             >
@@ -128,7 +128,7 @@ export default function ExitNodeSelector({
           <button
             className={cx("px-3 py-2 rounded-sm text-white", {
               "bg-orange-400": advertising,
-              "bg-indigo-400": using,
+              "bg-blue-400": using,
               "cursor-not-allowed": disabled,
             })}
             onClick={(e) => {
@@ -213,7 +213,7 @@ function ExitNodeSelectorInner({
                   className="pb-1 mb-1 border-b last:border-b-0 last:mb-0"
                 >
                   {group.name && (
-                    <div className="px-4 py-2 text-neutral-500 text-xs font-medium uppercase tracking-wide">
+                    <div className="px-4 py-2 text-gray-500 text-xs font-medium uppercase tracking-wide">
                       {group.name}
                     </div>
                   )}

client/web/src/components/login-toggle.tsx

@@ -143,7 +143,7 @@ function LoginPopoverContent({
       {!auth.canManageNode &&
         (!auth.viewerIdentity || auth.authNeeded === AuthType.tailscale ? (
           <>
-            <p className="text-neutral-500 text-xs">
+            <p className="text-gray-500 text-xs">
               {auth.viewerIdentity ? (
                 <>
                   To make changes, sign in to confirm your identity. This extra
@@ -158,7 +158,7 @@ function LoginPopoverContent({
             </p>
             <button
               className={cx(
-                "w-full px-3 py-2 bg-indigo-500 rounded shadow text-center text-white text-sm font-medium mt-2",
+                "w-full px-3 py-2 bg-blue-500 rounded shadow text-center text-white text-sm font-medium mt-2",
                 {
                   "mb-2": auth.viewerIdentity,
                   "cursor-not-allowed": !canConnectOverTS,
@@ -173,7 +173,7 @@ function LoginPopoverContent({
             </button>
           </>
         ) : (
-          <p className="text-neutral-500 text-xs">
+          <p className="text-gray-500 text-xs">
             You don’t have permission to make changes to this device, but you
             can view most of its details.
           </p>
@@ -183,7 +183,7 @@ function LoginPopoverContent({
           <hr className="my-2" />
           <div className="flex items-center">
             <User className="flex-shrink-0" />
-            <p className="text-neutral-500 text-xs ml-2">
+            <p className="text-gray-500 text-xs ml-2">
               We recognize you because you are accessing this page from{" "}
               <span className="font-medium">
                 {auth.viewerIdentity.nodeName || auth.viewerIdentity.nodeIP}

client/web/src/components/views/device-details-view.tsx

@@ -23,7 +23,7 @@ export default function DeviceDetailsView({
     <>
       <h1 className="mb-10">Device details</h1>
       <div className="flex flex-col gap-4">
-        <div className="card">
+        <div className="-mx-5 card">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
               <h1>{node.DeviceName}</h1>
@@ -36,7 +36,7 @@ export default function DeviceDetailsView({
             </div>
             <button
               className={cx(
-                "px-3 py-2 bg-stone-50 rounded shadow border border-stone-200 text-neutral-800 text-sm font-medium",
+                "px-3 py-2 bg-stone-50 rounded shadow border border-stone-200 text-gray-800 text-sm font-medium",
                 { "cursor-not-allowed": readonly }
               )}
               onClick={() =>
@@ -55,7 +55,7 @@ export default function DeviceDetailsView({
           !readonly && (
             <UpdateAvailableNotification details={node.ClientVersion} />
           )}
-        <div className="card">
+        <div className="-mx-5 card">
           <h2 className="mb-2">General</h2>
           <table>
             <tbody>
@@ -95,7 +95,7 @@ export default function DeviceDetailsView({
             </tbody>
           </table>
         </div>
-        <div className="card">
+        <div className="-mx-5 card">
           <h2 className="mb-2">Addresses</h2>
           <table>
             <tbody>
@@ -121,7 +121,7 @@ export default function DeviceDetailsView({
           </table>
         </div>
         <Control.AdminContainer
-          className="text-neutral-500 text-sm leading-tight text-center"
+          className="text-gray-500 text-sm leading-tight text-center"
           node={node}
         >
           Want even more details? Visit{" "}

client/web/src/components/views/home-view.tsx

@@ -28,12 +28,10 @@ export default function HomeView({
             <div className="ml-3">
               <h1>{node.DeviceName}</h1>
               {/* TODO(sonia): display actual status */}
-              <p className="text-neutral-500 text-sm">Connected</p>
+              <p className="text-gray-500 text-sm">Connected</p>
             </div>
           </div>
-          <p className="text-neutral-800 text-lg leading-[25.20px]">
-            {node.IP}
-          </p>
+          <p className="text-gray-800 text-lg leading-[25.20px]">{node.IP}</p>
         </div>
         <ExitNodeSelector
           className="mb-5"
@@ -41,10 +39,7 @@ export default function HomeView({
           nodeUpdaters={nodeUpdaters}
           disabled={readonly}
         />
-        <Link
-          className="text-indigo-500 font-medium leading-snug"
-          to="/details"
-        >
+        <Link className="text-blue-500 font-medium leading-snug" to="/details">
           View device details &rarr;
         </Link>
       </div>
@@ -105,19 +100,19 @@ function SettingsCard({
     >
       <div>
         <div className="flex gap-2">
-          <p className="text-neutral-800 font-medium leading-tight mb-2">
+          <p className="text-gray-800 font-medium leading-tight mb-2">
             {title}
           </p>
           {badge && (
             <div className="h-5 px-2 bg-stone-100 rounded-full flex items-center gap-2">
               {badge.icon}
-              <div className="text-neutral-500 text-xs font-medium">
+              <div className="text-gray-500 text-xs font-medium">
                 {badge.text}
               </div>
             </div>
           )}
         </div>
-        <p className="text-neutral-500 text-sm leading-tight">{body}</p>
+        <p className="text-gray-500 text-sm leading-tight">{body}</p>
       </div>
       <div>
         <ArrowRight className="ml-3" />

client/web/src/components/views/ssh-view.tsx

@@ -23,7 +23,7 @@ export default function SSHView({
         your tailnet to SSH into it.{" "}
         <a
           href="https://tailscale.com/kb/1193/tailscale-ssh/"
-          className="text-indigo-700"
+          className="text-blue-700"
           target="_blank"
           rel="noreferrer"
         >
@@ -46,7 +46,7 @@ export default function SSHView({
         </div>
       </div>
       <Control.AdminContainer
-        className="text-neutral-500 text-sm leading-tight"
+        className="text-gray-500 text-sm leading-tight"
         node={node}
       >
         Remember to make sure that the{" "}

client/web/src/components/views/subnet-router-view.tsx

@@ -35,7 +35,7 @@ export default function SubnetRouterView({
         Add devices to your tailnet without installing Tailscale.{" "}
         <a
           href="https://tailscale.com/kb/1019/subnets/"
-          className="text-indigo-700"
+          className="text-blue-700"
           target="_blank"
           rel="noreferrer"
         >
@@ -52,7 +52,7 @@ export default function SubnetRouterView({
             value={inputText}
             onChange={(e) => setInputText(e.target.value)}
           />
-          <p className="my-2 h-6 text-neutral-500 text-sm leading-tight">
+          <p className="my-2 h-6 text-gray-500 text-sm leading-tight">
             Add multiple routes by providing a comma-separated list.
           </p>
           <Button
@@ -87,7 +87,7 @@ export default function SubnetRouterView({
                   className="flex justify-between items-center pb-2.5 mb-2.5 border-b border-b-gray-200 last:pb-0 last:mb-0 last:border-b-0"
                   key={r.Route}
                 >
-                  <div className="text-neutral-800 leading-snug">{r.Route}</div>
+                  <div className="text-gray-800 leading-snug">{r.Route}</div>
                   <div className="flex items-center gap-3">
                     <div className="flex items-center gap-1.5">
                       {r.Approved ? (
@@ -100,7 +100,7 @@ export default function SubnetRouterView({
                           Approved
                         </div>
                       ) : (
-                        <div className="text-neutral-500 text-sm leading-tight">
+                        <div className="text-gray-500 text-sm leading-tight">
                           Pending approval
                         </div>
                       )}
@@ -124,7 +124,7 @@ export default function SubnetRouterView({
               ))}
             </div>
             <Control.AdminContainer
-              className="mt-3 w-full text-center text-neutral-500 text-sm leading-tight"
+              className="mt-3 w-full text-center text-gray-500 text-sm leading-tight"
               node={node}
             >
               To approve routes, in the admin console go to{" "}
@@ -135,7 +135,7 @@ export default function SubnetRouterView({
             </Control.AdminContainer>
           </>
         ) : (
-          <div className="px-5 py-4 bg-stone-50 rounded-lg border border-gray-200 text-center text-neutral-500">
+          <div className="px-5 py-4 bg-stone-50 rounded-lg border border-gray-200 text-center text-gray-500">
             Not advertising any routes
           </div>
         )}