fix: input border & loading animation

resources/css/common.css

@@ -113,13 +113,6 @@ a svg {
   color: var(--ls-icon-color);
 }
 
-html,
-body,
-#root,
-#draw {
-  /* height: 100%; */
-}
-
 body {
   color: #24292e;
   line-height: 1.5;
@@ -127,6 +120,11 @@ body {
   min-height: 100%;
 }
 
+.form-input {
+  border-width: 1px;
+  border-color: var(--ls-border-color);
+}
+
 .form-checkbox {
   color: var(--ls-page-checkbox-color, #137cbd);
   background-color: var(--ls-page-checkbox-color, transparent);
@@ -278,20 +276,6 @@ a:hover {
   border-bottom-color: var(--ls-link-text-hover-color);
 }
 
-/* .content a[href^="http"]:after { */
-
-/*     content: '⤴'; */
-
-/* } */
-
-/* .content a:visited { */
-
-/*     color: #921b51; */
-
-/*     border-bottom: 1px solid #921b51; */
-
-/* } */
-
 .content a.initial-color,
 .content a.initial-color:hover {
   color: initial;
@@ -382,33 +366,6 @@ svg {
   overflow-y: scroll
 }
 
-.lds-dual-ring {
-  display: inline-block;
-}
-
-.lds-dual-ring::after {
-  content: " ";
-  display: block;
-  width: 20px;
-  height: 20px;
-  margin: 3px;
-  border-radius: 50%;
-  border-width: 2px;
-  border-style: solid;
-  border-color: var(--ls-primary-text-color, #24292e);
-  animation: lds-dual-ring 1.2s linear infinite;
-}
-
-@keyframes lds-dual-ring {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 .canceled {
   text-decoration: line-through;
 }
@@ -1255,23 +1212,6 @@ a.tag:hover {
 
 /* FIXME: */
 
-.dark-theme input {
-  color: var(--ls-secondary-text-color);
-}
-
-.dark-theme input.form-input {
-  background: none;
-}
-
-.dark-theme .form-checkbox {
-  color: #6093a0;
-  color: var(--ls-page-checkbox-color);
-  background-color: #6093a0;
-  background-color: var(--ls-page-checkbox-color);
-  border-color: #6093a0;
-  border-color: var(--ls-page-checkbox-border-color);
-}
-
 .white-theme a.right-sidebar-button {
   color: var(--ls-primary-text-color);
 }

src/main/frontend/components/right_sidebar.cljs

@@ -230,7 +230,7 @@
        {:class (if sidebar-open? "is-open")}
        (if sidebar-open?
          [:div.cp__right-sidebar-inner
-          [:div.cp__right-sidebar-settings {:key "right-sidebar-settings"}
+          [:div.cp__right-sidebar-settings.hide-scrollbar {:key "right-sidebar-settings"}
            [:div.ml-4.text-sm
             [:a.cp__right-sidebar-settings-btn {:on-click (fn [e]
                                                   (state/sidebar-add-block! repo "contents" :contents nil))}

src/main/frontend/components/svg.cljs

@@ -72,6 +72,17 @@
    [:path
     {:d
      "M64.177 100.069a7.889 7.889 0 01-5.6-2.316l-55.98-55.98a7.92 7.92 0 010-11.196c3.086-3.085 8.105-3.092 11.196 0l50.382 50.382 50.382-50.382a7.92 7.92 0 0111.195 0c3.086 3.086 3.092 8.104 0 11.196l-55.98 55.98a7.892 7.892 0 01-5.595 2.316z"}]])
+
+(defonce loading
+  [:svg.h-5.w-5.animate-spin
+   {:version "1.1"
+    :view-box "0 0 24 24"
+    :fill "none"
+    :display "inline-block"}
+   [:circle.opacity-25 {:cx 12 :cy 12 :r 10 :stroke "currentColor" :stroke-width 4}]
+   [:path.opacity-75 {:fill "currentColor"
+                      :d "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"}]])
+
 (defn- hero-icon
   ([d]
    (hero-icon d {}))
@@ -111,18 +122,18 @@
    {:viewbox "0 0 20 20"}
    [:circle.circle {:fill "#dce0e2", :r "9", :cy "10.5", :cx "10.5"}]
    [:line
-    {:stroke-width "1",
-     :stroke "#868c90",
-     :y2 "10.5",
-     :x2 "15",
-     :y1 "10.5",
+    {:stroke-width "1"
+     :stroke "#868c90"
+     :y2 "10.5"
+     :x2 "15"
+     :y1 "10.5"
      :x1 "6"}]
    [:line
-    {:stroke-width "1",
-     :stroke "#868c90",
-     :y2 "15",
-     :x2 "10.5",
-     :y1 "6",
+    {:stroke-width "1"
+     :stroke "#868c90"
+     :y2 "15"
+     :x2 "10.5"
+     :y1 "6"
      :x1 "10.5"}]])
 
 (def graph-sm [:div {:style {:transform "rotate(90deg)"}} (hero-icon "M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" {:height "16" :width "16"})])
@@ -132,9 +143,9 @@
    {:stroke "currentColor", :view-box "0 0 24 24", :fill "none" :width 24 :height 24 :display "inline-block"}
    [:path
     {:d
-     "M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z",
-     :stroke-width "2",
-     :stroke-linejoin "round",
+     "M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"
+     :stroke-width "2"
+     :stroke-linejoin "round"
      :stroke-linecap "round"}]])
 
 (def folder (hero-icon "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"))
@@ -169,7 +180,6 @@
      :stroke-linecap "round"
      :stroke-width "2"
      :d "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"}]])
-
 (def save
   [:svg
    {:fill "currentColor", :view-box "0 0 448 512", :height "24", :width "24"}

src/main/frontend/components/theme.css

@@ -21,3 +21,19 @@ html:not(.is-mac)[data-theme=dark] {
     background-color: var(--ls-scrollbar-thumb-hover-color);
   }
 }
+
+html[data-theme=dark] {
+  input {
+    color: var(--ls-secondary-text-color);
+  }
+
+  input.form-input {
+    background: none;
+  }
+
+  .form-checkbox {
+    color: var(--ls-page-checkbox-color, #6093a0);
+    background-color: var(--ls-page-checkbox-color, #6093a0);
+    border-color: var(--ls-page-checkbox-border-color, #6093a0);
+  }
+}

src/main/frontend/ui.cljs

@@ -452,10 +452,9 @@
 
 (defn loading
   [content]
-  [:div.flex.flex-row.align-center
-   [:span.lds-dual-ring.mr-2]
-   [:span {:style {:margin-top 2}}
-    content]])
+  [:div.flex.flex-row.items-center
+   [:span.icon.flex.items-center svg/loading]
+   [:span.text.pl-2 content]])
 
 (rum/defcs foldable <
   (rum/local false ::control?)