From 0821fd708ec41fc6c391fb8e4892ee7102ffe4c1 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Mon, 5 Sep 2022 23:44:36 +0200
Subject: [PATCH] =?UTF-8?q?Stylistyka=20informacji=20o=20sk=C5=82adzie?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../JournalView/JournalTimetablesList.vue     | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/components/JournalView/JournalTimetablesList.vue b/src/components/JournalView/JournalTimetablesList.vue
index 8c4c44f..e618289 100644
--- a/src/components/JournalView/JournalTimetablesList.vue
+++ b/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>
\ No newline at end of file
+</style>