From 30f11f818168c89126777b717ab37829e25e8378 Mon Sep 17 00:00:00 2001
From: Dixsie Wolmers <dixsie@ibm.com>
Date: Tue, 10 Nov 2020 16:07:56 -0600
Subject: 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
---
 .../Configuration/DateTimeSettings/DateTimeSettings.vue     | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

(limited to 'src/views/Configuration/DateTimeSettings/DateTimeSettings.vue')

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>
-- 
cgit v1.2.3