enhance(ui): polish animations

src/main/frontend/animations.css

@@ -33,11 +33,11 @@
   opacity: 0; /* make things invisible upon start */
   animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
   animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1) */
-  animation-duration: 1s;
-}
-
-.faster-fade-in {
   animation-duration: 0.5s;
+
+  &.faster {
+    animation-duration: 0.3s;
+  }
 }
 
 /* page transition */

src/main/frontend/components/find_in_page.cljs

@@ -50,7 +50,7 @@
       :on-hide (fn []
                  (search-handler/electron-exit-find-in-page!)))))
   [{:keys [matches match-case? q]}]
-  [:div#search-in-page.flex.flex-row.absolute.top-10.right-4.shadow-lg.px-2.py-1.faster-fade-in.items-center
+  [:div#search-in-page.flex.flex-row.absolute.top-10.right-4.shadow-lg.px-2.py-1.faster.fade-in.items-center
 
    (search-input q matches)
 

src/main/frontend/components/reference.cljs

@@ -125,7 +125,7 @@
 
 (rum/defc references-inner
   [page-name filters filtered-ref-blocks]
-  [:div.references-blocks.faster-fade-in
+  [:div.references-blocks.faster.fade-in
    (let [ref-hiccup (block/->hiccup filtered-ref-blocks
                                     {:id page-name
                                      :ref? true
@@ -296,7 +296,7 @@
   (let [n-ref (get state ::n-ref)]
     (when page-name
       (let [page-name (string/lower-case page-name)]
-        [:div.references.page-unlinked.mt-6.flex-1.flex-row.faster-fade-in
+        [:div.references.page-unlinked.mt-6.flex-1.flex-row.faster.fade-in
          [:div.content.flex-1
           (ui/foldable
            [:h2.font-medium (t :unlinked-references/reference-count @n-ref)]

src/main/frontend/handler/events.cljs

@@ -295,9 +295,9 @@
                                                              state)}
   [block shown-properties all-properties]
   (let [query-properties (rum/react *query-properties)]
-    [:div.p-4
-     [:div.font-bold (t :query/config-property-settings)]
-     [:div.flex
+    [:div
+     [:h1.font-semibold.-mt-2.mb-2.text-lg (t :query/config-property-settings)]
+     [:a.flex
       {:title "Refresh list of columns"
        :on-click
        (fn []
@@ -309,7 +309,7 @@
              shown? (if (nil? property-value)
                       (contains? shown-properties property)
                       property-value)]
-         [:div.flex.flex-row.m-2.justify-between.align-items
+         [:div.flex.flex-row.my-2.justify-between.align-items
           [:div (if (uuid? property) (db-pu/get-property-name property) (name property))]
           [:div.mt-1 (ui/toggle shown?
                        (fn []
@@ -338,8 +338,9 @@
                            (set block-properties)
                            (set all-properties))
         shown-properties (set/intersection (set all-properties) shown-properties)]
-    (state/set-modal! (query-properties-settings block shown-properties all-properties)
-      {:center? true})))
+    (shui/dialog-open!
+      (query-properties-settings block shown-properties all-properties)
+      {})))
 
 (defmethod handle :modal/show-cards [_]
   (state/set-modal! srs/global-cards {:id :srs

src/main/frontend/mobile/graph_picker.cljs

@@ -125,7 +125,7 @@
 
        ;; step 1
        :new-graph
-       [:div.flex.flex-col.w-full.space-y-3.faster-fade-in
+       [:div.flex.flex-col.w-full.space-y-3.faster.fade-in
         [:input.form-input.block
          {:auto-focus  true
           :ref         *input-ref