Feat: dark mode.

teesloane · teesloane · commit ebd3c19a0a3c · 2021-10-13T18:47:02.000-04:00
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}
diff --git a/resources/public/img/icons/chevron-up.svg b/resources/public/img/icons/chevron-up.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#adadad" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>
diff --git a/shadow-cljs.edn b/shadow-cljs.edn
@@ -26,6 +26,10 @@
               :preloads  [day8.re-frame-10x.preload]
               }
              :tailwind/output "resources/public/css/site.css"
+             :tailwind/files {:base-path "./"
+                              :tailwind.css "./src/tailwind.css"
+                              ;; :tailwind.css "resources/public/css/site.css"
+                              }
              :tailwind/config {:dark-mode "media"}
              :release         {:build-hooks   [(teknql.tailwind/compile-release!)]
                                :build-options {:ns-aliases
diff --git a/src/app/renderer/components.cljs b/src/app/renderer/components.cljs
@@ -5,9 +5,25 @@
    [app.shared.ipc-events :refer [s-ev]]
    [app.shared.util :as u]))
 
+(defn input
+  [props]
+  (let [input-stz "w-full p-2 text-gray-700 dark:text-gray-50 border focus:outline-none text-sm mb-4 dark:bg-gray-900 dark:border-gray-600 dark:text-white"]
+    [:input
+     (merge {:class input-stz} props)]))
+
+(defn textarea
+  [props]
+  (let [input-stz "w-full p-2 text-gray-700 dark:text-gray-50 border focus:outline-none text-sm mb-4 dark:bg-gray-900 dark:border-gray-600 dark:text-white"]
+    [:textarea
+     (merge {:class input-stz} props)]))
+
+(defn select
+  [props options]
+  (let [styles "mt-2 mb-2 flex border w-64 py-1 rounded dark:bg-gray-800 dark:text-white outline-none"]
+    [:select (merge {:class styles} props) options]))
+
 (defn toast
   [{:keys [type msg]}]
-  (prn "toast rendering " type msg)
   (let [classes (str "px-4 h-full flex items-center "
                      (case type :confirmation "text-green-500" :error "text-red-500" ""))]
     (when-not (empty? msg)
@@ -16,7 +32,7 @@
 (defn container
   "This needs to have it's react-keys resolved."
   [children]
-  [:div {:class "flex flex-col p-8 w-full md:w-10/12 lg:w-8/12  mx-auto max-w-screen-xl"}
+  [:div {:class "flex flex-col p-8 w-full md:w-10/12 lg:w-8/12  mx-auto max-w-screen-xl dark:bg-gray-900"}
    children])
 
 (def icons
@@ -26,8 +42,9 @@
 
 (defn card
   [{:keys [header]} body]
-  [:div.bg-white.border {:key header}
-   [:div.border-b.px-4.py-2.text-sm.font-bold [:span header]]
+  [:div.bg-white.border {:class (u/twld "bg-white border" "bg-gray-800 border-gray-700")
+                         :key header}
+   [:div.border-b.px-4.py-2.text-sm.font-bold.dark:border-gray-700 [:span header]]
    [:div.p-4 body]])
 
 (defn icon
@@ -91,7 +108,7 @@
                          {:text "Settings" :id "settings"}
                          {:text (u/trunc-ellipse (get current-article :name) 25)
                           :id "article"}]]
-    [:nav.bg-white.w-full.text-xs.dark:bg-black.dark:text-gray-50.border-b
+    [:nav.bg-white.w-full.text-xs.dark:bg-gray-800.dark:text-gray-50.border-b.dark:border-b-gray-900
      [:div.flex.items-center {:style {:height "35px"}}
       [:div.flex.flex-1.items-center
        [:div.pl-4 [trunk-logo {:width 24}]]
@@ -113,10 +130,13 @@
   "how single words are styled based on their familiarity/comfort."
   [{:keys [word current-word index current-word-idx on-click]}]
   (let [{:keys [name comfort _translation]} word
-        stz                                  (str (u/get-comfort-bg-col comfort) " border-b border-transparent pl-1 p-0.5 mr-1 cursor-pointer bg-opacity-25 hover:bg-opacity-50")
-        is-current-word                      (and (= (dissoc word :comfort) (dissoc current-word :comfort))
+        base-styles                         "border-b border-transparent px-0.5 py-px mr-1 cursor-pointer bg-opacity-25 hover:bg-opacity-50 dark:bg-opacity-50 dark:text-gray-300"
+        stz                                 (str (u/get-comfort-bg-col comfort) " "
+                                                 ;; (u/get-comfort-text-col comfort) " "
+                                                 base-styles)
+        is-current-word                     (and (= (dissoc word :comfort) (dissoc current-word :comfort))
                                                   (= index current-word-idx))
-        stz                                  (if is-current-word (str " border-black " stz) (str "  " stz))]
+        stz                                 (if is-current-word (str " border-black dark:border-b-gray-300 " stz) (str "  " stz))]
     (cond
       ;; newlines that are just from textarea...
       (= name "\n")
@@ -135,7 +155,9 @@
 (defn google-translate-view
   [{:keys [t-win-open? current-word]}]
 
-  (let [stz           "absolute bottom-0 left-0 p-2 w-full text-center italic text-xs bg-white hover:bg-gray-100 text-gray-800 border-t border-gray-300 "
+  (let [stz           "absolute bottom-0 left-0 p-2 w-full text-center italic text-xs bg-white
+                       hover:bg-gray-100 text-gray-800 border-t border-gray-300
+                       dark:bg-gray-800 dark:border-gray-900 dark:hover:bg-gray-700 dark:text-white"
         button-height 33
         iframe-height 428
         window-width  js/window.innerWidth
@@ -170,17 +192,14 @@
   (let [t-win-open?   (<| [::subs/t-win-open?])
         handle-submit (fn [e]
                         (.preventDefault e)
-                        (|> [(s-ev :word-update) @form]))
-        input-stz     "w-full text-gray-700 dark:text-gray-50 border rounded-xs focus:outline-none text-md md:p-2 md:mb-4 dark:bg-gray-700 dark:text-white"]
-    [:div {:class "bg-gray-50 w-full border-t md:border-t-0 md:flex md:w-2/5 md:relative border-l"}
-
+                        (|> [(s-ev :word-update) @form]))]
+    [:div {:class "bg-gray-50 w-full border-t md:border-t-0 md:flex md:w-2/5 md:relative border-l dark:border-gray-900 dark:bg-gray-800 dark:border-gray-700"}
      (when current-word
-       [:div {:class "w-full p-8 flex flex-col mx-auto"}
+       [:div {:class "dark:bg-gray-800 w-full p-8 flex flex-col mx-auto"}
         [:div.static
          [:div {:class "text-2xl mb-8 w-full"} (current-word :name)]
          [:form {:class "w-full" :on-submit handle-submit}
-          [:input {:class         input-stz
-                   :placeholder   "Add Translation..."
+          [input {:placeholder   "Add Translation..."
                    :default-value (current-word :translation)
                    :value         (@form :translation)
                    :on-change     (fn [e] (swap! form assoc :translation (-> e .-target .-value)))}]
diff --git a/src/app/renderer/db.cljs b/src/app/renderer/db.cljs
@@ -1,7 +1,7 @@
 (ns app.renderer.db)
 
 (def default-db
-  {:current-view     "settings"
+  {:current-view     "words"
    :articles         nil
    :words            []
    :current-article  nil
diff --git a/src/app/renderer/events.cljs b/src/app/renderer/events.cljs
@@ -329,7 +329,6 @@
 
 (r-fx (s-ev :ipc-error)
       (fn [{:keys [db]} [_ error-data]]
-        (println (error-data :err))
         {:db
          (-> db (assoc :loading? false))
          :dispatch [::set-toast {:type :error :msg (error-data :msg)}]}))
@@ -367,5 +366,5 @@
       (when-not (some #{key} existingEvents)
         (.on ipcRenderer (name key) ;; convert str to be readable for ipcRenderer.
              (fn [event args]
-               (println "[ipcRenderer ->]: " key args)
+               (println "[ipcRenderer ->]: " key)
                (handler event (js->clj args :keywordize-keys true))))))))
diff --git a/src/app/renderer/views/article.cljs b/src/app/renderer/views/article.cljs
@@ -33,16 +33,16 @@
               {:keys [name word-data]} current-article
               ]
           [:div.flex.flex-col.md:flex-row.overflow-y-auto.flex-1
-           [:div {:key "view-article" :class "flex  flex-col flex-1 bg-white"}
+           [:div {:key "view-article" :class "flex flex-col flex-1 bg-white dark:bg-gray-800"}
             ;; metadata and actions
-            [:div.flex.text-xs.px-4.border-b.border-gray-200.justify-between.px-8.py-2
+            [:div.flex.text-xs.px-4.border-b.border-gray-200.justify-between.px-8.py-2.dark:border-gray-900
              [:span "Words recognized: " words-known " / " total-words]
              (if (= words-known total-words)
                [:span "All words known!"]
                [:span.cursor-pointer {:on-click handle-mark-all-known}
                 (case @sure-mark? 0 "Mark all known?" 1 "You sure?")])]
 
-            [:article {:key "view-article" :class "flex overflow-auto flex-col flex-1 bg-white"}
+            [:article {:key "view-article" :class "flex overflow-auto flex-col flex-1 bg-white dark:bg-gray-900"}
             [:div.leading-8.p-8.flex.flex-wrap.max-w-5xl.mx-auto
              (map-indexed (fn [index word]
                             ^{:key (str word "-" index)}
diff --git a/src/app/renderer/views/article_create.cljs b/src/app/renderer/views/article_create.cljs
@@ -8,7 +8,7 @@
 
 (defn view
   []
-  (let [input-stz    "w-full p-2 text-gray-700 dark:text-gray-50 border focus:outline-none text-sm mb-4 dark:bg-gray-700 dark:text-white"
+  (let [
         form         (r/atom {:article "" :title "" :source ""})
         handle-submit (fn [e]
                         (.preventDefault e)
@@ -17,25 +17,23 @@
                        (swap! form assoc k (-> event .-target .-value)))]
     (fn []
       [component/container
-       [:form.flex.flex-col {:key "view-article-list" :on-submit handle-submit }
+       [:div
         [component/page-heading "Create a new article"]
-        [:input
-         {:class       input-stz
-          :placeholder "Article Title"
-          :type        "text"
-          :value       (@form :title)
-          :on-change   #(update-form %1 :title)}]
-        [:input
-         {:class       input-stz
-          :placeholder "Article source"
-          :type        "text"
-          :value       (@form :source)
-          :on-change   #(update-form %1 :source)}]
-        [:textarea
-         {:name        ""
-          :class       input-stz
-          :on-change   #(update-form %1 :article)
-          :rows        8
-          :placeholder "Paste article here..."}]
-        [component/button {:type "submit"
-                           :text "Submit"}]]])))
+        [:form.flex.flex-col {:key "view-article-list" :on-submit handle-submit }
+
+         [component/input {:placeholder "Article Title"
+                           :type        "text"
+                           :value       (@form :title)
+                           :on-change   #(update-form %1 :title)}]
+
+         [component/input {:placeholder "Article source"
+                           :type        "text"
+                           :value       (@form :source)
+                           :on-change   #(update-form %1 :source)}]
+         [component/textarea
+          {:name        ""
+           :on-change   #(update-form %1 :article)
+           :rows        8
+           :placeholder "Paste article here..."}]
+         [component/button {:type "submit"
+                            :text "Submit"}]]]])))
diff --git a/src/app/renderer/views/article_list.cljs b/src/app/renderer/views/article_list.cljs
@@ -20,15 +20,16 @@
                           (= 1 @sure?) (|> [(s-ev :article-delete) article_id])))]
     (fn
       [{:keys [name original last_opened date_created]}]
-      [:div.mb-4.bg-white.p-4.border.shadow-sm.hover:shadow.text-gray-400.hover:text-gray-900
-       [:div.text-md.py-1.text-black (u/trunc-ellipse name 50)]
+      [:div {:class "mb-4 text-gray-900 bg-white  p-4 border-gray-100 border shadow-sm hover:shadow
+                     dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:text-gray-50" }
+       [:div.text-md.py-1 (u/trunc-ellipse name 50)]
        [:div.text-sm
         [:div.flex.justify-between
          [:div.flex
           (when-let [x (u/date-unix->readable last_opened)]
             [:div.text-xs "Last opened: " x [:span.mx-2 "|"]])
           [:div.text-xs " Date created: " (u/date-unix->readable date_created)]]
-         [:div.text-xs.opacity-50.hover:opacity-100.text-red-800.hover:text-red-500
+         [:div.text-xs.opacity-50.hover:opacity-100.text-red-800.hover:text-red-500.dark:text-red-400
           {:on-click handle-delete}
           (case @sure? 0 "Delete" 1 "Sure?")]]
         [:div.pt-2.italic (u/trunc-ellipse original 100)]]])))
@@ -51,9 +52,8 @@
             [component/container
              [:div {:key "view-article-list"} ;; keep react happy.
               [component/page-heading "Your articles"]
-              [:input
-               {:class "mb-3 w-full border p-2 rounded-sm text-sm"
-                :placeholder "Search articles..."
+              [component/input
+               {:placeholder "Search articles..."
                 :value @search-query :on-change #(reset! search-query (-> % .-target .-value))}]
               (when articles
                 (map-indexed (fn [idx item]
diff --git a/src/app/renderer/views/index.cljs b/src/app/renderer/views/index.cljs
@@ -26,12 +26,12 @@
   "Button for erasing the database"
   []
   [:div.flex.fixed.bottom-0.p-2.rounded-sm
-   [:button.bg-white.border.rounded.py-1.px-2.text-xs.text-red-500.hover:bg-red-500.bg-opacity-25.hover:text-white
+   [:button.bg-white.border.rounded.py-1.px-2.text-xs.text-red-500.hover:bg-red-500.hover:text-white
     {:on-click #(|> [(s-ev :wipe-db!)])} "wipe sql-db!"]])
 
 (defn main-panel []
   (let [current-view (<| [::subs/current-view])]
-    [:div.dark:bg-gray-800.dark:text-white.flex.flex-col.h-screen.bg-gray-50
+    [:div.dark:bg-gray-900.dark:text-white.flex.flex-col.h-screen.bg-gray-50
      ;; fixed pos things
      (when u/debug? [debug])
      [loading-wheel]
diff --git a/src/app/renderer/views/settings.cljs b/src/app/renderer/views/settings.cljs
@@ -36,40 +36,38 @@
 (defn languages
   [settings]
   [component/card {:header "General Language Settings" :key "gls"}
-   (let [select-classes "mt-1 mb-2 flex border w-64 py-2"
+   (let [select-classes "mt-2 mb-2 flex border w-64 py-1 rounded dark:bg-gray-800 dark:text-white"
          swap-key       (fn [option settings-key]
                           (let [new-settings (assoc @settings settings-key  (.. option -target -value))]
                             (update-settings new-settings)))]
      [:div.flex.flex-col.md:flex-row
       [:div {:class "text-sm w-1/2 md:mt-0"}
        [:div "What language do you want to practice?"]
-       [:select {:class     select-classes
-                 :default-value (@settings :target-lang)
-                 :on-change #(swap-key % :target-lang)}
+       [component/select {:default-value (@settings :target-lang) :on-change #(swap-key % :target-lang)}
         (for [[lang-name lang-code] specs/langs]
           ^{:key lang-name}
           [:option {:value lang-code} (str/capitalize lang-name)])]]
       [:div {:class "text-sm w-1/2"}
        [:div "What is your native language?"]
-       [:select {:class     select-classes
-                 :default-value (@settings :native-lang)
-                 :on-change #(swap-key % :native-lang)}
+       [component/select
+        {:default-value (@settings :native-lang)
+         :on-change     #(swap-key % :native-lang)}
         (for [[lang-name lang-code] specs/langs]
           ^{:key lang-name}
-          [:option {:value    lang-code}
+          [:option {:value lang-code}
            (str/capitalize lang-name)])]]
       ])])
 
 (defn sidebar
   "Render the sidebar items; clickable to change current setting branch."
   [{:keys [current-setting]}]
-  [:div {:class "flex border-r bg-white flex-col h-full pt-8 text-sm w-64 min-w-max"}
+  [:div {:class "flex border-r bg-white flex-col h-full pt-8 text-sm w-64 min-w-max dark:bg-gray-800 dark:border-gray-700"}
    [:div.font-bold.mb-4.text-lg.px-4 "Settings"]
    (doall (for [[name _] settings-tree]
            ^{:key name}
              [:div
               {:class (str "my-1 cursor-pointer border-r-2 border-blue-500 px-4 py-2"
-                           (if (= @current-setting name) " bg-gray-100 border-opacity-100" " border-opacity-0"))
+                           (if (= @current-setting name) " bg-gray-100 border-opacity-100 dark:bg-gray-700" " border-opacity-0 dark:bg-gray-800"))
                :on-click #(reset! current-setting name)}
               name]))])
 
diff --git a/src/app/renderer/views/words.cljs b/src/app/renderer/views/words.cljs
@@ -11,22 +11,22 @@
 
 (defn cell
   [child]
-  [:td.flex.w-full.border-r.border-b.items-center.p-1 child])
+  [:td.flex.w-full.border-r.border-b.items-center.p-1.dark:border-gray-700 child])
 
 (defn- set-current-word
   [props idx]
   (|> [::events/set-current-word {:word (specs/m->word props) :index idx}]))
 
 (defn word-row
   [{:keys [name comfort translation word-idx current-row] :as props}]
-  (let [comfort-styles (str "inline-flex rounded-full ml-2 h-2 w-2 border "
+  (let [comfort-styles (str "inline-flex rounded-full ml-2 h-2 w-2 border dark:border-gray-700 "
                             (u/get-comfort-bg-col comfort))
         handle-click   (fn [props word-idx]
                          (set-current-word props word-idx)
                          (reset! current-row word-idx))]
     [:tr
      {:key      word-idx :style {:font-size "13px"}
-      :class    (str "flex w-full cursor-pointer" (when (= word-idx @current-row) " bg-gray-50"))
+      :class    (str "flex w-full cursor-pointer" (when (= word-idx @current-row) " bg-gray-50 dark:bg-gray-700 "))
       :on-click #(handle-click props word-idx)}
      [cell [:div.p-1 (str/lower-case name)]]
      [cell [:div.p-1 translation]]
@@ -40,7 +40,7 @@
 (defn table-header-cell
   [{:keys [text sort-key sort-tuple handle-changed-sort]}]
   (let [[sort-direction -sort-key] @sort-tuple]
-    [:th.flex.w-full.text-sm.text-left.p-2.text-gray-700.border
+    [:th.flex.w-full.text-sm.text-left.p-2.text-gray-700.border.dark:border-gray-700.dark:text-gray-300
      [:span.flex.items-center
       [:span.text-sm.font-medium text]
       [:span.flex.flex-col.ml-2
@@ -88,13 +88,13 @@
           ;; we don't check (db :words) because we force it to empty on navigation to avoid flicker
           (if (empty? words)
             [component/empty-state-with-msg]
-            [:div.flex.flex-col.md:flex-row.overflow-y-auto.flex-1
-             [:article {:key "view-article" :class "flex md:w-3/5 overflow-auto p-8 flex-col flex-1 bg-white"}
+            [:div.flex.flex-col.md:flex-row.overflow-y-auto.flex-1.dark:text-gray-200
+             [:article {:key "view-article" :class "flex md:w-3/5 overflow-auto p-8 flex-col flex-1 bg-white dark:bg-gray-900"}
               [component/page-heading "Words"]
               [:div
-               [:table.block.table-auto.w-full.bg-white.border
+               [:table.block.table-auto.w-full.bg-white.border.dark:bg-gray-800.dark:border-gray-700
                 [:thead.flex.w-full
-                 [:tr.border-b.flex.w-full
+                 [:tr.border-b.flex.w-full.dark:border-gray-700.dark:text-gray-300
                   ;; table header ---
                   (map-indexed (fn [idx header-data]
                                  [table-header-cell {:handle-changed-sort handle-changed-sort
diff --git a/src/app/shared/util.cljs b/src/app/shared/util.cljs
diff --git a/src/tailwind.css b/src/tailwind.css
diff --git a/tailwind.config.js b/tailwind.config.js
