improve(ux): more interacted area for insert-block-plus page

src/main/frontend/components/page.cljs

@@ -100,25 +100,19 @@
      [:span.opacity-50
       "Click here to edit..."]]]])
 
-(rum/defcs add-button < rum/reactive
-  (rum/local false ::show?)
-  [state page-name]
-  (let [show? (::show? state)]
-    [:div.flex-1.flex-col.rounded-sm.add-button
-     [:div.flex.flex-row
-      [:div.block {:style {:height      24
-                           :width       24
-                           :margin-left 2}
-                   :on-mouse-over (fn [] (reset! show? true))}
-       (if (and (not (state/sub [:editor/block])) @show?)
-         [:a.add-button-link.block
-          {:on-mouse-out (fn [] (reset! show? false))
-           :on-click (fn []
-                       (when-let [block (editor-handler/api-insert-new-block! "" {:page page-name})]
-                         (js/setTimeout #(editor-handler/edit-block! block :max nil (:block/uuid block)) 100)))}
-          svg/plus-circle]
+(rum/defc add-button
+  [page-name]
 
-         [:span])]]]))
+  [:div.flex-1.flex-col.rounded-sm.add-button-link-wrap
+   {:on-click (fn []
+                (when-let [block (editor-handler/api-insert-new-block! "" {:page page-name})]
+                  (js/setTimeout #(editor-handler/edit-block! block :max nil (:block/uuid block)) 100)))}
+   [:div.flex.flex-row
+    [:div.block {:style {:height      20
+                         :width       20
+                         :margin-left 2}}
+     [:a.add-button-link.block
+      (ui/icon "circle-plus")]]]])
 
 (rum/defc page-blocks-cp < rum/reactive
   db-mixins/query

src/main/frontend/components/page.css

@@ -263,5 +263,26 @@
 }
 
 .add-button-link {
-  margin-left: 8px;
+  opacity: 0;
+  margin-left: 10px;
+  color: var(--ls-primary-text-color);
+  transform: scale(.8);
+
+  &:hover {
+    color: var(--ls-primary-text-color);
+    opacity: .6 !important;
+    transform: scale(.9);
+  }
+
+  &:active {
+    opacity: .8 !important;
+  }
+
+  &-wrap {
+    cursor: pointer;
+
+    &:hover .add-button-link {
+      opacity: .3;
+    }
+  }
 }

src/main/frontend/components/sidebar.css

@@ -366,7 +366,7 @@
   }
 
   .add-button-link {
-    transform: translateX(9px);
+    transform: translateX(10px) scale(.8);
   }
 }
 

src/main/frontend/components/svg.css

@@ -1,13 +1,3 @@
-.add-button-link:hover {
-  svg.add-button > .circle {
-    opacity: 1;
-  }
-
-  svg.add-button {
-    opacity: 1;
-  }
-}
-
 svg.add-button {
   display: block;
   width: 20px;