client/web: button, link, and other small UI updates

Makes the following changes:
* Use “link” class in various spots
* Remove button appearance on Exit Node dropdown in readonly mode
* Update `-stone-` colors to `-gray-` (couple spots missed by
  original color config commit)
* Pull full ui/button component from admin panel, and update
  buttons throughout UI to use this component
* Remove various buttons in readonly view to match mocks
* Add route (and “pending approval”) highlights to Subnet router
  settings card
* Delete legacy client button styles from index.css
* Fix overflow of IPv6 address on device details view

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
This commit is contained in:
Sonia Appasamy
2023-12-04 15:20:38 -05:00
committed by Sonia Appasamy
parent 64a26b221b
commit 95e9d22a16
14 changed files with 545 additions and 333 deletions
@@ -3,13 +3,16 @@
import React from "react"
import { VersionInfo } from "src/hooks/self-update"
import { Link } from "wouter"
import Button from "src/ui/button"
import { useLocation } from "wouter"
export function UpdateAvailableNotification({
details,
}: {
details: VersionInfo
}) {
const [, setLocation] = useLocation()
return (
<div className="card">
<h2 className="mb-2">
@@ -22,12 +25,13 @@ export function UpdateAvailableNotification({
: "A new update"}{" "}
is now available. <ChangelogText version={details.LatestVersion} />
</p>
<Link
className="button button-blue mt-3 text-sm inline-block"
to="/update"
<Button
className="mt-3 inline-block"
sizeVariant="small"
onClick={() => setLocation("/update")}
>
Update now
</Link>
</Button>
</div>
)
}