From 06d0fabc99bb384887dbaa82a659ffe738f9adbb Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 7 May 2025 20:45:13 +0200
Subject: [PATCH] chore: added new text style for donators

---
 src/components/Global/DonationCard.vue       |  4 ++--
 src/components/StationsView/StationTable.vue |  3 ++-
 src/components/Tooltip/DonatorTooltip.vue    |  6 ++++--
 src/components/TrainsView/TrainInfo.vue      |  1 +
 src/styles/_global.scss                      | 10 +++++++++-
 5 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/Global/DonationCard.vue b/src/components/Global/DonationCard.vue
index 5c9eb11..1574d75 100644
--- a/src/components/Global/DonationCard.vue
+++ b/src/components/Global/DonationCard.vue
@@ -9,7 +9,7 @@
           <transition mode="out-in" name="slider-anim" class="current-name">
             <span :key="displayingName">
               <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
-              {{ displayingName }}
+              <span class="text--donator">{{ displayingName }}</span>
             </span>
           </transition>
         </div>
@@ -45,7 +45,7 @@
           </template>
 
           <template v-slot:b2>
-            <b>{{ $t('donations.p4-b2') }}</b>
+            <b class="text--donator">{{ $t('donations.p4-b2') }}</b>
           </template>
         </i18n-t>
         <br />
diff --git a/src/components/StationsView/StationTable.vue b/src/components/StationsView/StationTable.vue
index 7801640..5449dc4 100644
--- a/src/components/StationsView/StationTable.vue
+++ b/src/components/StationsView/StationTable.vue
@@ -123,6 +123,7 @@
                 @click.prevent="openDonationCard"
                 data-tooltip-type="DonatorTooltip"
                 :data-tooltip-content="$t('donations.dispatcher-message')"
+                class="text--donator"
               >
                 <img src="/images/icon-diamond.svg" alt="" />
                 {{ station.onlineInfo.dispatcherName }}
@@ -525,7 +526,7 @@ tr,
       opacity: 0.2;
     }
 
-    @include responsive.smallScreen{
+    @include responsive.smallScreen {
       margin: 0;
       padding: 0.3em 0.5em;
       font-size: 1em;
diff --git a/src/components/Tooltip/DonatorTooltip.vue b/src/components/Tooltip/DonatorTooltip.vue
index 7357d1c..626d118 100644
--- a/src/components/Tooltip/DonatorTooltip.vue
+++ b/src/components/Tooltip/DonatorTooltip.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="tooltip-content">
-    <img src="/images/icon-diamond.svg" alt="" />
+    <img src="/images/icon-diamond.svg" alt="diamond icon" />
     <span>{{ tooltipStore.content }}</span>
   </div>
 </template>
@@ -20,7 +20,10 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .tooltip-content {
+  display: flex;
+  align-items: center;
   gap: 0.5em;
+  flex-wrap: wrap;
 
   padding: 0.5em;
   border-radius: 0.25em;
@@ -34,6 +37,5 @@ export default defineComponent({
 img {
   vertical-align: middle;
   height: 1em;
-  margin-right: 0.5em;
 }
 </style>
diff --git a/src/components/TrainsView/TrainInfo.vue b/src/components/TrainsView/TrainInfo.vue
index 52ea077..93c1280 100644
--- a/src/components/TrainsView/TrainInfo.vue
+++ b/src/components/TrainsView/TrainInfo.vue
@@ -59,6 +59,7 @@
             v-if="apiStore.donatorsData.includes(train.driverName)"
             data-tooltip-type="DonatorTooltip"
             :data-tooltip-content="$t('donations.driver-message')"
+            class="text--donator"
           >
             {{ train.driverName }}
             <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
diff --git a/src/styles/_global.scss b/src/styles/_global.scss
index f5c4467..6880c22 100644
--- a/src/styles/_global.scss
+++ b/src/styles/_global.scss
@@ -201,7 +201,15 @@ ul {
 
   &--donator {
     color: var(--clr-donator);
-    text-shadow: var(--clr-donator) 0 0 10px;
+    color: transparent;
+
+    background: var(--clr-donator);
+    background: linear-gradient(90deg, #ff88db 30%, #ffffff 70%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;   
+
+    text-shadow: #f050ff 0 0 10px;
   }
 }