Implement UI for machines & system settings

2025-09-09 19:08:59 +02:00
parent 7b3ae6bb6e
commit 8b1a9be8c2
9 changed files with 897 additions and 1 deletions
--- a/webui/src/pages/Machines/styles.sass
+++ b/webui/src/pages/Machines/styles.sass
@@ -0,0 +1,107 @@
+.machine-card
+  .machine-card-header
+    display: flex
+    align-items: flex-start
+    gap: 1rem
+
+  .machine-icon
+    display: flex
+    align-items: center
+    justify-content: center
+    width: 3rem
+    height: 3rem
+    background: var(--color-primary-light)
+    border-radius: var(--border-radius)
+    color: var(--color-primary)
+    flex-shrink: 0
+
+  .machine-info
+    flex: 1
+    min-width: 0
+
+  .machine-name
+    font-size: 1.125rem
+    font-weight: 600
+    color: var(--color-text)
+    margin: 0 0 0.5rem 0
+    word-break: break-word
+
+  .machine-uuid
+    display: flex
+    align-items: center
+    gap: 0.25rem
+    font-size: 0.875rem
+    color: var(--color-text-muted)
+
+    .uuid-text
+      font-family: var(--font-mono, 'Courier New', monospace)
+      background: var(--color-surface-variant)
+      padding: 0.125rem 0.375rem
+      border-radius: var(--border-radius-sm)
+      font-size: 0.75rem
+
+  .machine-actions
+    display: flex
+    gap: 0.5rem
+    flex-shrink: 0
+
+.modal-description
+  color: var(--color-text-muted)
+  font-size: 0.875rem
+  line-height: 1.5
+  margin: 0 0 1.5rem 0
+
+.provisioning-modal
+  .provisioning-generate
+    text-align: center
+    padding: 2rem 0
+
+    .generate-button
+      min-width: 200px
+
+  .provisioning-result
+    .code-section
+      margin-bottom: 1.5rem
+
+      .code-label
+        display: block
+        font-size: 0.875rem
+        font-weight: 600
+        color: var(--color-text)
+        margin-bottom: 0.5rem
+
+      .code-display
+        display: flex
+        gap: 0.5rem
+        align-items: stretch
+
+        .code-input
+          flex: 1
+          font-family: var(--font-mono, 'Courier New', monospace)
+          font-size: 0.875rem
+
+          input
+            font-family: inherit
+
+        .copy-button
+          flex-shrink: 0
+
+    .code-info
+      margin-bottom: 1rem
+      padding: 1rem
+      background: var(--color-surface-variant)
+      border-radius: var(--border-radius)
+
+    .code-notice
+      text-align: center
+
+// Empty state overrides for machines
+.content .empty-state
+  .empty-state-icon
+    color: var(--color-primary-light)
+
+  .empty-state-title
+    color: var(--color-text)
+
+  .empty-state-description
+    color: var(--color-text-muted)