chore: added new text style for donators

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 />

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;

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>

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" />

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;
   }
 }