company-form: adjust required-field-note styling

Signed-off-by: Patrizio Bekerle <patrizio@bekerle.com>

Author: pbek

src/i18n/de/translation.json

@@ -123,7 +123,7 @@
         "partner-type-3": "Hörsaalpate",
         "partner-type-4": "Strategischer Partner",
         "partner-type-5": "Look IN",
-        "required-field-note": "* kennzeichnet ein Pflichtfeld",
+        "required-field-note-text": "kennzeichnet ein Pflichtfeld",
         "section-address-contact": "Adresse und Kontakt",
         "section-basic-data": "Basisdaten",
         "section-company-profile": "Firmenprofil",

src/i18n/en/translation.json

@@ -123,7 +123,7 @@
         "partner-type-3": "Lecture hall sponsor",
         "partner-type-4": "Strategic partner",
         "partner-type-5": "Look IN",
-        "required-field-note": "* marks a required field",
+        "required-field-note-text": "indicates a required field",
         "section-address-contact": "Address and contact",
         "section-basic-data": "Basic data",
         "section-company-profile": "Company profile",

src/modules/companyForm.js

@@ -218,6 +218,7 @@ const keepCompanyFormTranslations = (t) => {
     t('company-form.partner-type-3');
     t('company-form.partner-type-4');
     t('company-form.partner-type-5');
+    t('company-form.required-field-note-text');
 };
 
 class CompanyModule extends BaseObject {
@@ -358,7 +359,10 @@ class CompanyFormElement extends BaseFormElement {
 
         return html`
             <form class="formalize-form">
-                <p class="required-field-note">${t('company-form.required-field-note')}</p>
+                <p class="required-field-note">
+                    <span class="red-marked-asterisk">*</span>
+                    ${t('company-form.required-field-note-text')}
+                </p>
 
                 <section class="form-section">
                     <h3>${t('company-form.section-basic-data')}</h3>
@@ -543,11 +547,14 @@ class CompanyFormElement extends BaseFormElement {
             }
 
             .required-field-note {
-                color: var(--dbp-muted);
-                font-size: 0.875rem;
                 margin: 0 0 0.75rem;
             }
 
+            .red-marked-asterisk {
+                color: var(--dbp-danger);
+                font-weight: bold;
+            }
+
             .form-section {
                 border-top: var(--dbp-border);
                 margin-top: 1.5rem;