enhance: add background color to flashcards buttons

src/main/frontend/components/cards.css

@@ -0,0 +1,5 @@
+@media (min-width: 640px) {
+    .ls-card {
+        min-height: 60vh;
+    }
+}

src/main/frontend/extensions/fsrs.cljs

@@ -102,12 +102,23 @@
     (db-async/<q repo {:transact-db? false} q' now-inst-ms (:rules result))))
 
 (defn- btn-with-shortcut [{:keys [shortcut id btn-text background on-click class]}]
+  (let [bg-class (case id
+                   "card-again" nil
+                   "card-hard" "primary-purple"
+                   "card-good" nil
+                   "card-easy" "primary-green"
+                   nil)]
     (shui/button
-   {:variant :outline
+     {:variant :default
+      :title (str "Shortcut: " shortcut)
       :auto-focus false
       :size :sm
       :id id
-    :class (str id " " class " !px-2 !py-1")
+      :class (str id " " class " !px-2 !py-1"
+                  (if (= id "card-again")
+                    " bg-destructive/90 hover:bg-destructive "
+                    " bg-primary/90 hover:bg-primary ")
+                  bg-class)
       :background background
       :on-pointer-down (fn [e] (util/stop-propagation e))
       :on-click (fn [_e]
@@ -116,12 +127,12 @@
       [:span btn-text]
       (when-not (util/sm-breakpoint?)
         (shui/button
-       {:variant :outline
+         {:variant :text
           :tab-index -1
           :auto-focus false
-        :class "text-muted-foreground !px-1 !py-0 !h-4"
+          :class "!px-1 !py-0 !h-4 opacity-70"
           :size :sm}
-       [:span.text-sm shortcut]))]))
+         [:span.text-sm shortcut]))])))
 
 (defn- has-cloze?
   [block]
@@ -146,7 +157,7 @@
 
 (defn- rating-btns
   [repo block-id *card-index *phase]
-  [:div.flex.flex-row.items-center.gap-2.flex-wrap
+  [:div.flex.flex-row.items-center.gap-8.flex-wrap
    (mapv
     (fn [rating]
       (btn-with-shortcut {:btn-text (string/capitalize (name rating))
@@ -188,7 +199,7 @@
   (when-let [block-entity (db/sub-block block-id)]
     (let [phase (rum/react *phase)
           next-phase (phase->next-phase block-entity phase)]
-      [:div.ls-card.content
+      [:div.ls-card.content.flex.flex-col.overflow-y-auto
        [:div (component-block/breadcrumb {} repo (:block/uuid block-entity) {})]
        (let [option (case phase
                       :init
@@ -248,7 +259,7 @@
         *card-index (::card-index state)
         *phase (atom :init)]
     (when (false? loading?)
-      [:div#cards-modal.p-1.flex.flex-col.gap-8
+      [:div#cards-modal.p-4.flex.flex-col.gap-8.h-full.flex-1
        [:div.flex.flex-row.items-center.gap-2.flex-wrap
         (shui/select
          {:on-value-change (fn [v]

src/main/frontend/extensions/srs/handler.cljs

@@ -5,9 +5,7 @@
   [id]
   (let [nodes (sel [:#cards-modal (str "." id)])]
     (doseq [node nodes]
-      (.focus node)
-      (.click node)
-      (js/setTimeout #(.blur node) 100))))
+      (.click node))))
 
 (defn toggle-answers []
   (click "card-answers"))

src/main/frontend/ui.css

@@ -167,11 +167,18 @@
 .ui__dialog-content {
   &[label=flashcards__cp] {
     .ui__dialog-main-content {
-      @apply max-h-[85vh] overflow-auto;
+      @apply max-h-[85vh] min-h-[65vh] overflow-auto;
     }
   }
 }
 
+@media (min-width: 820px) {
+    .ui__dialog-content[label=flashcards__cp] {
+        min-width: 800px;
+        max-width: 1024px;
+    }
+}
+
 .instruction {
   height: 40%;