style tweaks

src/main/frontend/components/page.cljs

@@ -420,7 +420,7 @@
                                                :selected (= class id)})
                               classes))
         options (cons (if class
-                        {:label "Choose parent page"
+                        {:label "Choose parent class"
                          :value ""}
                         {:label "Choose parent page"
                          :disabled true
@@ -449,10 +449,10 @@
                                opts)
         class? (= type "class")]
     (when page
-      [:div.property-configure.grid.gap-1.p-1
+      [:div.property-configure.grid.gap-2.p-1
        (when-not journal?
          [:div.grid.grid-cols-4.gap-1
-          [:div.col-span-1 "Class page?"]
+          [:div.col-span-1 "Is it a class?"]
           [:div.col-span-3
            (ui/checkbox {:checked class?
                          :on-change (fn []
@@ -463,7 +463,7 @@
 
        (when class?
          [:div.grid.grid-cols-4.gap-1.items-center.class-parent
-          [:div.col-span-1 "Parent:"]
+          [:div.col-span-1 "Parent class:"]
           [:div.col-span-3
            (let [namespace (some-> (:db/id (:block/namespace page))
                                    db/entity
@@ -478,11 +478,13 @@
                                                 [[:db.fn/retractAttribute (:db/id page) :block/namespace]]))))])]])
 
        (let [edit-input-id (str "edit-block-" (:block/uuid page))]
-         (component-block/db-properties-cp
-          {:editor-box editor/box}
-          page
-          edit-input-id
-          (assoc properties-opts :class-schema? class?)))])))
+         [:div
+          [:div.text-sm.opacity-70.font-medium.mb-2 "Properties:"]
+          (component-block/db-properties-cp
+           {:editor-box editor/box}
+           page
+           edit-input-id
+           (assoc properties-opts :class-schema? class?))])])))
 
 ;; A page is just a logical block
 (rum/defcs ^:large-vars/cleanup-todo page-inner < rum/reactive

src/main/frontend/components/property.cljs

@@ -263,30 +263,31 @@
       :node (js/document.getElementById "edit-new-property")
       :outside? false)))
   [state block edit-input-id properties new-property? opts]
-  (let [*property-key (::property-key state)
-        *property-value (::property-value state)]
-    (cond
-      new-property?
-      [:div#edit-new-property
-       (property-input block *property-key *property-value opts)]
+  [:div.py-1
+   (let [*property-key (::property-key state)
+         *property-value (::property-value state)]
+     (cond
+       new-property?
+       [:div#edit-new-property
+        (property-input block *property-key *property-value opts)]
 
-      (and (or (:page-configure? opts)
-               (seq properties)
-               (seq (:block/alias block))
-               (seq (:block/tags block)))
-           (not config/publishing?)
-           (or (:page-configure? opts) (not (:in-block-container? opts))))
-      [:a.fade-link.my-2.flex
-       {:on-click (fn []
-                    (property-handler/set-editing-new-property! edit-input-id)
-                    (reset! *property-key nil)
-                    (reset! *property-value nil))}
-       [:div.flex.flex-row.items-center
-        (ui/icon "circle-plus" {:size 16})
-        [:div.ml-1 "Add property"]]]
+       (and (or (:page-configure? opts)
+                (seq properties)
+                (seq (:block/alias block))
+                (seq (:block/tags block)))
+            (not config/publishing?)
+            (or (:page-configure? opts) (not (:in-block-container? opts))))
+       [:a.fade-link.flex
+        {:on-click (fn []
+                     (property-handler/set-editing-new-property! edit-input-id)
+                     (reset! *property-key nil)
+                     (reset! *property-value nil))}
+        [:div.flex.flex-row.items-center
+         (ui/icon "circle-plus" {:size 15})
+         [:div.ml-1.text-sm "Add property"]]]
 
-      :else
-      [:div {:style {:height 28}}])))
+       :else
+       [:div {:style {:height 28}}]))])
 
 (rum/defcs property-key
   [state block property {:keys [class-schema?]}]
@@ -368,10 +369,12 @@
         (when-let [property (db/sub-block (:db/id (db/entity [:block/uuid k])))]
           (let [block? (= :block (get-in property [:block/schema :type]))]
             [:div.property-pair (cond-> {} (not block?) (assoc :class "items-center"))
-             [:div.property-key.col-span-1
+             [:div.property-key
+              {:class (if (:class-schema? opts) "col-span-2" "col-span-1")}
               (property-key block property (select-keys opts [:class-schema?]))]
              (if (:class-schema? opts)
-               [:div.property-description.col-span-3.font-light
+               [:div.property-description.text-sm.opacity-70
+                {:class (if (:class-schema? opts) "col-span-2" "col-span-3")}
                 (get-in property [:block/schema :description])]
                [:div.property-value.col-span-3.inline-grid.pl-6 (when block?
                                                                   {:style {:margin-left -20}})