webnet/tailscale
1
0
Fork 0
Code Issues Pull Requests 3 Packages Projects Releases Wiki Activity

client/web: small UI cleanups

Browse Source 
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>
This commit is contained in:
Sonia Appasamy
2023-12-07 20:00:36 -05:00
committed by Sonia Appasamy
parent e5e5ebda44
commit d5d42d0293
7 changed files with 130 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/web/src/components/views/home-view.tsx
+34 -34
View File
@@ -9,6 +9,7 @@ import { ReactComponent as Machine } from "src/assets/icons/machine.svg"
import AddressCard from "src/components/address-copy-card"
import ExitNodeSelector from "src/components/exit-node-selector"
import { NodeData } from "src/types"
import Card from "src/ui/card"
import { pluralize } from "src/utils/util"
import { Link, useLocation } from "wouter"
@@ -30,14 +31,16 @@ export default function HomeView({
return (
<div className="mb-12 w-full">
<h2 className="mb-3">This device</h2>
<div className="-mx-5 card mb-9">
<Card noPadding className="-mx-5 p-5 mb-9">
<div className="flex justify-between items-center text-lg mb-5">
<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>
<div className="ml-3">
<h1>{node.DeviceName}</h1>
<div className="text-gray-800 text-lg font-medium leading-snug">
{node.DeviceName}
</div>
<p className="text-gray-500 text-sm leading-[18.20px] flex items-center gap-2">
<span
className={cx("w-2 h-2 inline-block rounded-full", {
@@ -69,7 +72,7 @@ export default function HomeView({
>
View device details &rarr;
</Link>
</div>
</Card>
<h2 className="mb-3">Settings</h2>
<div className="grid gap-3">
{node.Features["advertise-routes"] && (
@@ -108,9 +111,7 @@ export default function HomeView({
node.RunningSSHServer
? {
text: "Running",
icon: (
<div className="w-2 h-2 bg-emerald-500 rounded-full" />
),
icon: <div className="w-2 h-2 bg-green-300 rounded-full" />,
}
: undefined
}
@@ -148,37 +149,36 @@ function SettingsCard({
const [, setLocation] = useLocation()
return (
<button
className={cx("-mx-5 card cursor-pointer", { "pb-4": footer }, className)}
onClick={() => setLocation(link)}
>
<div className="flex justify-between items-center">
<div>
<div className="flex gap-2">
<p className="text-gray-800 font-medium leading-tight mb-2">
{title}
</p>
{badge && (
<div className="h-5 px-2 bg-gray-100 rounded-full flex items-center gap-2">
{badge.icon}
<div className="text-gray-500 text-xs font-medium">
{badge.text}
<button onClick={() => setLocation(link)}>
<Card noPadding className={cx("-mx-5 p-5", className)}>
<div className="flex justify-between items-center">
<div>
<div className="flex gap-2">
<p className="text-gray-800 font-medium leading-tight mb-2">
{title}
</p>
{badge && (
<div className="h-5 px-2 bg-gray-100 rounded-full flex items-center gap-2">
{badge.icon}
<div className="text-gray-500 text-xs font-medium">
{badge.text}
</div>
</div>
</div>
)}
)}
</div>
<p className="text-gray-500 text-sm leading-tight">{body}</p>
</div>
<div>
<ArrowRight className="ml-3" />
</div>
<p className="text-gray-500 text-sm leading-tight">{body}</p>
</div>
<div>
<ArrowRight className="ml-3" />
</div>
</div>
{footer && (
<>
<hr className="my-3" />
<div className="text-gray-500 text-sm leading-tight">{footer}</div>
</>
)}
{footer && (
<>
<hr className="my-3" />
<div className="text-gray-500 text-sm leading-tight">{footer}</div>
</>
)}
</Card>
</button>
)
}