feat: adjustment to design

src/pages/enquiry.twig

@@ -32,31 +32,36 @@
       <form class='row'>
         <div class='col-12 col-md-6 mb-4'>
           <label for='name' class='form-label'>Name</label>
-          <input type='text' class='form-control' id='name' aria-describedby='name-help'>
+          <input type='text' class='form-control form-control-lg' id='name' aria-describedby='name-help'>
           <div id='name-help' class='form-text'>
             Nicht öffentlich angezeigt, evtl Verwendung für direkte Kommunikation mit Ihnen.
           </div>
         </div>
         <div class='col-12 col-md-6 mb-4'>
           <label for='email' class='form-label'>E-Mail Adresse</label>
-          <input type='email' class='form-control' id='email' aria-describedby='email-help'>
+          <input type='email' class='form-control form-control-lg' id='email' aria-describedby='email-help'>
           <div id='email-help' class='form-text'>
             Nicht öffentlich angezeigt, evtl Verwendung für direkte Kommunikation mit Ihnen.
           </div>
         </div>
         <div class='col-12 col-md-6 mb-4'>
           <label for='datensatz' class='form-label'>Bezeichung Datensatz*</label>
-          <input type='text' class='form-control' id='datensatz' aria-describedby='datensatz-help'>
+          <input type='text' class='form-control form-control-lg' id='datensatz' aria-describedby='datensatz-help'>
           <div id='datensatz-help' class='form-text'>Bezeichnung des Datensatzes, z.B. Straßenverzeichnis Köln</div>
         </div>
         <div class='col-12 col-md-6 mb-4'>
           <label for='herausgeber' class='form-label'>Herausgeber</label>
-          <input type='text' class='form-control' id='herausgeber' aria-describedby='herausgeber-help'>
+          <input type='text' class='form-control form-control-lg' id='herausgeber' aria-describedby='herausgeber-help'>
           <div id='herausgeber-help' class='form-text'>Falls Sie wissen, wer Herausgeber der angefragten Daten ist</div>
         </div>
         <div class='col-12 mb-4'>
           <label for='comments' class='form-label'>Comments</label>
-          <textarea class='form-control' placeholder='Leave a comment here' id='comments'></textarea>
+          <textarea
+            class='form-control form-control-lg'
+            placeholder='Hinterlassen Sie hier einen Kommentar'
+            id='comments'
+            rows='4'
+          ></textarea>
         </div>
         <div class='col-12 mb-4'>
           <div class='form-check form-switch'>
@@ -121,7 +126,7 @@
         </div>
       </div>
 
-      <div class='d-flex flex-column gap-4 mb-4'>
+      <div class='d-flex flex-column gap-4 mb-4' role='region' aria-live='polite'>
         {%
           include 'partials::base/b_request.twig' with {
           status: 'coordinating'

src/partials/base/b_request.twig

@@ -1,11 +1,11 @@
 {% if status == 'coordinating' %}
   {% set badge = { color: "info", text: 'In Abstimmung' } %}
   {% elseif status == 'requested' %}
-  {% set badge = { color: "success", text: 'Datensatz wird angefragt' } %}
+  {% set badge = { color: "green", text: 'Datensatz wird angefragt' } %}
   {% elseif status == 'denied' %}
   {% set badge = { color: "warning", text: 'Bereitstellung nicht möglich' } %}
   {% elseif status == 'partially-provided' %}
-  {% set badge = { color: "secondary", text: 'Teilweise bereit gestellt' } %}
+  {% set badge = { color: "success", text: 'Teilweise bereit gestellt' } %}
   {% elseif status == 'ready' %}
   {% set badge = { color: "primary", text: 'Datensatz steht bereit' } %}
 {% endif %}
@@ -14,11 +14,13 @@
   <div class='d-flex justify-content-between align-items-start'>
     <h3 class='h4 m-0 d-flex flex-wrap gap-2'>
       Stolpersteine
-      <span class='badge border border-{{ badge.color }} text-{{ badge.color }}'>{{ badge.text }}</span>
+      <span class='badge badge-small border border-2 border-{{ badge.color }} text-body fw-semibold'>
+        {{- badge.text -}}
+      </span>
     </h3>
     <p class='m-0'>15.08.2022</p>
   </div>
-  <p class='m-0 text-body-tertiary'>
+  <p class='m-0 fs-5 text-gray'>
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
     magna aliquyam erat, sed diam voluptua...
   </p>

src/styles/components/_button.scss

@@ -1,5 +1,7 @@
 .btn {
   --btn-focus-box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
+  font-size: 1.25rem;
+  font-weight: 600;
 }
 
 .btn-primary {

src/styles/components/_form.scss

@@ -1,3 +1,12 @@
+.form-label {
+  font-size: 1.25rem;
+}
+
+.form-text {
+  font-size: 1rem;
+  color: var(--gray);
+}
+
 .form-control,
 .form-check-input {
   &:focus {

src/styles/styles.scss

@@ -4,9 +4,31 @@ $prefix: '';
 $enable-negative-margins: true;
 $body-min-width: 375px;
 
+$blue: #008ceb;
+$orange: #ff6e19;
+$yellow: #ffd200;
+$success: #198754;
+$green: #00d282;
+$gray: #827d73;
+$gray-900: #2d2d2d;
+
 // Required
 @import 'bootstrap/scss/variables';
 @import 'bootstrap/scss/variables-dark';
+
+$theme-colors: (
+  'primary': $primary,
+  'secondary': $secondary,
+  'success': $success,
+  'info': $blue,
+  'warning': $warning,
+  'danger': $danger,
+  'light': $light,
+  'dark': $dark,
+  'green': $green,
+  'gray': $gray,
+);
+
 @import 'bootstrap/scss/maps';
 @import 'bootstrap/scss/mixins';
 @import 'bootstrap/scss/utilities';

src/styles/themes/default.css

@@ -11,6 +11,8 @@
   --primary-active: #f23333;
   --primary-shadow-rgb: 203, 0, 0;
   --color-on-primary: #fff;
+
+  --border-color: #827d73;
 }
 
 [data-bs-theme='dark'] {
@@ -26,4 +28,6 @@
   --primary-active: #f23333;
   --primary-shadow-rgb: 255, 255, 255;
   --color-on-primary: #fff;
+
+  --border-color: #827d73;
 }