From 52ef44f255d6995de71d8e2d312db4e382adf49e Mon Sep 17 00:00:00 2001
From: Ute Mayer-Dohmen <mail@nanoparsec.works>
Date: Mon, 18 Nov 2024 17:23:08 +0100
Subject: [PATCH] Tweak info-text and checkbox form-field

---
 lib/assets/images/icons/info.svg                  |  2 +-
 lib/components/form/_form.scss                    | 13 +++++++++++++
 lib/components/icons/_icons.scss                  |  4 ++++
 lib/components/icons/icons.md                     |  2 ++
 lib/components/text/_text.scss                    | 15 ++++++++++-----
 .../customer-trainings-detail-page.md             |  2 +-
 .../trainer_trainings_detail_page.md              |  2 +-
 7 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/lib/assets/images/icons/info.svg b/lib/assets/images/icons/info.svg
index de88884..8d2b81a 100644
--- a/lib/assets/images/icons/info.svg
+++ b/lib/assets/images/icons/info.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="Alerts-Information-Circle--Streamline-Freehand.svg" height="24" width="24"><desc>Alerts Information Circle Streamline Icon: https://streamlinehq.com</desc><g><path d="M23.91 10.35A9.88 9.88 0 0 0 22 5.56 13 13 0 0 0 12.87 0.31a11.13 11.13 0 0 0 -9.75 3.91A12.92 12.92 0 0 0 0.69 16.65c1.38 3.7 4.82 6.59 10.29 7a16.38 16.38 0 0 0 2.89 0 12.35 12.35 0 0 0 2.84 -0.61 0.37 0.37 0 0 0 0.22 -0.45 0.35 0.35 0 0 0 -0.44 -0.22 11.25 11.25 0 0 1 -2.69 0.53 14.92 14.92 0 0 1 -2.75 0c-5 -0.5 -8.19 -3.17 -9.41 -6.6A11.87 11.87 0 0 1 4 5a10 10 0 0 1 8.72 -3.48 12.12 12.12 0 0 1 8.42 4.7A8.93 8.93 0 0 1 23 10.47a12.19 12.19 0 0 1 -0.3 4.77 12.38 12.38 0 0 1 -1.42 3.4 9.41 9.41 0 0 1 -2.51 2.66 0.29 0.29 0 0 0 -0.08 0.42 0.31 0.31 0 0 0 0.43 0.09A9.89 9.89 0 0 0 21.9 19a13 13 0 0 0 1.58 -3.57 13 13 0 0 0 0.43 -5.08Z" fill="currentColor" stroke-width="1"></path><path d="M11.6 4a0.31 0.31 0 0 0 -0.12 -0.6c-1.45 0.16 -1.85 1 -1.8 1.68a1.88 1.88 0 0 0 0.68 1.25 2.33 2.33 0 0 0 1.24 0.54 2 2 0 0 0 2.05 -1.09 1.72 1.72 0 0 0 -0.47 -2.17 0.37 0.37 0 0 0 -0.5 0 0.36 0.36 0 0 0 0 0.5 0.88 0.88 0 0 1 0.08 1.15 1 1 0 0 1 -1.05 0.4 1.33 1.33 0 0 1 -0.89 -0.48c-0.12 -0.16 -0.25 -0.31 -0.21 -0.49s0.39 -0.53 0.99 -0.69Z" fill="currentColor" stroke-width="1"></path><path d="M10.58 17.93a0.77 0.77 0 0 0 0.2 0.43 3.87 3.87 0 0 0 2 0.55 8.84 8.84 0 0 0 2.8 -0.18 0.87 0.87 0 0 0 0.43 -0.49 2.83 2.83 0 0 0 0.13 -0.7l0.11 -0.67a1 1 0 0 0 -0.4 -1 2.93 2.93 0 0 0 -1.28 -0.4c-0.19 0 -0.39 0 -0.55 -0.09a1.1 1.1 0 0 1 0 -0.18c0 -1.05 0 -3.41 -0.07 -4.9a5.32 5.32 0 0 0 -0.2 -1.34 0.57 0.57 0 0 0 -0.29 -0.33 5.72 5.72 0 0 0 -1.92 -0.49 7.65 7.65 0 0 0 -1.93 0.05 0.36 0.36 0 0 0 -0.31 0.39 0.35 0.35 0 0 0 0.39 0.3 8.11 8.11 0 0 1 1.77 0c2 0.27 1.57 0.53 1.59 1.31 0 1.41 -0.08 3.71 -0.11 4.85l0 0.66a0.59 0.59 0 0 0 0.17 0.41 1.51 1.51 0 0 0 0.75 0.36c0.26 0.06 0.57 0.1 0.85 0.16s0.29 0.16 0.38 0.17l-0.1 0.6 0 0.32a9 9 0 0 1 -1.67 0.05 8.51 8.51 0 0 1 -1.36 -0.14l-0.22 0a2.35 2.35 0 0 0 0 -0.26c-0.09 -1.26 -0.09 -4.17 -0.1 -5.49l0 -0.64a0.5 0.5 0 0 0 -0.14 -0.34 1.64 1.64 0 0 0 -0.88 -0.44c-0.5 -0.09 -1 0.07 -1.66 -0.08 0 -0.06 -0.09 -0.18 -0.1 -0.29a3.57 3.57 0 0 1 0 -0.86l0 -0.05a0.25 0.25 0 0 0 0 -0.19 0.3 0.3 0 0 0 -0.33 -0.26 0.31 0.31 0 0 0 -0.23 0.12 1.23 1.23 0 0 0 -0.13 0.48 3.63 3.63 0 0 0 0.09 1.28 0.67 0.67 0 0 0 0.38 0.42 11.24 11.24 0 0 0 1.8 0.2 1 1 0 0 1 0.3 0.13 3.45 3.45 0 0 1 0 0.38c0 1.06 -0.17 3.42 -0.18 4.93a9.72 9.72 0 0 0 0.02 1.26Z" fill="currentColor" stroke-width="1"></path></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="Alerts-Information-Circle--Streamline-Freehand.svg" height="20" width="20"><desc>Alerts Information Circle Streamline Icon: https://streamlinehq.com</desc><g><path d="M23.91 10.35A9.88 9.88 0 0 0 22 5.56 13 13 0 0 0 12.87 0.31a11.13 11.13 0 0 0 -9.75 3.91A12.92 12.92 0 0 0 0.69 16.65c1.38 3.7 4.82 6.59 10.29 7a16.38 16.38 0 0 0 2.89 0 12.35 12.35 0 0 0 2.84 -0.61 0.37 0.37 0 0 0 0.22 -0.45 0.35 0.35 0 0 0 -0.44 -0.22 11.25 11.25 0 0 1 -2.69 0.53 14.92 14.92 0 0 1 -2.75 0c-5 -0.5 -8.19 -3.17 -9.41 -6.6A11.87 11.87 0 0 1 4 5a10 10 0 0 1 8.72 -3.48 12.12 12.12 0 0 1 8.42 4.7A8.93 8.93 0 0 1 23 10.47a12.19 12.19 0 0 1 -0.3 4.77 12.38 12.38 0 0 1 -1.42 3.4 9.41 9.41 0 0 1 -2.51 2.66 0.29 0.29 0 0 0 -0.08 0.42 0.31 0.31 0 0 0 0.43 0.09A9.89 9.89 0 0 0 21.9 19a13 13 0 0 0 1.58 -3.57 13 13 0 0 0 0.43 -5.08Z" fill="currentColor" stroke-width="1"></path><path d="M11.6 4a0.31 0.31 0 0 0 -0.12 -0.6c-1.45 0.16 -1.85 1 -1.8 1.68a1.88 1.88 0 0 0 0.68 1.25 2.33 2.33 0 0 0 1.24 0.54 2 2 0 0 0 2.05 -1.09 1.72 1.72 0 0 0 -0.47 -2.17 0.37 0.37 0 0 0 -0.5 0 0.36 0.36 0 0 0 0 0.5 0.88 0.88 0 0 1 0.08 1.15 1 1 0 0 1 -1.05 0.4 1.33 1.33 0 0 1 -0.89 -0.48c-0.12 -0.16 -0.25 -0.31 -0.21 -0.49s0.39 -0.53 0.99 -0.69Z" fill="currentColor" stroke-width="1"></path><path d="M10.58 17.93a0.77 0.77 0 0 0 0.2 0.43 3.87 3.87 0 0 0 2 0.55 8.84 8.84 0 0 0 2.8 -0.18 0.87 0.87 0 0 0 0.43 -0.49 2.83 2.83 0 0 0 0.13 -0.7l0.11 -0.67a1 1 0 0 0 -0.4 -1 2.93 2.93 0 0 0 -1.28 -0.4c-0.19 0 -0.39 0 -0.55 -0.09a1.1 1.1 0 0 1 0 -0.18c0 -1.05 0 -3.41 -0.07 -4.9a5.32 5.32 0 0 0 -0.2 -1.34 0.57 0.57 0 0 0 -0.29 -0.33 5.72 5.72 0 0 0 -1.92 -0.49 7.65 7.65 0 0 0 -1.93 0.05 0.36 0.36 0 0 0 -0.31 0.39 0.35 0.35 0 0 0 0.39 0.3 8.11 8.11 0 0 1 1.77 0c2 0.27 1.57 0.53 1.59 1.31 0 1.41 -0.08 3.71 -0.11 4.85l0 0.66a0.59 0.59 0 0 0 0.17 0.41 1.51 1.51 0 0 0 0.75 0.36c0.26 0.06 0.57 0.1 0.85 0.16s0.29 0.16 0.38 0.17l-0.1 0.6 0 0.32a9 9 0 0 1 -1.67 0.05 8.51 8.51 0 0 1 -1.36 -0.14l-0.22 0a2.35 2.35 0 0 0 0 -0.26c-0.09 -1.26 -0.09 -4.17 -0.1 -5.49l0 -0.64a0.5 0.5 0 0 0 -0.14 -0.34 1.64 1.64 0 0 0 -0.88 -0.44c-0.5 -0.09 -1 0.07 -1.66 -0.08 0 -0.06 -0.09 -0.18 -0.1 -0.29a3.57 3.57 0 0 1 0 -0.86l0 -0.05a0.25 0.25 0 0 0 0 -0.19 0.3 0.3 0 0 0 -0.33 -0.26 0.31 0.31 0 0 0 -0.23 0.12 1.23 1.23 0 0 0 -0.13 0.48 3.63 3.63 0 0 0 0.09 1.28 0.67 0.67 0 0 0 0.38 0.42 11.24 11.24 0 0 0 1.8 0.2 1 1 0 0 1 0.3 0.13 3.45 3.45 0 0 1 0 0.38c0 1.06 -0.17 3.42 -0.18 4.93a9.72 9.72 0 0 0 0.02 1.26Z" fill="currentColor" stroke-width="1"></path></g></svg>
diff --git a/lib/components/form/_form.scss b/lib/components/form/_form.scss
index a33f597..1d6f428 100644
--- 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
index 7314faf..1c36dc9 100644
--- 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
index 25d168a..afa6571 100644
--- 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
index 026402d..9d842a9 100644
--- 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/lib/views/customer-pages/customer-trainings-detail-page/customer-trainings-detail-page.md b/lib/views/customer-pages/customer-trainings-detail-page/customer-trainings-detail-page.md
index 5393a6e..8779331 100644
--- a/lib/views/customer-pages/customer-trainings-detail-page/customer-trainings-detail-page.md
+++ b/lib/views/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/lib/views/trainer_pages/trainer_trainings_detail_page/trainer_trainings_detail_page.md b/lib/views/trainer_pages/trainer_trainings_detail_page/trainer_trainings_detail_page.md
index a3691ce..43c2d41 100644
--- a/lib/views/trainer_pages/trainer_trainings_detail_page/trainer_trainings_detail_page.md
+++ b/lib/views/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>