From 8247070aaeed76552eb465bcb264c47527b645f6 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Tue, 3 Dec 2024 20:33:30 +0100
Subject: [PATCH] webapp: improve styling of hints on home view

* increase the spacing between the icon and the text.
* put the text into its own box so it does not flow around the icon.
* vertically center the icon to account for multiple lines of text.
* vertically center the text to account for a single line of text.

closes #1441.
---
 webapp/src/components/HintView.vue | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/webapp/src/components/HintView.vue b/webapp/src/components/HintView.vue
index 5482279..a8d937c 100644
--- a/webapp/src/components/HintView.vue
+++ b/webapp/src/components/HintView.vue
@@ -1,16 +1,29 @@
 <template>
     <BootstrapAlert :show="hints.radio_problem" variant="danger">
-        <BIconBroadcast class="fs-4" /> {{ $t('hints.RadioProblem') }}
+        <div class="d-flex">
+            <div class="align-content-center"><BIconBroadcast class="fs-4" /></div>
+            <div class="align-content-center ms-3">{{ $t('hints.RadioProblem') }}</div>
+        </div>
     </BootstrapAlert>
 
     <BootstrapAlert :show="hints.time_sync" variant="danger">
-        <BIconClock class="fs-4" /> {{ $t('hints.TimeSync') }}
-        <a @click="gotoTimeSettings" href="#" class="alert-link">{{ $t('hints.TimeSyncLink') }}</a>
+        <div class="d-flex">
+            <div class="align-content-center"><BIconClock class="fs-4" /></div>
+            <div class="align-content-center ms-3">
+                {{ $t('hints.TimeSync') }}
+                <a @click="gotoTimeSettings" href="#" class="alert-link">{{ $t('hints.TimeSyncLink') }}</a>
+            </div>
+        </div>
     </BootstrapAlert>
 
     <BootstrapAlert :show="hints.default_password" variant="danger">
-        <BIconExclamationCircle class="fs-4" /> {{ $t('hints.DefaultPassword') }}
-        <a @click="gotoPasswordSettings" href="#" class="alert-link">{{ $t('hints.DefaultPasswordLink') }}</a>
+        <div class="d-flex">
+            <div class="align-content-center"><BIconExclamationCircle class="fs-4" /></div>
+            <div class="align-content-center ms-3">
+                {{ $t('hints.DefaultPassword') }}
+                <a @click="gotoPasswordSettings" href="#" class="alert-link">{{ $t('hints.DefaultPasswordLink') }}</a>
+            </div>
+        </div>
     </BootstrapAlert>
 </template>