enhance focus styles

Author: sprocketc

src/renderer/attribute/length.cljs

@@ -39,7 +39,7 @@
                  (if (pos? (.-deltaY e))
                    (rf/dispatch [:element/update-attr k - 1])
                    (rf/dispatch [:element/update-attr k + 1])))}]
-   [:div.flex {:style {:width "54px"}}
+   [:div.flex {:style {:width "55px"}}
     [:button.button.ml-px.bg-primary.text-muted.h-full
      {:style {:width "26px"}
       :on-pointer-down #(rf/dispatch [:element/update-attr k - 1])}

src/renderer/dialog/events.cljs

@@ -8,7 +8,8 @@
  :dialog/cmdk
  (fn [db [_]]
    (assoc db :dialog {:content [cmdk/root]
-                      :attrs {:class "dialog-content dialog-cmdk-content"}})))
+                      :attrs {:onOpenAutoFocus #()
+                              :class "dialog-content dialog-cmdk-content"}})))
 
 (rf/reg-event-db
  :dialog/about

src/renderer/dialog/views.cljs

@@ -22,7 +22,8 @@
      [:div  [:strong "Version: "] config/version]
      [:div  [:strong "Browser: "] platform/user-agent]]]
    [:button.button.px-2.bg-primary.rounded.w-full
-    {:on-click #(rf/dispatch [:dialog/close])}
+    {:auto-focus true
+     :on-click #(rf/dispatch [:dialog/close])}
     "OK"]
    [close-button]])
 
@@ -36,7 +37,8 @@
      {:on-click #(rf/dispatch [:dialog/close])}
      "No"]
     [:button.button.px-2.bg-primary.rounded
-     {:on-click #(do (rf/dispatch [:dialog/close])
+     {:auto-focus true
+      :on-click #(do (rf/dispatch [:dialog/close])
                      (rf/dispatch action))}
      "Yes"]]
    [close-button]])
@@ -59,7 +61,8 @@
        {:on-click #(rf/dispatch [:dialog/close])}
        "Cancel"]
       [:button.button.px-2.bg-primary.rounded.flex-1
-       {:on-click #(do (rf/dispatch [:dialog/close])
+       {:auto-focus true
+        :on-click #(do (rf/dispatch [:dialog/close])
                        (rf/dispatch [:document/save-and-close]))}
        "Save"]]
      [close-button]]))
@@ -73,6 +76,7 @@
      [:> Dialog/Portal
       [:> Dialog/Overlay {:class "dialog-overlay"}]
       [:> Dialog/Content
-       (merge {:class "dialog-content"}
+       (merge {:class "dialog-content"
+               :onOpenAutoFocus #(.preventDefault %)}
               (:attrs dialog))
        (:content dialog)]]]))

src/renderer/styles.css

@@ -66,6 +66,10 @@
   .border-accent {
     border-color: var(--accent);
   }
+
+  .outline-shadow {
+    box-shadow: inset 0 0 1px 1px var(--accent)
+  }
 }
 
 @layer components {
@@ -95,13 +99,12 @@
   }
 
   .button {
-    @apply inline-block relative cursor-pointer text-center;
+    @apply inline-block relative cursor-pointer text-center outline-none;
     background-color: transparent;
     color: var(--font-color);
     fill: var(--font-color);
     font-family: var(--font-color);
     font-size: 1em;
-    outline: none;
     height: 33px;
     line-height: 33px;
     -webkit-app-region: no-drag;
@@ -113,6 +116,10 @@
       color: var(--font-color-hovered);
     }
 
+    &:focus:not(:hover) {
+      @apply outline-shadow;
+    }
+
     &.selected {
       @apply bg-accent !important;
       color: var(--accent-inverted);

src/renderer/toolbar/tools.cljs

@@ -19,7 +19,7 @@
         [:span
          [comp/radio-icon-button
           {:active? selected?
-           :class (when primary? "border border-accent")
+           :class (when primary? "outline-shadow")
            :icon (:icon (tools/properties type))
            :action #(rf/dispatch [:set-tool type])}]]]
        [:> Tooltip/Portal