Stylistyka informacji o składzie

src/components/JournalView/JournalTimetablesList.vue

@@ -95,9 +95,20 @@
           <hr />
 
           <div>
-            {{ `${$t('journal.stock-max-speed')}: ${timetable.maxSpeed}km/h` }} &bull;
-            {{ `${$t('journal.stock-length')}: ${timetable.stockLength}m` }} &bull;
-            {{ `${$t('journal.stock-mass')}: ${Math.floor(timetable.stockMass! / 1000)}t` }}
+            <span class="badge info-badge">
+              <span>{{ $t('journal.stock-max-speed') }}</span>
+              <span>{{ timetable.maxSpeed }}km/h</span>
+            </span>
+
+            <span class="badge info-badge">
+              <span>{{ $t('journal.stock-length') }}</span>
+              <span>{{ timetable.stockLength }}m</span>
+            </span>
+
+            <span class="badge info-badge">
+              <span>{{ $t('journal.stock-mass') }}</span>
+              <span>{{ Math.floor(timetable.stockMass! / 1000) }}t</span>
+            </span>
           </div>
 
           <ul class="stock-list">
@@ -193,7 +204,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import '../../styles/variables.scss';
 @import '../../styles/responsive.scss';
+@import '../../styles/badge.scss';
 @import '../../styles/JournalSection.scss';
 
 hr {
@@ -269,6 +282,13 @@ ul.stock-list {
   }
 }
 
+.info-badge {
+  span:last-child {
+    color: black;
+    background-color: $accentCol;
+  }
+}
+
 @include smallScreen {
   .info-top {
     flex-direction: column;
@@ -291,4 +311,4 @@ ul.stock-list {
     margin: 1em auto 0 auto;
   }
 }
-</style>
+</style>