From 9e8e592d169d5bb97d7ffd4353037bc1410fb314 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sun, 20 Jun 2021 15:30:34 +0200
Subject: [PATCH] Dodano przycisk PayPal

---
 src/App.vue                | 11 ++---
 src/styles/global.scss     |  2 +
 src/views/StationsView.vue | 83 +++++++++++++++-----------------------
 3 files changed, 38 insertions(+), 58 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d14d9a9..6d12607 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -20,6 +20,7 @@ git <template>
             </span>
 
             <span class="brand_lang">
+
               <span
                 class="lang pl"
                 @click="changeLang('en')"
@@ -100,13 +101,8 @@ git <template>
         >
           Spythere
         </a>
-        2021 | v{{ VERSION }} | [
-        <a
-          target="_blank"
-          href="https://paypal.me/spythere"
-        >{{ $t("app.support") }}!
-        </a>
-        ]
+        2021 | v{{ VERSION }}
+
       </footer>
     </div>
   </div>
@@ -378,5 +374,6 @@ footer.app_footer {
   color: white;
 
   text-align: center;
+  vertical-align: middle;
 }
 </style>
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 5ef8163..442e0e5 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -137,6 +137,8 @@ input {
 }
 
 a {
+  display: inline-block;
+  
   color: white;
   text-decoration: none;
 
diff --git a/src/views/StationsView.vue b/src/views/StationsView.vue
index 817ff42..5ee8b5a 100644
--- a/src/views/StationsView.vue
+++ b/src/views/StationsView.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="stations-view">
-    <DonationModal :modalHidden="modalHidden" @toggleModal="toggleModal" />
+    <DonationModal
+      :modalHidden="modalHidden"
+      @toggleModal="toggleModal"
+    />
 
     <div class="wrapper">
       <div class="body">
@@ -13,29 +16,20 @@
             />
             <p>{{ $t("options.filters") }}</p>
           </action-button>
-        </div>
-        <!-- 
-          <div class="bar_indicators">
-            <transition name="indicator-anim">
-              <span
-                class="indicator_scenery-data"
-                v-if="data.dataConnectionStatus < 2"
-                :class="dataStatusClass"
-              >
-                <img :src="trainIcon" alt="icon-train" />
-              </span>
-            </transition>
 
-            <transition name="indicator-anim">
-              <span
-                class="indicator_timetable-data"
-                v-if="data.timetableDataStatus < 2"
-                :class="timetableDataStatusClass"
+          <div class="paypal-link">
+            <a
+              target="_blank"
+              href="https://paypal.me/spythere"
+            >
+              <img
+                src="https://img.shields.io/badge/PayPal-00457C?style=for-the-badge&logo=paypal&logoColor=white"
+                alt="PayPal image"
+                style="width: 7em"
               >
-                <img :src="timetableIcon" alt="icon-timetable" />
-              </span>
-            </transition>
-          </div> -->
+            </a>
+          </div>
+        </div>
 
         <StationTable
           :stations="computedStations"
@@ -255,47 +249,34 @@ export default class StationsView extends Vue {
 }
 
 .body {
-  margin: 0 auto;
-  overflow: auto;
+  max-width: 100%;
 }
 
 .options-bar {
   display: flex;
+
   margin-bottom: 0.5em;
 }
 
-// .bar_indicators {
-//   border: 1px solid red;
+.paypal-link {
+  flex-grow: 2;
+  text-align: right;
 
-//   & > span {
-//     margin-left: 0.5em;
-//     padding: 0.5em 0.5em;
+  img {
+    vertical-align: middle;
+    border-radius: 0.5em;
+    transition: box-shadow 150ms;
+  }
 
-//     // background-color: #e68e00;
-//     border-radius: 1em 1em 0 0;
-
-//     &.loading {
-//       background-color: $accentCol;
-//     }
-
-//     &.error {
-//       background-color: $errorCol;
-//     }
-
-//     &.success {
-//       background-color: $secondaryCol;
-//     }
-
-//     & > img {
-//       width: 1.7em;
-//       animation: blinkAnim 2s ease-in-out infinite forwards;
-//     }
-//   }
-// }
+  a:hover img,
+  a:focus img {
+    box-shadow: 0 0 10px 3px #0f62ce;
+  }
+}
 
 @include smallScreen {
   .options-bar {
-    font-size: 1.2em;
+    font-size: 1.1em;
   }
 }
 </style>