Align button icons

- Fixes button icon and text alignment
- App header buttons to be addressed separately
- Button documentation will be addressed in separate commit
- Aligns form input buttons: datepicker, clear search, and password toggle
- Moves title from icon to button for icon only buttons
- Aligns validation icon with  form input buttons

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: Ie28d7d7dd7303ab6bf1897d1fa569e1580cc2f9d

14 files changed, 36 insertions, 42 deletions

diff --git a/src/views/AccessControl/SslCertificates/ModalGenerateCsr.vue b/src/views/AccessControl/SslCertificates/ModalGenerateCsr.vue
index da6b457c..a5dc4e74 100644
--- a/src/views/AccessControl/SslCertificates/ModalGenerateCsr.vue
+++ b/src/views/AccessControl/SslCertificates/ModalGenerateCsr.vue
@@ -237,7 +237,7 @@
                       placeholder=""
                     >
                       <template #add-button-text>
-                        {{ $t('global.action.add') }} <icon-add />
+                        <icon-add /> {{ $t('global.action.add') }}
                       </template>
                     </b-form-tags>
                   </b-form-group>
diff --git a/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue b/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
index 79cdbc1e..d1d04539 100644
--- a/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
+++ b/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
@@ -73,25 +73,22 @@
                   </b-form-invalid-feedback>
                   <b-form-datepicker
                     v-model="form.manual.date"
-                    class="input-action"
+                    class="btn-datepicker btn-icon-only"
                     button-only
+                    right
                     :hide-header="true"
                     :locale="locale"
                     :label-help="
                       $t('global.calendar.useCursorKeysToNavigateCalendarDates')
                     "
+                    :aria-label="$t('global.calendar.selectDate')"
+                    :title="$t('global.calendar.selectDate')"
                     :disabled="form.configurationSelected === 'ntp'"
                     button-variant="link"
                     aria-controls="input-manual-date"
                   >
                     <template #button-content>
-                      <icon-calendar
-                        :title="$t('global.calendar.openDatePicker')"
-                        aria-hidden="true"
-                      />
-                      <span class="sr-only">
-                        {{ $t('global.calendar.openDatePicker') }}
-                      </span>
+                      <icon-calendar />
                     </template>
                   </b-form-datepicker>
                 </b-input-group>
