Use text-warning when showing warning below input elements

dashboard/src/components/AppInstallDialog.vue

@@ -256,11 +256,10 @@ defineExpose({
                   <TextInput id="location" ref="locationInput" v-model="location" style="flex-grow: 1"/>
                   <SingleSelect v-model="domain" :options="domains" option-label="label" option-key="domain" @select="onDomainChange()" :search-threshold="10"/>
                 </InputGroup>
+                <div class="warning-label" v-show="domainProvider === 'noop' || domainProvider === 'manual'" v-html="$t('appstore.installDialog.manualWarning', { location: ((location ? location + '.' : '') + domain) })"></div>
                 <div class="text-danger" v-if="formError.location">{{ formError.location }}</div>
               </FormGroup>
 
-              <p class="text-small text-warning" v-show="domainProvider === 'noop' || domainProvider === 'manual'" v-html="$t('appstore.installDialog.manualWarning', { location: ((location ? location + '.' : '') + domain) })"></p>
-
               <FormGroup v-for="(port, key) in secondaryDomains" :key="key">
                 <label :for="'secondaryDomainInput' + key">{{ port.title }}</label>
                 <small>{{ port.description }}</small>

dashboard/src/components/DomainProviderForm.vue

@@ -292,8 +292,8 @@ function onGcdnsFileInputChange(event) {
     <FormGroup v-if="provider === 'namecheap'">
       <label for="namecheapApiKeyInput">{{ $t('domains.domainDialog.namecheapApiKey') }}</label>
       <TextInput id="namecheapApiKeyInput" v-model="dnsConfig.token" required />
+      <div class="warning-label" v-if="provider === 'namecheap'" v-html="$t('domains.domainDialog.namecheapInfo')"></div>
     </FormGroup>
-    <div class="warning-label" v-if="provider === 'namecheap'" v-html="$t('domains.domainDialog.namecheapInfo')"></div>
 
     <!-- INWX -->
     <FormGroup v-if="provider === 'inwx'">

dashboard/src/components/ExternalLdap.vue

@@ -240,10 +240,9 @@ onMounted(async () => {
       <FormGroup>
         <label for="ldapProvider">{{ $t('users.externalLdap.provider') }} <sup><a href="https://docs.cloudron.io/user-directory/#external-directory" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
         <SingleSelect id="ldapProvider" v-model="provider" :options="availableProviders" option-key="value" option-label="name" />
+        <div class="warning-label" v-show="provider === 'noop' && config.provider !== 'noop'">{{ $t('users.externalLdap.disableWarning') }}</div>
       </FormGroup>
 
-      <p class="text-small text-warning" v-show="provider === 'noop' && config.provider !== 'noop'">{{ $t('users.externalLdap.disableWarning') }}</p>
-
       <div v-show="provider !== 'noop'">
         <form novalidate @submit.prevent="onSubmit()" autocomplete="off">
           <fieldset :disabled="editBusy">

dashboard/src/components/LdapServer.vue

@@ -92,7 +92,7 @@ onMounted(async () => {
             <TextInput id="ldapUrlInput" v-model="ldapUrl" readonly style="flex-grow: 1;"/>
             <Button tool @click="onCopyToClipboard(ldapUrl)" icon="fa fa-clipboard" />
           </InputGroup>
-          <p class="text-small text-warning" v-show="adminDomain.provider === 'cloudflare'">{{ $t('users.exposedLdap.cloudflarePortWarning') }} </p>
+          <div class="warning-label" v-show="adminDomain.provider === 'cloudflare'">{{ $t('users.exposedLdap.cloudflarePortWarning') }}</div>
         </FormGroup>
 
         <FormGroup>

dashboard/src/components/SftpInfoDialog.vue

@@ -50,7 +50,7 @@ defineExpose({
      alternate-style="secondary"
     @alternate="onDocs"
   >
-    <p class="text-small text-warning text-bold" v-if="adminDomainProvider === 'cloudflare'">{{ $t('appstore.installDialog.cloudflarePortWarning') }} </p>
+    <p class="text-warning" v-if="adminDomainProvider === 'cloudflare'">{{ $t('appstore.installDialog.cloudflarePortWarning') }}</p>
 
     <div class="info-row">
       <div class="info-label">{{ $t('app.accessControl.sftp.server') }}</div>

dashboard/src/components/app/Location.vue

@@ -225,7 +225,7 @@ onMounted(async () => {
               </InputGroup>
               <Button danger tool :disabled="busy" icon="fa-solid fa-trash" @click="onRemoveAlias(index)"/>
             </div>
-            <p class="text-warning" v-if="isNoopOrManual(item.domain)" v-html="$t('appstore.installDialog.manualWarning', { location: ((item.subdomain ? item.subdomain + '.' : '') + item.domain) })"></p>
+            <div class="warning-label" v-if="isNoopOrManual(item.domain)" v-html="$t('appstore.installDialog.manualWarning', { location: ((item.subdomain ? item.subdomain + '.' : '') + item.domain) })"></div>
           </div>
 
           <div class="actionable" v-if="!busy" @click="onAddAlias()">{{ $t('app.location.addAliasAction') }}</div>
@@ -243,7 +243,7 @@ onMounted(async () => {
               </InputGroup>
               <Button danger tool :disabled="busy" icon="fa-solid fa-trash" @click="onRemoveRedirect(index)"/>
             </div>
-            <p class="text-warning" v-if="isNoopOrManual(item.domain)" v-html="$t('appstore.installDialog.manualWarning', { location: ((item.subdomain ? item.subdomain + '.' : '') + item.domain) })"></p>
+            <div class="warning-label" v-if="isNoopOrManual(item.domain)" v-html="$t('appstore.installDialog.manualWarning', { location: ((item.subdomain ? item.subdomain + '.' : '') + item.domain) })"></div>
           </div>
 
           <div class="actionable" v-if="!busy" @click="onAddRedirect()">{{ $t('app.location.addRedirectionAction') }}</div>

dashboard/src/components/app/Storage.vue

@@ -167,7 +167,7 @@ onMounted(async () => {
           <FormGroup>
             <label>{{ $t('app.storage.mounts.volume') }}</label>
             <SingleSelect v-model="volumeId" :options="appDataVolumes" option-key="id" option-label="label"/>
-            <div class="text-warning" v-if="volumeId !== DEFAULT_VOLUME_ID && selectedMountType === 'mountpoint'" v-html="$t('app.storage.appdata.mountTypeWarning')"></div>
+            <div class="warning-label" v-if="volumeId !== DEFAULT_VOLUME_ID && selectedMountType === 'mountpoint'" v-html="$t('app.storage.appdata.mountTypeWarning')"></div>
           </FormGroup>
 
           <FormGroup v-if="volumeId !== DEFAULT_VOLUME_ID">

dashboard/src/components/app/Uninstall.vue

@@ -121,7 +121,7 @@ onMounted(async () => {
       <label>{{ $t('app.archive.title') }}</label>
       <div v-html="$t('app.archive.description')"></div>
       <p class="text-bold text-success" v-if="latestBackup" v-html="$t('app.archive.latestBackupInfo', { date: prettyLongDate(latestBackup.creationTime) })"></p>
-      <p class="text-bold text-warning" v-else v-html="$t('app.archive.noBackup')"></p>
+      <p class="text-warning" v-else v-html="$t('app.archive.noBackup')"></p>
       <Button :disabled="!latestBackup" @click="onArchive()">{{ $t('app.archive.action') }}</Button>
     </div>