fix: modal styles

src/main/frontend/components/whiteboard.cljs

@@ -313,15 +313,15 @@
 
       [:strong "CLOSED ALPHA"]]
 
-     [:h1.text-2xl.font-bold.flex-col.sm:flex-row.opacity-80
+     [:h1.text-2xl.font-bold.flex-col.sm:flex-row
        "A new canvas for your thoughts."]
 
-     [:h2
+     [:p
       "Whiteboards are a great tool for brainstorming and organization.
        Now you can place any of your thoughts from the knowledge base or new ones next to each other on a spatial canvas to connect, associate and understand in new ways."]
 
      [:div.pt-6.flex.justify-center.space-x-2.sm:justify-end
-      (ui/button "Later" :on-click close-fn :background "gray" :class "opacity-60")
+      (ui/button "Later" :on-click close-fn :background "--ls-primary-background-color" :class "opacity-60")
       (ui/button "Start whiteboarding"
                  :disabled loading?
                  :on-click (fn []

src/main/frontend/components/whiteboard.css

@@ -235,16 +235,33 @@ html:is(.is-ios, is-native-ios, is-native-ipad) [data-page="whiteboard"] * {
     max-width: 90vw;
 
     > strong {
-      @apply block bg-gray-200 rounded text-gray-700 text-[10px] font-semibold px-2 py-0.5 opacity-40
+      @apply block rounded text-gray-700 text-[10px] font-semibold px-2 py-0.5
       m-auto translate-y-8;
+
+      background-color: var(--ls-link-text-color);
     }
   }
 
-  > h1, > h2 {
+  > h1 {
+    color: var(--ls-title-text-color);
+  }
+
+  > h1, p {
     @apply flex justify-center text-center;
   }
 
-  > h2 {
-    @apply text-sm opacity-80 pt-3;
+  > p {
+    @apply text-sm mx-10;
+
+    max-width: 540px;
+  }
+}
+
+
+html[data-theme='light'] {
+  .cp__whiteboards-welcome {
+    > .head-bg {
+      background-image: url("../img/whiteboard-welcome-light.png");
+    }
   }
 }