diff --git a/src/views/Configuration/Firmware/Firmware.vue b/src/views/Configuration/Firmware/Firmware.vue
index 7e9599fe..24ef33c8 100644
--- a/src/views/Configuration/Firmware/Firmware.vue
+++ b/src/views/Configuration/Firmware/Firmware.vue
@@ -367,7 +367,7 @@ export default {
   }
 }
 .card-footer {
-  height: 41px;
+  height: 40px;
 }
 .card-body {
   padding: 0.75rem 1.25rem;
diff --git a/src/views/Control/Kvm/Kvm.vue b/src/views/Control/Kvm/Kvm.vue
index 10322bde..1a41baaf 100644
--- a/src/views/Control/Kvm/Kvm.vue
+++ b/src/views/Control/Kvm/Kvm.vue
@@ -18,13 +18,6 @@ export default {
 </script>
 
 <style scoped>
-.button-launch > svg {
-  height: 25px;
-}
-.button-launch {
-  padding-left: 0px;
-}
-
 .terminal-container {
   width: 100%;
 }
diff --git a/src/views/Control/Kvm/KvmConsole.vue b/src/views/Control/Kvm/KvmConsole.vue
index 43dc7271..0c545d0f 100644
--- a/src/views/Control/Kvm/KvmConsole.vue
+++ b/src/views/Control/Kvm/KvmConsole.vue
@@ -14,28 +14,24 @@
           </dl>
         </b-col>
 
-        <b-col class="d-flex justify-content-end">
+        <b-col class="d-flex justify-content-end pr-1">
           <b-button
             v-if="isConnected"
             variant="link"
             type="button"
-            class="pr-0 button-launch"
             @click="sendCtrlAltDel"
           >
-            <icon-arrow-down aria-hidden="true" />
+            <icon-arrow-down />
             {{ $t('pageKvm.buttonCtrlAltDelete') }}
           </b-button>
           <b-button
             v-if="!isFullWindow"
             variant="link"
             type="button"
-            class="pr-0 button-launch"
             @click="openConsoleWindow()"
           >
-            <icon-launch aria-hidden="true" />
-            <span class="d-none d-md-inline">
-              {{ $t('pageKvm.openNewTab') }}
-            </span>
+            <icon-launch />
+            {{ $t('pageKvm.openNewTab') }}
           </b-button>
         </b-col>
       </b-row>
diff --git a/src/views/Control/SerialOverLan/SerialOverLanConsole.vue b/src/views/Control/SerialOverLan/SerialOverLanConsole.vue
index 2b49562c..a0e47870 100644
--- a/src/views/Control/SerialOverLan/SerialOverLanConsole.vue
+++ b/src/views/Control/SerialOverLan/SerialOverLanConsole.vue
@@ -13,14 +13,8 @@
       </b-col>
 
       <b-col v-if="!isFullWindow" class="d-flex justify-content-end">
-        <b-button
-          variant="link"
-          type="button"
-          class="pr-0 button-launch"
-          @click="openConsoleWindow()"
-        >
-          <icon-launch aria-hidden="true" />
-
+        <b-button variant="link" type="button" @click="openConsoleWindow()">
+          <icon-launch />
           {{ $t('pageSerialOverLan.openNewTab') }}
         </b-button>
       </b-col>
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue b/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
index 25436c8a..a6342089 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
@@ -14,9 +14,11 @@
           variant="link"
           data-test-id="hardwareStatus-button-expandBmc"
           :aria-label="expandRowLabel"
+          :title="expandRowLabel"
+          class="btn-icon-only"
           @click="toggleRowDetails(row)"
         >
-          <icon-chevron :title="expandRowLabel" />
+          <icon-chevron />
         </b-button>
       </template>
 
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
index e629006f..4fdda506 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
@@ -14,9 +14,11 @@
           variant="link"
           data-test-id="hardwareStatus-button-expandChassis"
           :aria-label="expandRowLabel"
+          :title="expandRowLabel"
+          class="btn-icon-only"
           @click="toggleRowDetails(row)"
         >
-          <icon-chevron :title="expandRowLabel" />
+          <icon-chevron />
         </b-button>
       </template>
 
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
index 9e0c9f8b..a5953054 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
@@ -36,9 +36,11 @@
           variant="link"
           data-test-id="hardwareStatus-button-expandDimms"
           :aria-label="expandRowLabel"
+          :title="expandRowLabel"
+          class="btn-icon-only"
           @click="toggleRowDetails(row)"
         >
-          <icon-chevron :title="expandRowLabel" />
+          <icon-chevron />
         </b-button>
       </template>
 
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
index 4981d457..58b092da 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
@@ -36,9 +36,11 @@
           variant="link"
           data-test-id="hardwareStatus-button-expandFans"
           :aria-label="expandRowLabel"
+          :title="expandRowLabel"
+          class="btn-icon-only"
           @click="toggleRowDetails(row)"
         >
-          <icon-chevron :title="expandRowLabel" />
+          <icon-chevron />
         </b-button>
       </template>
 
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
index 4137f1bf..94f5774b 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
@@ -36,9 +36,11 @@
           variant="link"
           data-test-id="hardwareStatus-button-expandPowerSupplies"
           :aria-label="expandRowLabel"
+          :title="expandRowLabel"
+          class="btn-icon-only"
           @click="toggleRowDetails(row)"
         >
-          <icon-chevron :title="expandRowLabel" />
+          <icon-chevron />
         </b-button>
       </template>
 
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
index da15b7a9..fcb8ef36 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
@@ -35,9 +35,11 @@
           variant="link"
           data-test-id="hardwareStatus-button-expandProcessors"
           :aria-label="expandRowLabel"
+          :title="expandRowLabel"
+          class="btn-icon-only"
           @click="toggleRowDetails(row)"
         >
-          <icon-chevron :title="expandRowLabel" />
+          <icon-chevron />
         </b-button>
       </template>
       <!-- Health -->
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
index e2ba49ec..9cb1c6ae 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
@@ -14,9 +14,11 @@
           variant="link"
           data-test-id="hardwareStatus-button-expandSystem"
           :aria-label="expandRowLabel"
+          :title="expandRowLabel"
+          class="btn-icon-only"
           @click="toggleRowDetails(row)"
         >
-          <icon-chevron :title="expandRowLabel" />
+          <icon-chevron />
         </b-button>
       </template>
 
diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index 9c549da4..1330ca5e 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -37,7 +37,7 @@
         data-test-id="overviewQuickLinks-button-networkSettings"
         class="d-flex justify-content-between align-items-center"
       >
-        <span>{{ $t('pageOverview.quicklinks.editNetworkSettings') }}</span>
+        {{ $t('pageOverview.quicklinks.editNetworkSettings') }}
         <icon-arrow-right />
       </b-button>
     </div>
@@ -48,7 +48,7 @@
         data-test-id="overviewQuickLinks-button-solConsole"
         class="d-flex justify-content-between align-items-center"
       >
-        <span>{{ $t('pageOverview.quicklinks.solConsole') }}</span>
+        {{ $t('pageOverview.quicklinks.solConsole') }}
         <icon-arrow-right />
       </b-button>
     </div>