Tweak info-text and checkbox form-field

socreatory · Nov 18, 2024 · 52ef44f · 52ef44f
1 parent 9af23cf
commit 52ef44f
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 8 deletions.
diff --git a/lib/assets/images/icons/info.svg b/lib/assets/images/icons/info.svg
diff --git a/lib/components/form/_form.scss b/lib/components/form/_form.scss
@@ -34,6 +34,19 @@
   width: 100%;
 }
 
+.form__field--horizontal {
+  display: flex;
+  flex-direction: row;
+  gap: $spacer-2xs;
+  align-items: center;
+
+  input[type="checkbox"] {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin: 0;
+  }
+}
+
 .form__field--is-invalid {
   color: $brand-error;
 }

diff --git a/lib/components/icons/_icons.scss b/lib/components/icons/_icons.scss
@@ -35,6 +35,10 @@
   @include icon-before("icons/light-bulb-shine.svg", $brand-black, 2rem);
 }
 
+.icon--info {
+  @include icon-before("icons/info.svg", $brand-black, 1.2rem);
+}
+
 .icon--linkedin {
   @include icon-before("icons/social-linkedin.svg", $brand-black, 1.5rem);
 }

diff --git a/lib/components/icons/icons.md b/lib/components/icons/icons.md
@@ -13,4 +13,6 @@ _add_
 <span class="icon icon--link--primary" role="presentation"></span>
 
 <span class="icon icon--idea" role="presentation"></span>
+
+<span class="icon icon--info" role="presentation"></span>
 ```
diff --git a/lib/components/text/_text.scss b/lib/components/text/_text.scss
@@ -39,15 +39,20 @@ p {
   }
 }
 
-.paragraph--highligthed {
-  background-color: $brand-tertiary-light;
-  padding: $spacer-xs;
-}
-
 .paragraph__pre {
   white-space: break-spaces;
 }
 
+.info-text {
+  @extend %body-font-bold;
+
+  &::before {
+    content: asset-url("icons/info.svg");
+    display: inline-block;
+    vertical-align: middle;
+  }
+}
+
 .markdown-text--medium {
   > * {
     margin-bottom: 0;

diff --git a/...customer-pages/customer-trainings-detail-page/customer-trainings-detail-page.md b/...customer-pages/customer-trainings-detail-page/customer-trainings-detail-page.md
@@ -112,7 +112,7 @@ description: Customer Trainings Detail Page
                     </span>
                 </li>
             </ul>
-            <p class="paragraph--highligthed paragraph--medium"> Dieser Zeitplan ist unverbindlich und kann sich noch ändern. </p>
+            <p class="info-text"> Dieser Zeitplan ist unverbindlich und kann sich noch ändern. </p>
         </div>
         <div class="tile-grid__wrapper">
             <h2 class="section__title--sub">Wichtige Links</h2>

diff --git a/...ws/trainer_pages/trainer_trainings_detail_page/trainer_trainings_detail_page.md b/...ws/trainer_pages/trainer_trainings_detail_page/trainer_trainings_detail_page.md
@@ -275,7 +275,7 @@ description: Backend-View for Trainers shows details of a specific training
                 <turbo-frame>
                     <a href="#">Hinzufügen</a>
                 </turbo-frame>
-                <div class="m-t-sm">
+                <div class="m-t-sm form__field--horizontal">
                     <input type="checkbox" id="horns" name="Zeitplan" />
                     <label for="Zeitplan">Haken setzen, wenn der Zeitplan verbindlich ist</label>
                 </div>