fix(ui): polish the plugin settings modal

src/main/frontend/components/plugins.cljs

@@ -1282,7 +1282,8 @@
 
     [:div.cp__plugins-settings.cp__settings-main
      [:header
-      [:h1.title (ui/icon "puzzle") (str " " (or title (t :settings-of-plugins)))]]
+      [:h1.title (ui/icon "puzzle" {:size 22})
+       [:strong (or title (t :settings-of-plugins))]]]
 
      [:div.cp__settings-inner.md:flex
       {:class (util/classnames [{:no-aside (not nav?)}])}
@@ -1377,4 +1378,5 @@
       [:div.settings-modal.of-plugins
        (focused-settings-content title)])
     {:center? false
+     :label   "plugin-settings-modal"
      :id      "ls-focused-settings-modal"}))

src/main/frontend/components/plugins.css

@@ -482,6 +482,15 @@
   }
 
   &-settings {
+    > header {
+      padding: 8px 12px;
+      border-bottom: 1px solid var(--ls-quaternary-background-color);
+
+      h1 {
+        @apply flex items-center text-[22px] m-0 space-x-1;
+      }
+    }
+
     &-inner {
       position: relative;
       padding: 10px 0 20px;
@@ -598,25 +607,23 @@
       }
     }
 
-    aside {
-      max-height: 70vh;
-      overflow: auto;
-      margin-bottom: -17px;
+    .cp__settings-inner {
+      aside {
+        @apply max-h-[70vh] overflow-auto mb-[-17px] p-3;
 
-      ul {
-        img.icon {
-          height: 24px;
-          width: 24px;
-        }
+        ul {
+          @apply list-none p-0 m-0;
 
-        li {
-          strong {
-            font-weight: 400;
-            overflow: hidden;
-            height: 22px;
+          img.icon {
+            @apply w-[24px] h-[24px];
+          }
 
-            text-overflow: ellipsis;
-            white-space: nowrap;
+          li {
+            @apply p-1.5 rounded;
+
+            strong {
+              @apply overflow-hidden text-ellipsis whitespace-nowrap;
+            }
           }
         }
       }
@@ -975,6 +982,12 @@ html[data-theme='dark'] {
   }
 }
 
+.ui__modal[label=plugin-settings-modal] {
+  .ui__modal-close-wrap {
+    padding-top: 14px;
+  }
+}
+
 .ui__modal[label=plugins-dashboard] {
   .panel-content {
     overflow-y: auto;

src/main/frontend/components/settings.css

@@ -1,15 +1,5 @@
 .cp__settings {
   &-main {
-    > header {
-      padding: 0 10px 10px;
-      border-bottom: 1px solid var(--ls-quaternary-background-color);
-
-      h1 {
-        font-size: 22px;
-        margin: 0;
-      }
-    }
-
     aside {
       @apply bg-gray-400/5 p-4;
     }