(1.9.5) Poprawki w ikonkach, logo i ogólne

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.9.3",
+  "version": "1.9.5",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/App.scss

@@ -1,8 +1,7 @@
-@import "./styles/responsive.scss";
+@import './styles/responsive.scss';
-@import "./styles/variables.scss";
+@import './styles/variables.scss';
-@import "./styles/global.scss";
+@import './styles/global.scss';
-@import "./styles/scenery_status.scss";
+@import './styles/scenery_status.scss';
-
 
 // VUE ROUTE CHANGE ANIMATION
 .view-anim {
@@ -49,7 +48,6 @@
   min-width: 0;
   min-height: 100vh;
 
-
   header {
     flex: 0 0 auto;
   }
@@ -94,36 +92,14 @@
     width: 1350px;
     padding: 0.5em 0.3em 0 0.3em;
     border-radius: 0 0 1em 1em;
-
   }
 
   &_brand {
-    position: relative;
+    img {
-    width: 100%;
+      width: 22em;
-    font-size: 4.25em;
-
-    text-align: center;
-
-    .logo-image {
-      width: 0.6em;
-      margin: 0 0.05em;
-    }
-
-    .brand_lang {
-      position: absolute;
-      right: 0;
-
-      transform: translate(110%, -35%);
-
-      img {
-        width: 0.6em;
-      }
-
-      cursor: pointer;
     }
   }
 
-
   &_info {
     display: flex;
     justify-content: space-between;
@@ -144,37 +120,62 @@
     padding: 0.5em;
   }
 
+  &_icons {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-end;
+    padding: 1em 0.5em;
+
+    @include smallScreen() {
+      right: auto;
+      left: 0.5em;
+      padding: 0.5em 0;
+
+      align-items: center;
+    }
+  }
 }
 
 // ICONS
 .icons {
-  display: flex;
+  position: relative;
-  position: absolute;
-  right: 0.5em;
-  bottom: 0;
 
-  a {      
+  &-top {
-    margin: 0.5em 0;
+    img {
-    margin-left: 0.6em;
+      width: 2.5em;
-    user-select: none;
+
+      cursor: pointer;
+    }
+
+    margin-bottom: 0.5em;
   }
 
-  img {
+  &-bottom {
-    width: 1.9em;
+    display: flex;
-  }
-
-  @include smallScreen() {
-    flex-direction: column;
-    right: 0.25em;
-    right: auto;
-    left: 0.5em;
-
 
     a {
-      margin: 0.25em 0;
+      margin-left: 0.6em;
+      user-select: none;
+    }
+
+    img {
+      width: 1.9em;
+    }
+
+    @include smallScreen() {
+      flex-direction: column;
+      
+      a {
+        margin: 0.25em 0;
+      }
     }
   }
-      
 }
 
 // COUNTER

src/App.vue

@@ -8,11 +8,16 @@
       </div> -->
       <header class="app_header">
         <div class="header_container">
-          <div class="header_icons-container">
+          <div class="header_icons">
-            <span class="icons">
+            <span class="icons-top">
+              <img :src="icons.pl" alt="icon-pl" @click="changeLang('en')" v-if="currentLang == 'pl'" />
+              <img :src="icons.en" alt="icon-en" @click="changeLang('pl')" v-else />
+            </span>
+            <span class="icons-bottom">
               <a href="https://www.paypal.com/paypalme/spythere" target="_blank">
                 <img :src="icons.dollar" alt="icon paypal" />
               </a>
+
               <a href="https://discord.gg/x2mpNN3svk" target="_blank">
                 <img :src="icons.discord" alt="icon discord" />
               </a>
@@ -22,32 +27,7 @@
           <div class="header_body">
             <status-indicator />
             <span class="header_brand">
-              <span>
+              <img :src="brand_logo" alt="Stacjownik" />
-                <span>S</span>
-                <span>tacj</span>
-                <span class="train-logo">
-                  <img class="logo-image" src="@/assets/stacjownik-logo.svg" alt="stacjownik logo" />
-                </span>
-                <span>wnik</span>
-              </span>
-              <span class="brand_lang">
-                <span
-                  class="lang pl"
-                  @click="changeLang('en')"
-                  :class="{ current: currentLang == 'pl' }"
-                  v-if="currentLang == 'pl'"
-                >
-                  <img :src="icons.pl" alt="icon-pl" />
-                </span>
-                <span
-                  class="lang en"
-                  @click="changeLang('pl')"
-                  :class="{ current: currentLang == 'en' }"
-                  v-if="currentLang == 'en'"
-                >
-                  <img :src="icons.en" alt="icon-en" />
-                </span>
-              </span>
             </span>
 
             <span class="header_info">
@@ -89,10 +69,8 @@
       </main>
 
       <footer class="app_footer">
-        &copy;
+        &copy;&nbsp;
-        <a href="https://td2.info.pl/profile/?u=20777" target="_blank">
+        <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>&nbsp;
-          Spythere
-        </a>
         {{ new Date().getUTCFullYear() }} | v{{ VERSION }}
       </footer>
     </div>
@@ -156,6 +134,8 @@ export default defineComponent({
     hasReleaseNotes: false,
     currentLang: 'pl',
 
+    brand_logo: require('@/assets/stacjownik-header-logo.svg'),
+
     icons: {
       en: require('@/assets/icon-en.jpg'),
       pl: require('@/assets/icon-pl.svg'),

src/assets/stacjownik-logo.svg

@@ -1,47 +0,0 @@
-<svg width="167" height="264" viewBox="0 0 167 264" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="123.045" y="220.423" width="4.02763" height="81.4873" rx="2.01382" transform="rotate(90 123.045 220.423)" fill="white"/>
-<rect x="143.417" y="234.52" width="6.04145" height="118.157" rx="3.02073" transform="rotate(90 143.417 234.52)" fill="white"/>
-<g filter="url(#filter0_d_271_96)">
-<rect width="14.1787" height="66.5346" rx="7.08937" transform="matrix(0.711174 0.703016 -0.711174 0.703016 58.3177 196.257)" fill="white"/>
-</g>
-<g filter="url(#filter1_d_271_96)">
-<rect width="14.1787" height="66.5346" rx="7.08937" transform="matrix(-0.711174 0.703016 0.711174 0.703016 108.682 196.257)" fill="white"/>
-</g>
-<g filter="url(#filter2_d_271_96)">
-<rect x="17.1115" y="27.1201" width="132.417" height="185.224" rx="20.3718" stroke="#7A7A7A" stroke-width="4.07437"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.0743 47.4919C15.0743 35.1157 25.1072 25.0829 37.4834 25.0829H129.157C141.533 25.0829 151.566 35.1157 151.566 47.4919V191.973C151.566 204.349 141.533 214.382 129.157 214.382H37.4834C25.1072 214.382 15.0743 204.349 15.0743 191.973V47.4919ZM56.4354 182.16C56.4354 189.946 49.9541 196.257 41.959 196.257C33.964 196.257 27.4827 189.946 27.4827 182.16C27.4827 174.375 33.964 168.064 41.959 168.064C49.9541 168.064 56.4354 174.375 56.4354 182.16ZM124.681 196.257C132.676 196.257 139.157 189.946 139.157 182.16C139.157 174.375 132.676 168.064 124.681 168.064C116.686 168.064 110.205 174.375 110.205 182.16C110.205 189.946 116.686 196.257 124.681 196.257ZM79.184 66.9687C79.184 64.8852 77.4949 63.1962 75.4114 63.1962H31.2553C29.1718 63.1962 27.4827 64.8852 27.4827 66.9687V106.04C27.4827 108.123 29.1718 109.812 31.2553 109.812H75.4114C77.4949 109.812 79.184 108.123 79.184 106.04V66.9687ZM135.385 63.1962C137.468 63.1962 139.157 64.8852 139.157 66.9687V106.04C139.157 108.123 137.468 109.812 135.385 109.812H91.2287C89.1452 109.812 87.4562 108.123 87.4562 106.04V66.9687C87.4562 64.8852 89.1452 63.1962 91.2287 63.1962H135.385Z" fill="white"/>
-<ellipse cx="83.32" cy="27.0967" rx="14.4763" ry="14.0967" fill="#F3F1F1"/>
-</g>
-<defs>
-<filter id="filter0_d_271_96" x="0.95343" y="186.177" width="77.4944" height="76.9037" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="6.5"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_271_96"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_271_96" result="shape"/>
-</filter>
-<filter id="filter1_d_271_96" x="88.5522" y="186.177" width="77.4944" height="76.9037" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="6.5"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_271_96"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_271_96" result="shape"/>
-</filter>
-<filter id="filter2_d_271_96" x="2.85124" y="0.776902" width="160.937" height="225.828" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="6.11155"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_271_96"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_271_96" result="shape"/>
-</filter>
-</defs>
-</svg>

src/components/TrainsView/TrainInfo.vue

@@ -206,6 +206,7 @@ export default defineComponent({
 
   width: 6em;
   height: 1em;
+  margin: 0.5em 0;
 
   .bar-fg,
   .bar-bg {
@@ -243,6 +244,8 @@ export default defineComponent({
     grid-template-columns: 1fr;
     gap: 1em 0;
     text-align: center;
+
+    font-size: 1.25em;
   }
 
   .info-stats {