mirrors/tailscale
1
0
Fork 0
Code Issues Pull Requests Projects Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

30
client/web/src/components/exit-node-selector.tsx
View File

@ -85,10 +85,12 @@ export default function ExitNodeSelector({
>
<button
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-blue-500 hover:bg-blue-400": using,
"cursor-not-allowed": disabled,
"bg-white": none,
"hover:bg-gray-100": none && !disabled,
"bg-orange-600": advertising,
"hover:bg-orange-400": advertising && !disabled,
"bg-blue-500": using,
"hover:bg-blue-400": using && !disabled,
})}
onClick={() => setOpen(!open)}
disabled={disabled}
@ -116,27 +118,27 @@ export default function ExitNodeSelector({
? "Running as exit node"
: selected.Name}
</p>
<ChevronDown
className={cx("ml-1", {
"stroke-neutral-800": none,
"stroke-white": advertising || using,
})}
/>
{!disabled && (
<ChevronDown
className={cx("ml-1", {
"stroke-gray-800": none,
"stroke-white": advertising || using,
})}
/>
)}
</div>
</button>
{(advertising || using) && (
{!disabled && (advertising || using) && (
<button
className={cx("px-3 py-2 rounded-sm text-white", {
"bg-orange-400": advertising,
"bg-blue-400": using,
"cursor-not-allowed": disabled,
})}
onClick={(e) => {
e.preventDefault()
e.stopPropagation()
handleSelect(noExitNode)
}}
disabled={disabled}
>
Disable
</button>
@ -252,7 +254,7 @@ function ExitNodeSelectorItem({
return (
<button
key={node.ID}
className="w-full px-4 py-2 flex justify-between items-center cursor-pointer hover:bg-stone-100"
className="w-full px-4 py-2 flex justify-between items-center cursor-pointer hover:bg-gray-100"
onClick={onSelect}
>
<div>