improve(ui): ui button component

logseq · Mar 3, 2021 · 2670862 · 2670862
1 parent b6fcc39
commit 2670862
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 7 deletions.
diff --git a/src/main/frontend/ui.cljs b/src/main/frontend/ui.cljs
@@ -105,17 +105,18 @@
    opts))
 
 (defn button
-  [text & {:keys [background on-click href]
+  [text & {:keys [background href intent]
            :as   option}]
-  (let [class "inline-flex.items-center.px-3.py-2.border.border-transparent.text-sm.leading-4.font-medium.rounded-md.text-white.bg-indigo-600.hover:bg-indigo-700.focus:outline-none.focus:border-indigo-700.focus:shadow-outline-indigo.active:bg-indigo-700.transition.ease-in-out.duration-150.mt-1"
+  (let [class (if intent (str "is-" intent) ".bg-indigo-600.hover:bg-indigo-700.focus:border-indigo-700.active:bg-indigo-700")
         class (if background (string/replace class "indigo" background) class)]
     (if href
-      [:a.button (merge
-                  {:type  "button"
-                   :class (util/hiccup->class class)}
-                  (dissoc option :background))
+      [:a.ui__button.is-link
+       (merge
+        {:type  "button"
+         :class (util/hiccup->class class)}
+        (dissoc option :background))
        text]
-      [:button
+      [:button.ui__button
        (merge
         {:type  "button"
          :class (util/hiccup->class class)}

diff --git a/src/main/frontend/ui.css b/src/main/frontend/ui.css
@@ -90,6 +90,24 @@
   }
 }
 
+.ui__button {
+  @apply inline-flex items-center px-3 py-2 border border-transparent
+  text-sm leading-4 font-medium rounded-md text-white
+  focus:outline-none transition ease-in-out duration-150 mt-1;
+
+  &.is-link {
+    @apply text-white;
+  }
+
+  &.is-logseq {
+    @apply focus:border-gray-500 hover:text-blue-600
+    dark:hover:text-gray-200;
+
+    color: var(--ls-primary-text-color);
+    background: var(--ls-secondary-background-color);
+  }
+}
+
 .ui__button_base {
   @apply inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4
   font-medium rounded-md text-white