style: fix notification text theme issue & ui details

resources/css/common.css

@@ -537,10 +537,10 @@ input {
 /* } */
 
 .form-select {
-  background-color: transparent;
-  background-color: var(--ls-primary-background-color);
+  background-color: var(--ls-primary-background-color, transparent);
   background-repeat: no-repeat;
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3e%3cpath d='M7 7l3-3 3 3m0 6l-3 3-3-3' stroke='%239fa6b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
+  border-width: 1px;
+  border-color: var(--ls-border-color);
 }
 
 .before-block p {
@@ -952,12 +952,6 @@ button.context-menu-option {
   overflow-y: auto;
 }
 
-.notification-area {
-  background-color: #fff;
-  background-color: var(--ls-tertiary-background-color);
-  color: var(--ls-primary-text-color);
-}
-
 .content img {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -1153,13 +1147,6 @@ a.tag:hover {
   color: var(--ls-primary-text-color);
 }
 
-.notifications {
-  position: absolute;
-  z-index: 99;
-  width: 100%;
-  top: 3.2em;
-}
-
 .bullet-container .bullet-heading {
   background-color: #8fbc8f;
   background-color: var(--ls-block-bullet-color);

src/main/frontend/components/block.css

@@ -73,7 +73,6 @@
 
 .ls-block {
   min-height: 24px;
-  margin: 4px auto;
 
   img {
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

src/main/frontend/components/settings.cljs

@@ -153,7 +153,7 @@
              {:for "enable_timetracking"}
              (t :settings-page/enable-timetracking)]
             [:div.mt-1.sm:mt-0.sm:col-span-2
-             [:div.max-w-lg.rounded-md.shadow-sm.sm:max-w-xs
+             [:div.max-w-lg.rounded-md.sm:max-w-xs
               (ui/toggle enable-timetracking?
                          (fn []
                            (let [value (not enable-timetracking?)]

src/main/frontend/components/theme.cljs

@@ -3,9 +3,14 @@
 
 (rum/defc container
   [{:keys [theme on-click] :as props} child]
-  (rum/use-effect! #(-> js/document.documentElement
-                        (.setAttribute "data-theme" (if (= theme "white") "light" theme)))
-                   [theme])
+  rum/use-effect! (let [doc js/document.documentElement
+                        cls (.-classList doc)]
+                    (.setAttribute doc "data-theme" (if (= theme "white") "light" theme))
+                    (if (= theme "dark")                    ;; for tailwind dark mode
+                      (.add cls "dark")
+                      (.remove cls "dark")))
+
+  [theme]
   [:div
    {:class (str theme "-theme")
     :on-click on-click}

src/main/frontend/ui.cljs

@@ -93,7 +93,7 @@
                      [:div {:style {:margin-right "8px"}} title]
                      ;; [:div {:style {:position "absolute" :right "8px"}}
                      ;;  icon]
-                     ]]
+]]
           (rum/with-key
             (menu-link new-options child)
             title)))])
@@ -123,7 +123,7 @@
     (let [[color-class svg]
           (case status
             :success
-            ["text-gray-900"
+            ["text-gray-900 dark:text-gray-300 "
              [:svg.h-6.w-6.text-green-400
               {:stroke "currentColor", :viewBox "0 0 24 24", :fill "none"}
               [:path
@@ -149,7 +149,7 @@
                 :d
                 "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                 :fill-rule "evenodd"}]]])]
-      [:div.inset-0.flex.items-end.justify-center.px-4.py-3.pointer-events-none.sm:px-6.sm:py-3.sm:items-start.sm:justify-end
+      [:div.ui__notifications-content
        {:style {:z-index (if (or (= state "exiting")
                                  (= state "exited"))
                            -1
@@ -186,7 +186,7 @@
   []
   (let [contents (state/sub :notification/contents)]
     (transition-group
-     {:class-name "notifications"}
+     {:class-name "notifications ui__notifications"}
      (doall (map (fn [el]
                    (let [k (first el)
                          v (second el)]
@@ -393,7 +393,7 @@
   ([label children {:keys [label-style]}]
    [:div.Tooltip {:style {:display "inline"}}
     [:div (cond->
-            {:class "Tooltip__label"}
+           {:class "Tooltip__label"}
             label-style
             (assoc :style label-style))
      label]

src/main/frontend/ui.css

@@ -11,3 +11,21 @@
     }
   }
 }
+
+.ui__notifications {
+  position: fixed;
+  z-index: 99;
+  width: 100%;
+  top: 3.2em;
+
+  &-content {
+    @apply inset-0 flex items-end justify-center px-4 py-3
+      pointer-events-none sm:px-6 sm:py-3 sm:items-start
+      sm:justify-end;
+  }
+
+  .notification-area {
+    background-color: var(--ls-tertiary-background-color, #fff);
+    color: var(--ls-primary-text-color);
+  }
+}

tailwind.config.js

@@ -4,5 +4,6 @@ module.exports = {
     './src/**/*.cljs',
     './resources/**/*.html',
   ],
-  plugins: [require("@tailwindcss/ui")],
-};
+  plugins: [require('@tailwindcss/ui')],
+  darkMode: 'class',
+}