adapt vue modals styles to bootstrap

src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss

@@ -29,8 +29,7 @@ h1, h2, .h1, .h2 {
    display: block;
 }
 
-label:not(.form-check-label),
-legend.col-form-label {
+.col-form-label {
    padding-top: .5em;
    padding-bottom: .5em;
    font-weight: 700;

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue

@@ -76,4 +76,8 @@ export default {
       -webkit-transform: scale(1.1);
       transform: scale(1.1);
    }
+   h3.modal-title {
+      font-size: 1.5rem;
+      font-weight: bold;
+   }
 </style>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue

@@ -3,7 +3,7 @@
    <h2><a name="section-10"></a>{{ $t('persons_associated.title')}}</h2>
    
    <div>
-      <label>{{ $tc('persons_associated.counter', counter) }}</label>
+      <label class="col-form-label">{{ $tc('persons_associated.counter', counter) }}</label>
    </div>
    
    <table class="table table-bordered table-striped border-dark align-middle" v-if="participations.length > 0">

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue

@@ -3,7 +3,7 @@
    <h2><a name="section-40"></a>{{ $t('referrer.title') }}</h2>
 
    <div class="my-4">
-      <label for="selectReferrer">
+      <label class="col-form-label" for="selectReferrer">
          {{ $t('referrer.label') }}
       </label>
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue

@@ -4,7 +4,7 @@
    <h2><a name="section-50"></a>{{ $t('resources.title')}}</h2>
    
    <div>
-      <label>{{ $tc('resources.counter', counter) }}</label>
+      <label class="col-form-label">{{ $tc('resources.counter', counter) }}</label>
    </div>
    
    <table class="table table-bordered table-striped border-dark align-middle" v-if="resources.length > 0">

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue

@@ -163,6 +163,7 @@ div#content {
             box-sizing: border-box;
             margin-bottom: -3px;
             color: #71859669;
+            text-decoration: none;
             &.top {
                color: #718596;
             }

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue

@@ -20,7 +20,7 @@
             <div class="modal-body">
                <div class="search">
                   
-                  <label style="float: right;">
+                  <label class="col-form-label" style="float: right;">
                      {{ $tc('add_persons.suggested_counter', suggestedCounter) }}
                   </label>
 
@@ -231,8 +231,9 @@ export default {
          div.search {
             position: relative;
             input { 
+               width: 100%;
                padding: 1.2em 1.5em 1.2em 2.5em;
-               margin: 1em 0;
+               //margin: 1em 0;
             }
             i {
                position: absolute;

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue

@@ -1,7 +1,7 @@
 <template>
    <div class="list-item" :class="{ checked: isChecked }">
          
-         <div class="container">
+         <div>
             <input 
                v-bind:type="type" 
                v-model="selected"

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue

@@ -54,30 +54,55 @@
 </div>
 <div v-else-if="action === 'edit' || action === 'create'">
    
-   <input v-model="firstName" :placeholder="$t('person.firstname')" />
-   <input v-model="lastName" :placeholder="$t('person.lastname')" />
+   <div class="form-floating mb-3">
+      <input class="form-control form-control-lg" id="firstname" v-model="firstName" v-bind:placeholder="$t('person.firstname')" />
+      <label for="firstname">{{ $t('person.firstname') }}</label>
+   </div>
+   
+   <div class="form-floating mb-3">
+      <input class="form-control form-control-lg" id="lastname" v-model="lastName" v-bind:placeholder="$t('person.lastname')" />
+      <label for="lastname">{{ $t('person.lastname') }}</label>
+   </div>
    
    <!--  TODO fix placeholder if undefined 
-         TODO dynamically get gender options
    -->
-   <select v-model="gender">
-      <option disabled value="">{{ $t('person.gender.placeholder') }}</option> 
-      <option value="woman">{{ $t('person.gender.woman') }}</option>
-      <option value="man">{{ $t('person.gender.man') }}</option>
-      <option value="neuter">{{ $t('person.gender.neuter') }}</option>  
-   </select>
+   <div class="form-floating mb-3">
+      <select class="form-select form-select-lg" id="gender" v-model="gender">
+         <option selected disabled >{{ $t('person.gender.placeholder') }}</option> 
+         <option value="woman">{{ $t('person.gender.woman') }}</option>
+         <option value="man">{{ $t('person.gender.man') }}</option>
+         <option value="neuter">{{ $t('person.gender.neuter') }}</option>  
+      </select>
+      <label for="gender">{{ $t('person.gender.title') }}</label>
+   </div>
    
-   <i class="fa fa-birthday-cake"></i>
-   <input type="date"
-      id="chill_personbundle_person_birthdate" 
-      name="chill_personbundle_person[birthdate]" 
-      v-model="birthDate"
-   />
+   <div class="input-group mb-3">
+      <span class="input-group-text" id="birthdate"><i class="fa fa-fw fa-birthday-cake"></i></span>
+      <input type="date" 
+         class="form-control form-control-lg" 
+         id="chill_personbundle_person_birthdate" 
+         name="chill_personbundle_person[birthdate]" 
+         v-model="birthDate"
+         aria-describedby="birthdate" />
+   </div>
    
-   <i class="fa fa-phone">
-   </i><input v-model="phonenumber" :placeholder="$t('person.phonenumber')" />
-   <i class="fa fa-mobile">
-   </i><input v-model="mobilenumber" :placeholder="$t('person.mobilenumber')" />
+   <div class="input-group mb-3">
+      <span class="input-group-text" id="phonenumber"><i class="fa fa-fw fa-phone"></i></span>
+      <input class="form-control form-control-lg" 
+         v-model="phonenumber" 
+         v-bind:placeholder="$t('person.phonenumber')" 
+         v-bind:aria-label="$t('person.phonenumber')" 
+         aria-describedby="phonenumber" />
+   </div>
+   
+   <div class="input-group mb-3">
+      <span class="input-group-text" id="mobilenumber"><i class="fa fa-fw fa-mobile"></i></span>
+      <input class="form-control form-control-lg" 
+         v-model="mobilenumber" 
+         v-bind:placeholder="$t('person.mobilenumber')"
+         v-bind:aria-label="$t('person.mobilenumber')" 
+         aria-describedby="mobilenumber" />
+   </div>
    
 </div>
 </template>