feat: Use different icons for booking expander meta

Author: MoritzWeber0

assets/sass/_variables.scss

@@ -27,6 +27,8 @@ html {
   --color-onLight: #{$color-onLight};
   --color-table-border: #{$color-table-border};
   --color-body: rgb(33, 37, 41);
+  --color-success: #0a8754;
+  --color-error: #c41e3a;
   --border-radius-s: 0.4rem;
   --border-radius-m: 0.8rem;
   --border-radius-l: 1.6rem;
@@ -57,6 +59,8 @@ html[data-theme="dark"] {
     --color-onLight: #ffffff;
     --color-table-border: #555;
     --color-body: #e0e0e0;
+    --color-success: #2ea44f;
+    --color-error: #f85149;
     --pagefind-ui-border: #555;
     --box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.5);
     --box-shadow-light: 0.4rem 0.4rem 0.4rem rgba(0, 0, 0, 0.3);

assets/sass/booking.scss

@@ -68,10 +68,8 @@
 }
 
 .o-booking__meta {
-  text-align: center;
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: center;
 
   @media (max-width: #{$breakpoint-md}) {
@@ -81,6 +79,20 @@
       display: none;
     }
   }
+
+  &-item {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+
+    &--success {
+      color: var(--color-success);
+    }
+
+    &--error {
+      color: var(--color-error);
+    }
+  }
 }
 
 .o-booking__links {

layouts/partials/booking.html

@@ -14,23 +14,28 @@
         {{- end }}
       </div>
       <div class="o-booking__meta">
-        {{- if ne .reservations "nil" -}}
-          <div>
-            {{- T "booking.reservation" }}
-            {{ if .reservations -}}✅{{- else -}}⛔{{- end -}}
-          </div>
-        {{- end -}}
-        {{- if ne .fip_50 "nil" -}}
-          <div>
-            {{- T "booking.fip-50" }}
-            {{ if .fip_50 -}}✅{{- else -}}⛔{{- end -}}
-          </div>
-        {{- end -}}
-        {{- if ne .fip_global_fare "nil" -}}
-          <div>
-            {{- T "booking.fip-global-fare" }}
-            {{ if .fip_global_fare -}}✅{{- else -}}⛔{{- end -}}
-          </div>
+        {{- $metaFields := slice
+          (dict "key" "reservations" "value" .reservations "label" "booking.reservation")
+          (dict "key" "fip_50" "value" .fip_50 "label" "booking.fip-50")
+          (dict "key" "fip_global_fare" "value" .fip_global_fare "label" "booking.fip-global-fare")
+        -}}
+        {{- range $metaFields -}}
+          {{- if ne .value "nil" -}}
+            <div
+              class="o-booking__meta-item {{ if .value }}
+                o-booking__meta-item--success
+              {{ else }}
+                o-booking__meta-item--error
+              {{ end }}"
+            >
+              {{- if .value -}}
+                {{- partial "icon" "check_circle" -}}
+              {{- else -}}
+                {{- partial "icon" "cancel" -}}
+              {{- end -}}
+              <span>{{- T .label -}}</span>
+            </div>
+          {{- end -}}
         {{- end -}}
       </div>
       <div class="o-booking__classes">