client/web: add device details view

Initial addition of device details view on the frontend. A little
more backend piping work to come to fill all of the detail fields,
for now using placeholders.

Updates tailscale/corp#14335

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
This commit is contained in:
Sonia Appasamy
2023-11-06 19:01:16 -05:00
committed by Sonia Appasamy
parent 3e9026efda
commit d73e923b73
5 changed files with 242 additions and 52 deletions
+19
View File
@@ -4,6 +4,10 @@
@layer base {
h1 {
@apply text-neutral-800 text-[22px] font-medium leading-[30.80px];
}
h2 {
@apply text-neutral-500 text-sm font-medium uppercase leading-tight tracking-wide;
}
}
@@ -12,6 +16,21 @@
.card {
@apply p-5 bg-white rounded-lg border border-gray-200;
}
.card h1 {
@apply text-neutral-800 text-lg font-medium leading-snug;
}
.card h2 {
@apply text-neutral-500 text-xs font-semibold uppercase tracking-wide;
}
.card tbody {
@apply flex flex-col gap-2;
}
.card td:first-child {
@apply w-40 text-neutral-500 text-sm leading-tight;
}
.card td:last-child {
@apply text-neutral-800 text-sm leading-tight;
}
.hover-button {
@apply px-2 py-1.5 bg-white rounded-[1px] cursor-pointer;