style: enhance button and icon interactions for improved UX

Author: SteKoe

spring-boot-admin-server-ui/src/main/frontend/components/sba-accordion.vue

@@ -40,7 +40,7 @@
             {
               '-rotate-90': !open,
             },
-            'mr-2 transition-[transform]',
+            'mr-2 transition-transform',
           )
         "
       />

spring-boot-admin-server-ui/src/main/frontend/components/sba-button.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="as"
-    class="btn relative items-center"
+    class="btn relative items-center cursor-pointer"
     v-bind="componentAttrs"
     @click="handleClick"
   >
@@ -49,7 +49,7 @@ const attrs = useAttrs();
 
 const cssClasses = computed(() => {
   return {
-    'px-1 py-0 text-xs': props.size === '2xs',
+    'px-1.5 py-0.5 text-xs': props.size === '2xs',
     'px-2 py-2 text-xs': props.size === 'xs',
     'px-3 py-2': props.size === 'sm',
     'px-4 py-3': props.size === 'base',

spring-boot-admin-server-ui/src/main/frontend/views/applications/ApplicationListItemAction.vue

@@ -2,44 +2,50 @@
   <sba-button-group class="application-list-item__header__actions text-right">
     <router-link v-slot="{ navigate }" :to="journalLink" custom>
       <sba-button
-        :title="$t('applications.actions.journal')"
+        :size="size === 'xs' ? '2xs' : undefined"
+        :title="t('applications.actions.journal')"
         @click.stop="navigate"
       >
-        <font-awesome-icon :icon="faHistory" />
+        <font-awesome-icon :icon="faScroll" :size="size" />
       </sba-button>
     </router-link>
     <sba-button
       v-if="hasNotificationFiltersSupport"
       :id="`nf-settings-${item.name || item.id}`"
+      :size="size === 'xs' ? '2xs' : undefined"
       :title="$t('applications.actions.notification_filters')"
       @click.stop="$emit('filter-settings', item)"
     >
       <font-awesome-icon
+        :size="size"
         :icon="hasActiveNotificationFilter ? faBellSlash : faBell"
       />
     </sba-button>
     <sba-button
       v-if="item.isUnregisterable"
       class="btn-unregister"
-      :title="$t('applications.actions.unregister')"
+      :size="size === 'xs' ? '2xs' : undefined"
+      :title="t('applications.actions.unregister')"
       @click.stop="actionHandler.unregister(item)"
     >
-      <font-awesome-icon :icon="faTrash" />
+      <font-awesome-icon :size="size" :icon="faTrash" />
     </sba-button>
     <sba-button
       v-if="item.hasEndpoint('restart')"
-      :title="$t('applications.actions.restart')"
+      :size="size === 'xs' ? '2xs' : undefined"
+      :title="t('applications.actions.restart')"
       @click.stop="actionHandler.restart(item)"
     >
-      <font-awesome-icon :icon="faUndoAlt" />
+      <font-awesome-icon :size="size" :icon="faUndoAlt" />
     </sba-button>
     <sba-button
       v-if="item.hasEndpoint('shutdown')"
-      :title="$t('applications.actions.shutdown')"
+      :size="size === 'xs' ? '2xs' : undefined"
+      :title="t('applications.actions.shutdown')"
       class="is-danger btn-shutdown"
       @click.stop="actionHandler.shutdown(item)"
     >
-      <font-awesome-icon :icon="faPowerOff" />
+      <font-awesome-icon :size="size" :icon="faPowerOff" />
     </sba-button>
   </sba-button-group>
 </template>
@@ -50,14 +56,17 @@ import {
   faBellSlash,
   faHistory,
   faPowerOff,
+  faScroll,
   faTrash,
   faUndoAlt,
 } from '@fortawesome/free-solid-svg-icons';
 import { useNotificationCenter } from '@stekoe/vue-toast-notificationcenter';
-import { inject } from 'vue';
+import { PropType, inject } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { RouteLocationNamedRaw } from 'vue-router';
 
+import SbaButtonGroup from '@/components/sba-button-group.vue';
+
 import Application from '@/services/application';
 import Instance from '@/services/instance';
 import {
@@ -83,6 +92,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  size: {
+    type: String as PropType<'xs' | 'sm'>,
+    default: 'sm',
+  },
 });
 
 defineEmits(['filter-settings']);
@@ -110,9 +123,4 @@ if (props.item instanceof Application) {
 .application-list-item__header__actions {
   @apply hidden lg:inline-flex p-1 bg-black/5 rounded-lg;
 }
-
-.btn-shutdown,
-.btn-unregister {
-  @apply ml-1;
-}
 </style>

spring-boot-admin-server-ui/src/main/frontend/views/applications/InstancesList.vue

@@ -20,7 +20,7 @@
       v-for="instance in instances"
       :key="instance.id"
       :data-testid="instance.id"
-      class="flex p-2 pr-4 hover:bg-gray-100 gap-2 odd:bg-gray-50 items-center"
+      class="flex p-2 pr-4 hover:bg-gray-100 hover:cursor-pointer gap-2 odd:bg-gray-50 items-center"
       @click.stop="showDetails(instance)"
     >
       <div class="pt-1 md:w-16 text-center">

spring-boot-admin-server-ui/src/main/frontend/views/applications/index.vue

@@ -110,10 +110,12 @@
               "
             >
               <template #title>
-                <div class="items-center inline-flex flex-row min-w-116">
+                <div
+                  class="items-center inline-flex flex-row min-w-116 cursor-pointer"
+                >
                   <font-awesome-icon
                     icon="chevron-right"
-                    class="mr-2 transition-transform duration-200"
+                    class="mr-2 transition-transform"
                     :class="{
                       'rotate-90': isExpanded(group.name),
                     }"
@@ -168,6 +170,7 @@
                       "
                       :item="instance"
                       class="md:hidden"
+                      size="xs"
                       @filter-settings="toggleNotificationFilterSettings"
                     />
                   </template>

spring-boot-admin-server-ui/src/main/frontend/views/applications/listItem/ItemInformation.vue

@@ -37,38 +37,43 @@
             small
           />
 
-          <template v-if="!instance.isUrlDisabled()">
+          <sba-button-group>
+            <template v-if="!instance.isUrlDisabled()">
+              <sba-button
+                as="a"
+                :href="instance.registration.serviceUrl"
+                :title="instance.registration.serviceUrl"
+                size="2xs"
+                referrerpolicy="no-referrer"
+                target="_blank"
+                :aria-label="t('term.homepage')"
+              >
+                <font-awesome-icon :icon="faHomeAlt" size="xs" />
+              </sba-button>
+            </template>
             <sba-button
               as="a"
-              :href="instance.registration.serviceUrl"
+              :href="instance.registration.managementUrl"
+              :title="instance.registration.managementUrl"
               size="2xs"
               referrerpolicy="no-referrer"
               target="_blank"
-              :aria-label="t('term.homepage')"
+              :aria-label="t('term.actuator_endpoint')"
             >
-              <font-awesome-icon :icon="faHome" size="xs" />
+              <font-awesome-icon :icon="faCogs" size="xs" />
             </sba-button>
-          </template>
-          <sba-button
-            as="a"
-            :href="instance.registration.managementUrl"
-            size="2xs"
-            referrerpolicy="no-referrer"
-            target="_blank"
-            :aria-label="t('term.actuator_endpoint')"
-          >
-            <font-awesome-icon :icon="faClipboardList" size="xs" />
-          </sba-button>
-          <sba-button
-            as="a"
-            :href="instance.registration.healthUrl"
-            size="2xs"
-            referrerpolicy="no-referrer"
-            target="_blank"
-            :aria-label="t('health.label')"
-          >
-            <font-awesome-icon :icon="faHeart" size="xs" />
-          </sba-button>
+            <sba-button
+              as="a"
+              :href="instance.registration.healthUrl"
+              :title="instance.registration.healthUrl"
+              size="2xs"
+              referrerpolicy="no-referrer"
+              target="_blank"
+              :aria-label="t('health.label')"
+            >
+              <font-awesome-icon :icon="faHeartPulse" size="xs" />
+            </sba-button>
+          </sba-button-group>
         </div>
       </template>
 
@@ -92,9 +97,9 @@
 
 <script setup lang="ts">
 import {
-  faClipboardList,
-  faHeart,
-  faHome,
+  faCogs,
+  faHeartPulse,
+  faHomeAlt,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { useI18n } from 'vue-i18n';

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue

@@ -32,10 +32,11 @@
 
     <template #actions>
       <router-link
+        :title="$t('applications.actions.journal')"
         :to="{ name: 'journal', query: { instanceId: instance.id } }"
         class="text-sm inline-flex items-center leading-sm border border-gray-400 bg-white text-gray-700 rounded overflow-hidden px-3 py-1 hover:bg-gray-200 ml-1"
       >
-        <font-awesome-icon icon="history" />
+        <font-awesome-icon :icon="faScroll()" />
       </router-link>
     </template>
 
@@ -90,6 +91,7 @@
 </template>
 
 <script lang="ts">
+import { faHistory, faScroll } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 import SbaAccordion from '@/components/sba-accordion.vue';
@@ -131,6 +133,12 @@ export default {
     },
   },
   methods: {
+    faScroll() {
+      return faScroll;
+    },
+    faHistory() {
+      return faHistory;
+    },
     reloadHealth() {
       const updateKey =
         this.instance.version ??

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-nav.vue

@@ -16,7 +16,7 @@
             target="_blank"
             :title="instance.registration.serviceUrl"
             :href="instance.registration.serviceUrl"
-            class="border-gray-400 ml-1"
+            class="border-gray-400"
           >
             <font-awesome-icon :icon="faHome" />
           </sba-button>
@@ -28,9 +28,9 @@
             target="_blank"
             :title="instance.registration.managementUrl"
             :href="instance.registration.managementUrl"
-            class="border-gray-400 ml-1"
+            class="border-gray-400"
           >
-            <font-awesome-icon :icon="faClipboardList" />
+            <font-awesome-icon :icon="faCogs" />
           </sba-button>
 
           <sba-button
@@ -40,9 +40,9 @@
             target="_blank"
             :title="instance.registration.healthUrl"
             :href="instance.registration.healthUrl"
-            class="border-gray-400 ml-1"
+            class="border-gray-400"
           >
-            <font-awesome-icon :icon="faHeart" />
+            <font-awesome-icon :icon="faHeartPulse" />
           </sba-button>
         </sba-button-group>
       </div>
@@ -53,8 +53,12 @@
 <script setup lang="ts">
 import {
   faClipboardList,
+  faCogs,
+  faGauge,
   faHeart,
+  faHeartPulse,
   faHome,
+  faTachometerAlt,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 

spring-boot-admin-server-ui/src/main/frontend/views/instances/shell/sidebar.vue

@@ -74,7 +74,7 @@
             <font-awesome-icon
               class="h-3 ml-auto hidden md:block transition"
               :class="{
-                '-rotate-90': isGroupOpen(group),
+                'rotate-180': isGroupOpen(group),
               }"
               :icon="faChevronUp"
             />