TheArchive/tailscale
1
0
Fork 0
mirror of https://github.com/tailscale/tailscale.git synced 2025-12-28 22:19:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

client/web: adjust colors and some UI margins

Browse Source 
Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
This commit is contained in:
Sonia Appasamy
2023-12-01 15:12:34 -05:00
committed by Sonia Appasamy
parent b155c7a091
commit 7d61b827e8
11 changed files with 349 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
client/web/src/components/views/device-details-view.tsx
View File

@@ -23,7 +23,7 @@ export default function DeviceDetailsView({
<>
<h1 className="mb-10">Device details</h1>
<div className="flex flex-col gap-4">
<div className="card">
<div className="-mx-5 card">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<h1>{node.DeviceName}</h1>
@@ -36,7 +36,7 @@ export default function DeviceDetailsView({
</div>
<button
className={cx(
"px-3 py-2 bg-stone-50 rounded shadow border border-stone-200 text-neutral-800 text-sm font-medium",
"px-3 py-2 bg-stone-50 rounded shadow border border-stone-200 text-gray-800 text-sm font-medium",
{ "cursor-not-allowed": readonly }
)}
onClick={() =>
@@ -55,7 +55,7 @@ export default function DeviceDetailsView({
!readonly && (
<UpdateAvailableNotification details={node.ClientVersion} />
)}
<div className="card">
<div className="-mx-5 card">
<h2 className="mb-2">General</h2>
<table>
<tbody>
@@ -95,7 +95,7 @@ export default function DeviceDetailsView({
</tbody>
</table>
</div>
<div className="card">
<div className="-mx-5 card">
<h2 className="mb-2">Addresses</h2>
<table>
<tbody>
@@ -121,7 +121,7 @@ export default function DeviceDetailsView({
</table>
</div>
<Control.AdminContainer
className="text-neutral-500 text-sm leading-tight text-center"
className="text-gray-500 text-sm leading-tight text-center"
node={node}
>
Want even more details? Visit{" "}

17
client/web/src/components/views/home-view.tsx
View File

@@ -28,12 +28,10 @@ export default function HomeView({
<div className="ml-3">
<h1>{node.DeviceName}</h1>
{/* TODO(sonia): display actual status */}
<p className="text-neutral-500 text-sm">Connected</p>
<p className="text-gray-500 text-sm">Connected</p>
</div>
</div>
<p className="text-neutral-800 text-lg leading-[25.20px]">
{node.IP}
</p>
<p className="text-gray-800 text-lg leading-[25.20px]">{node.IP}</p>
</div>
<ExitNodeSelector
className="mb-5"
@@ -41,10 +39,7 @@ export default function HomeView({
nodeUpdaters={nodeUpdaters}
disabled={readonly}
/>
<Link
className="text-indigo-500 font-medium leading-snug"
to="/details"
>
<Link className="text-blue-500 font-medium leading-snug" to="/details">
View device details &rarr;
</Link>
</div>
@@ -105,19 +100,19 @@ function SettingsCard({
>
<div>
<div className="flex gap-2">
<p className="text-neutral-800 font-medium leading-tight mb-2">
<p className="text-gray-800 font-medium leading-tight mb-2">
{title}
</p>
{badge && (
<div className="h-5 px-2 bg-stone-100 rounded-full flex items-center gap-2">
{badge.icon}
<div className="text-neutral-500 text-xs font-medium">
<div className="text-gray-500 text-xs font-medium">
{badge.text}
</div>
</div>
)}
</div>
<p className="text-neutral-500 text-sm leading-tight">{body}</p>
<p className="text-gray-500 text-sm leading-tight">{body}</p>
</div>
<div>
<ArrowRight className="ml-3" />

4
client/web/src/components/views/ssh-view.tsx
View File

@@ -23,7 +23,7 @@ export default function SSHView({
your tailnet to SSH into it.{" "}
<a
href="https://tailscale.com/kb/1193/tailscale-ssh/"
className="text-indigo-700"
className="text-blue-700"
target="_blank"
rel="noreferrer"
>
@@ -46,7 +46,7 @@ export default function SSHView({
</div>
</div>
<Control.AdminContainer
className="text-neutral-500 text-sm leading-tight"
className="text-gray-500 text-sm leading-tight"
node={node}
>
Remember to make sure that the{" "}

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

@@ -35,7 +35,7 @@ export default function SubnetRouterView({
Add devices to your tailnet without installing Tailscale.{" "}
<a
href="https://tailscale.com/kb/1019/subnets/"
className="text-indigo-700"
className="text-blue-700"
target="_blank"
rel="noreferrer"
>
@@ -52,7 +52,7 @@ export default function SubnetRouterView({
value={inputText}
onChange={(e) => setInputText(e.target.value)}
/>
<p className="my-2 h-6 text-neutral-500 text-sm leading-tight">
<p className="my-2 h-6 text-gray-500 text-sm leading-tight">
Add multiple routes by providing a comma-separated list.
</p>
<Button
@@ -87,7 +87,7 @@ export default function SubnetRouterView({
className="flex justify-between items-center pb-2.5 mb-2.5 border-b border-b-gray-200 last:pb-0 last:mb-0 last:border-b-0"
key={r.Route}
>
<div className="text-neutral-800 leading-snug">{r.Route}</div>
<div className="text-gray-800 leading-snug">{r.Route}</div>
<div className="flex items-center gap-3">
<div className="flex items-center gap-1.5">
{r.Approved ? (
@@ -100,7 +100,7 @@ export default function SubnetRouterView({
Approved
</div>
) : (
<div className="text-neutral-500 text-sm leading-tight">
<div className="text-gray-500 text-sm leading-tight">
Pending approval
</div>
)}
@@ -124,7 +124,7 @@ export default function SubnetRouterView({
))}
</div>
<Control.AdminContainer
className="mt-3 w-full text-center text-neutral-500 text-sm leading-tight"
className="mt-3 w-full text-center text-gray-500 text-sm leading-tight"
node={node}
>
To approve routes, in the admin console go to{" "}
@@ -135,7 +135,7 @@ export default function SubnetRouterView({
</Control.AdminContainer>
</>
) : (
<div className="px-5 py-4 bg-stone-50 rounded-lg border border-gray-200 text-center text-neutral-500">
<div className="px-5 py-4 bg-stone-50 rounded-lg border border-gray-200 text-center text-gray-500">
Not advertising any routes
</div>
)}