Maintenance: Desktop - Update playground.

app/frontend/apps/desktop/AppDesktop.vue

@@ -97,7 +97,9 @@ const appTheme = useAppTheme()
       <LayoutSidebar />
     </aside>
 
-    <article class="w-full h-full antialiased">
+    <article
+      class="w-full h-full antialiased bg-white dark:bg-gray-500 text-gray-100 dark:text-neutral-400"
+    >
       <RouterView />
 
       <div class="flex">

app/frontend/apps/desktop/components/layout/LayoutSidebar.vue

@@ -2,7 +2,7 @@
 
 <template>
   <!-- TODO: use tw styles, don't rely on "style" block! -->
-  <div class="navigation flex flex-col h-full">
+  <div class="p-2 bg-neutral-950 text-neutral-400 flex flex-col h-full">
     <div class="text-lg h-10">Zammad</div>
     <nav class="links h-full">
       <ol>
@@ -14,14 +14,3 @@
     <RouterLink class="btn btn-error" to="/logout">Logout</RouterLink>
   </div>
 </template>
-
-<style scoped>
-.navigation {
-  background-color: hsl(230, 7%, 13%);
-  color: white;
-}
-
-.links {
-  background-color: hsl(230, 7%, 17%);
-}
-</style>

app/frontend/apps/desktop/pages/home/views/Playground.vue

@@ -1,33 +1,23 @@
 <!-- Copyright (C) 2012-2023 Zammad Foundation, https://zammad-foundation.org/ -->
 
 <template>
-  <h1>Colors</h1>
-  <div class="space-x-2 space-y-2 p-4 flex flex-wrap">
-    <div class="p-2 w-24 rounded-xl h-14 bg-base-100">base-100</div>
-    <div class="p-2 w-24 rounded-xl h-14 bg-base-200">base-200</div>
-    <div class="p-2 w-24 rounded-xl h-14 bg-base-300">base-300</div>
-    <div class="p-2 w-24 rounded-xl h-14 bg-neutral">neutral</div>
-    <div class="p-2 w-24 rounded-xl h-14 bg-primary text-primary-content">
-      primary
-    </div>
-    <div class="p-2 w-24 rounded-xl h-14 link link-primary">primary</div>
-    <div class="p-2 w-24 rounded-xl h-14 bg-secondary text-secondary-content">
-      secondary
-    </div>
-    <div class="p-2 w-24 rounded-xl h-14 link link-secondary">secondary</div>
-    <div class="p-2 w-24 rounded-xl h-14 bg-accent text-accent-content">
-      accent
-    </div>
-    <div class="p-2 w-24 rounded-xl h-14 link link-accent">accent</div>
-    <div class="p-2 w-24 rounded-xl h-14 bg-warning text-warning-content">
-      warning
-    </div>
-    <div class="p-2 w-24 rounded-xl h-14 bg-info text-info-content">info</div>
-    <div class="p-2 w-24 rounded-xl h-14 bg-success text-success-content">
-      success
-    </div>
-    <div class="p-2 w-24 rounded-xl h-14 bg-error text-error-content">
-      error
-    </div>
+  <div class="space-y-2 p-4 flex flex-wrap text-xs">
+    Filler text above
+    <button
+      class="w-full px-4 py-2.5 bg-green-200 dark:bg-gray-600 text-gray-300 dark:text-neutral-400 text-base rounded-xl inline-flex justify-center items-center gap-1.5"
+    >
+      <CommonIcon name="desktop-logo-flat" size="small" />
+      Security Keys
+    </button>
+    <button
+      class="w-full px-4 py-2.5 bg-blue-800 text-white text-base rounded-xl inline-flex justify-center items-center gap-1.5"
+    >
+      <CommonIcon name="desktop-logo-flat" size="small" />
+      Authenticator App
+    </button>
+    <button class="btn btn-primary btn-block">
+      <CommonIcon name="desktop-logo-flat" size="small" />
+      Authenticator App
+    </button>
   </div>
 </template>

app/frontend/apps/desktop/styles/main.scss

@@ -3,13 +3,17 @@
 
 @layer components {
   .btn {
-    @apply rounded-xl border-0 text-base shadow-none;
+    @apply rounded-xl border-0 text-base shadow-none font-normal;
   }
 
   .btn:hover {
     @apply bg-blue-600 dark:bg-blue-900 text-black dark:text-white;
   }
 
+  .btn-primary {
+    @apply bg-blue-800 text-white;
+  }
+
   .btn-accent {
     @apply bg-yellow-300 text-black;
   }