feat: improved Register UI

src/views/Register.vue

@@ -51,7 +51,7 @@
         {{ $t('buergerlauf') }}
       </p>
       <div class="mt-4">
-        <label for="first_name" class="block font-medium mt-2">
+        <label for="first_name" class="block font-semibold mt-2">
           {{ $t("vorname") }}
           <span class="font-bold">*</span>
         </label>
@@ -61,7 +61,6 @@
             'border-green-300': userdetails.firstname.trim(),
           }" class="
             dark:bg-gray-800
-            mt-1
             block
             w-full
             shadow-sm
@@ -73,7 +72,7 @@
             p-2
           " />
         <!--  -->
-        <label for="last_name" class="block font-medium mt-2">
+        <label for="last_name" class="block font-semibold mt-2">
           {{ $t("nachname") }}
           <span class="font-bold">*</span>
         </label>
@@ -83,7 +82,6 @@
             'border-green-300': userdetails.lastname.trim(),
           }" class="
             dark:bg-gray-800
-            mt-1
             block
             w-full
             shadow-sm
@@ -95,7 +93,7 @@
             p-2
           " />
         <!--  -->
-        <label for="email_address" class="block font-medium mt-2">
+        <label for="email_address" class="block font-semibold mt-2">
           {{ $t("e_mail_adress") }}
           <span class="font-bold">*</span>
         </label>
@@ -105,7 +103,6 @@
             'border-green-300': isEmail(userdetails.mail),
           }" class="
             dark:bg-gray-800
-            mt-1
             block
             w-full
             shadow-sm
@@ -120,10 +117,31 @@
           {{ $t("please_provide_valid_mail") }}
         </p>
         <!--  -->
-        <label for="phone" class="block font-medium mt-2">{{
+        <label for="phone" class="block font-semibold mt-2">{{
           $t("phone_number")
         }}</label>
-        <span class="leading-0"><b>{{ $t('hinweis') }}</b>{{ " " }}{{ $t('registration_local_phone_nr') }}</span>
+        <div class="bg-blue-100 border border-blue-200 text-black rounded-lg p-4 mb-1" role="alert" tabindex="-1"
+          aria-labelledby="hs-actions-label">
+          <div class="flex">
+            <div class="shrink-0">
+              <svg class="shrink-0 size-4 mt-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                stroke-linejoin="round">
+                <circle cx="12" cy="12" r="10"></circle>
+                <path d="M12 16v-4"></path>
+                <path d="M12 8h.01"></path>
+              </svg>
+            </div>
+            <div class="ms-3">
+              <h3 id="hs-actions-label" class="font-semibold">
+                {{ $t('hinweis') }}
+              </h3>
+              <div class="mt-2 text-sm text-gray-800 font-medium">
+                {{ $t('registration_local_phone_nr') }}
+              </div>
+            </div>
+          </div>
+        </div>
         <input v-model="userdetails.phone" name="phone" id="phone" autocomplete="off"
           :placeholder="[[$t('phone_number')]]" type="text" :class="{
             'border-red-500':
@@ -132,7 +150,6 @@
               isPhoneOkay(userdetails.phone),
           }" class="
             dark:bg-gray-800
-            mt-1
             block
             w-full
             shadow-sm
@@ -161,7 +178,7 @@
           </div>
           <div v-if="provide_address === true" class="col-span-6">
             <div class="col-span-6">
-              <label for="street" class="block font-medium mt-2">
+              <label for="street" class="block font-semibold mt-2">
                 {{ $t("strasse") }}
                 <span class="font-bold">*</span>
               </label>
@@ -171,7 +188,6 @@
                   'border-green-300': userdetails.address.street.trim(),
                 }" class="
                   dark:bg-gray-800
-                  mt-1
                   block
                   w-full
                   shadow-sm
@@ -184,13 +200,12 @@
                 " />
             </div>
             <div class="col-span-6">
-              <label for="address2" class="block font-medium mt-2">{{
+              <label for="address2" class="block font-semibold mt-2">{{
                 $t("apartment_suite_etc")
               }}</label>
               <input v-model="userdetails.address.address2" type="text" name="address2"
                 :placeholder="[[$t('apartment_suite_etc')]]" id="address2" autocomplete="street-address" class="
                   dark:bg-gray-800
-                  mt-1
                   block
                   w-full
                   shadow-sm
@@ -203,7 +218,7 @@
                 " />
             </div>
             <div class="col-span-6 sm:col-span-6 lg:col-span-2">
-              <label for="city" class="block font-medium mt-2">
+              <label for="city" class="block font-semibold mt-2">
                 {{ $t("ort") }}
                 <span class="font-bold">*</span>
               </label>
@@ -213,7 +228,6 @@
                   'border-green-300': userdetails.address.city.trim(),
                 }" class="
                   dark:bg-gray-800
-                  mt-1
                   block
                   w-full
                   shadow-sm
@@ -226,7 +240,7 @@
                 " />
             </div>
             <div class="col-span-6 sm:col-span-3 lg:col-span-2">
-              <label for="postal_code" class="block font-medium mt-2">
+              <label for="postal_code" class="block font-semibold mt-2">
                 {{ $t("plz") }}
                 <span class="font-bold">*</span>
               </label>
@@ -242,7 +256,6 @@
                   ),
                 }" class="
                   dark:bg-gray-800
-                  mt-1
                   block
                   w-full
                   shadow-sm