client/web: style tweaks

Style changes made in live pairing session.

Updates #10261

Co-authored-by: Will Norris <will@tailscale.com>
Co-authored-by: Alessandro Mingione <alessandro@tailscale.com>
Signed-off-by: Sonia Appasamy <sonia@tailscale.com>

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

@@ -33,7 +33,7 @@ export default function HomeView({
       <h2 className="mb-3">This device</h2>
       <div className="-mx-5 card mb-9">
         <div className="flex justify-between items-center text-lg mb-5">
-          <div className="flex items-center">
+          <Link className="flex items-center" to="/details">
             <div className="w-10 h-10 bg-gray-100 rounded-full justify-center items-center inline-flex">
               <Machine />
             </div>
@@ -49,9 +49,10 @@ export default function HomeView({
                 {node.Status === "Running" ? "Connected" : "Offline"}
               </p>
             </div>
-          </div>
+          </Link>
           <AddressCard
-            triggerClassName="text-gray-800 text-lg leading-[25.20px]"
+            className="-mr-2"
+            triggerClassName="relative text-gray-800 text-lg leading-[25.20px]"
             v4Address={node.IPv4}
             v6Address={node.IPv6}
             shortDomain={node.DeviceName}
@@ -150,7 +151,7 @@ function SettingsCard({
 
   return (
     <button
-      className={cx("-mx-5 card cursor-pointer", className)}
+      className={cx("-mx-5 card cursor-pointer", { "pb-4": footer }, className)}
       onClick={() => setLocation(link)}
     >
       <div className="flex justify-between items-center">

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

@@ -4,6 +4,7 @@
 import React from "react"
 import * as Control from "src/components/control-components"
 import { NodeData, NodeUpdaters } from "src/hooks/node-data"
+import Card from "src/ui/card"
 import Toggle from "src/ui/toggle"
 
 export default function SSHView({
@@ -30,23 +31,25 @@ export default function SSHView({
           Learn more →
         </a>
       </p>
-      <div className="-mx-5 px-4 py-3 bg-white rounded-lg border border-gray-200 flex gap-2.5 mb-3">
-        <Toggle
-          checked={node.RunningSSHServer}
-          onChange={() =>
-            nodeUpdaters.patchPrefs({
-              RunSSHSet: true,
-              RunSSH: !node.RunningSSHServer,
-            })
-          }
-          disabled={readonly}
-        />
-        <div className="text-black text-sm font-medium leading-tight">
-          Run Tailscale SSH server
-        </div>
-      </div>
+      <Card className="-mx-5 p-4">
+        <label className="flex gap-3 items-center">
+          <Toggle
+            checked={node.RunningSSHServer}
+            onChange={() =>
+              nodeUpdaters.patchPrefs({
+                RunSSHSet: true,
+                RunSSH: !node.RunningSSHServer,
+              })
+            }
+            disabled={readonly}
+          />
+          <div className="text-black text-sm font-medium leading-tight">
+            Run Tailscale SSH server
+          </div>
+        </label>
+      </Card>
       <Control.AdminContainer
-        className="text-gray-500 text-sm leading-tight"
+        className="text-gray-500 text-sm leading-tight mt-3"
         node={node}
       >
         Remember to make sure that the{" "}

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

@@ -8,6 +8,8 @@ import { ReactComponent as Plus } from "src/assets/icons/plus.svg"
 import * as Control from "src/components/control-components"
 import { NodeData, NodeUpdaters } from "src/hooks/node-data"
 import Button from "src/ui/button"
+import Card from "src/ui/card"
+import EmptyState from "src/ui/empty-state"
 import Input from "src/ui/input"
 
 export default function SubnetRouterView({
@@ -50,7 +52,7 @@ export default function SubnetRouterView({
       </p>
       {!readonly &&
         (inputOpen ? (
-          <div className="-mx-5 card shadow">
+          <div className="-mx-5 card !border-0 shadow-popover">
             <p className="font-medium leading-snug mb-3">
               Advertise new routes
             </p>
@@ -150,9 +152,9 @@ export default function SubnetRouterView({
             )}
           </>
         ) : (
-          <div className="px-5 py-4 bg-gray-50 rounded-lg border border-gray-200 text-center text-gray-500">
-            Not advertising any routes
-          </div>
+          <Card empty>
+            <EmptyState description="Not advertising any routes" />
+          </Card>
         )}
       </div>
     </>