client/web: small UI cleanups

Updates:
* Card component used throughout instead of custom card class
* SSH toggle changed to non-editable text/status icon in readonly
* Red error text on subnet route input when route post failed

Updates #10261

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

client/web/src/components/app.tsx

@@ -12,6 +12,8 @@ import SubnetRouterView from "src/components/views/subnet-router-view"
 import { UpdatingView } from "src/components/views/updating-view"
 import useAuth, { AuthResponse } from "src/hooks/auth"
 import { Feature, featureDescription, NodeData } from "src/types"
+import Card from "src/ui/card"
+import EmptyState from "src/ui/empty-state"
 import LoadingDots from "src/ui/loading-dots"
 import useSWR from "swr"
 import { Link, Route, Router, Switch, useLocation } from "wouter"
@@ -64,7 +66,7 @@ function WebClient({
           <FeatureRoute path="/ssh" feature="ssh" node={node}>
             <SSHView readonly={!auth.canManageNode} node={node} />
           </FeatureRoute>
-          <Route path="/serve">{/* TODO */}Share local content</Route>
+          {/* <Route path="/serve">Share local content</Route> */}
           <FeatureRoute path="/update" feature="auto-update" node={node}>
             <UpdatingView
               versionInfo={node.ClientVersion}
@@ -72,7 +74,9 @@ function WebClient({
             />
           </FeatureRoute>
           <Route>
-            <div className="mt-8 card">Page not found</div>
+            <Card className="mt-8">
+              <EmptyState description="Page not found" />
+            </Card>
           </Route>
         </Switch>
       </Router>
@@ -100,9 +104,13 @@ function FeatureRoute({
   return (
     <Route path={path}>
       {!node.Features[feature] ? (
-        <div className="mt-8 card">
-          {featureDescription(feature)} not available on this device.
-        </div>
+        <Card className="mt-8">
+          <EmptyState
+            description={`${featureDescription(
+              feature
+            )} not available on this device.`}
+          />
+        </Card>
       ) : (
         children
       )}