From 57ea7fd5f7eeedbc6f7cdcfeb852abc1da97e622 Mon Sep 17 00:00:00 2001
From: sarah <sarayalth@gmail.com>
Date: Fri, 23 Jun 2023 15:46:15 +0200
Subject: [PATCH] Add drop shadow to rule icons

---
 src/components/ScheduleBox.vue                       | 2 +-
 src/components/ScheduleRow.vue                       | 4 ++--
 src/components/challenge/ChallengeScheduleBox.vue    | 2 +-
 src/components/challenge/ChallengeScheduleRow.vue    | 2 +-
 src/components/screenshots/ScreenshotScheduleBox.vue | 2 +-
 tailwind.config.js                                   | 3 +++
 6 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/ScheduleBox.vue b/src/components/ScheduleBox.vue
index f36ccfb..833afc5 100644
--- a/src/components/ScheduleBox.vue
+++ b/src/components/ScheduleBox.vue
@@ -16,7 +16,7 @@
           <div class="flex items-center space-x-2 text-sm lg:text-lg">
             <template v-if="store.activeSchedule && store.activeSchedule.settings">
               <div>
-                <RuleIcon :rule="store.activeSchedule.settings.vsRule" class="h-5 lg:h-6" />
+                <RuleIcon :rule="store.activeSchedule.settings.vsRule" class="h-5 lg:h-6 drop-shadow-ruleIcon" />
               </div>
               <div class="text-shadow">{{ $t(`splatnet.rules.${store.activeSchedule.settings.vsRule.id}.name`, store.activeSchedule.settings.vsRule.name) }}</div>
             </template>
diff --git a/src/components/ScheduleRow.vue b/src/components/ScheduleRow.vue
index dbf9632..11c94d9 100644
--- a/src/components/ScheduleRow.vue
+++ b/src/components/ScheduleRow.vue
@@ -3,7 +3,7 @@
     <div class="font-splatoon2 sm:hidden" v-if="props.schedule">
       <div class="flex items-center space-x-2">
         <div>
-          <RuleIcon :rule="props.schedule.settings.vsRule" class="h-5" />
+          <RuleIcon :rule="props.schedule.settings.vsRule" class="h-5 drop-shadow-ruleIcon" />
         </div>
         <div class="text-shadow">
           {{ $t(`splatnet.rules.${props.schedule.settings.vsRule.id}.name`, props.schedule.settings.vsRule.name) }}
@@ -31,7 +31,7 @@
           <template v-if="props.schedule">
             <div class="flex items-center justify-center space-x-2">
               <div>
-                <RuleIcon :rule="props.schedule.settings.vsRule" class="h-5 lg:h-6" />
+                <RuleIcon :rule="props.schedule.settings.vsRule" class="h-5 lg:h-6 drop-shadow-ruleIcon" />
               </div>
               <div class="text-xs lg:text-lg text-shadow">
                 {{ $t(`splatnet.rules.${props.schedule.settings.vsRule.id}.name`, props.schedule.settings.vsRule.name) }}
diff --git a/src/components/challenge/ChallengeScheduleBox.vue b/src/components/challenge/ChallengeScheduleBox.vue
index 2a374de..c53eb71 100644
--- a/src/components/challenge/ChallengeScheduleBox.vue
+++ b/src/components/challenge/ChallengeScheduleBox.vue
@@ -18,7 +18,7 @@
             <div class="flex items-center space-x-2 text-sm lg:text-lg">
               <template v-if="event">
                 <div>
-                  <RuleIcon :rule="event.settings.vsRule" class="h-5 lg:h-6" />
+                  <RuleIcon :rule="event.settings.vsRule" class="h-5 lg:h-6 drop-shadow-ruleIcon" />
                 </div>
                 <div class="text-shadow">{{ $t(`splatnet.rules.${event.settings.vsRule.id}.name`, event.settings.vsRule.name) }}</div>
               </template>
diff --git a/src/components/challenge/ChallengeScheduleRow.vue b/src/components/challenge/ChallengeScheduleRow.vue
index 2f3c277..0623af2 100644
--- a/src/components/challenge/ChallengeScheduleRow.vue
+++ b/src/components/challenge/ChallengeScheduleRow.vue
@@ -1,7 +1,7 @@
 <template>
   <template v-if="event && timePeriod">
     <div class="flex items-center w-full font-splatoon2" :class="isCurrent ? 'text-zinc-100' : 'text-zinc-300 opacity-60'">
-        <RuleIcon :rule="event.settings.vsRule" class="h-5 lg:h-6" />
+        <RuleIcon :rule="event.settings.vsRule" class="h-5 lg:h-6 drop-shadow-ruleIcon" />
         <div class="px-2 text-shadow whitespace-pre">
             {{ $d(timePeriod.startTime, 'dateTimeShortWeekday') }}
             &ndash;
diff --git a/src/components/screenshots/ScreenshotScheduleBox.vue b/src/components/screenshots/ScreenshotScheduleBox.vue
index 1a7e22b..0b5f380 100644
--- a/src/components/screenshots/ScreenshotScheduleBox.vue
+++ b/src/components/screenshots/ScreenshotScheduleBox.vue
@@ -11,7 +11,7 @@
         <div class="flex items-center justify-between font-splatoon2">
           <div class="flex items-center space-x-2 text-xl">
             <div>
-              <RuleIcon :rule="store.activeSchedule.settings.vsRule" class="h-8" />
+              <RuleIcon :rule="store.activeSchedule.settings.vsRule" class="h-8 drop-shadow-ruleIcon" />
             </div>
             <div class="text-shadow">{{ store.activeSchedule.settings.vsRule.name }}</div>
           </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 6fed956..e69e559 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -33,6 +33,9 @@ module.exports = {
         splatoon1: 'var(--font-family-s1)',
         splatoon2: 'var(--font-family-s2)',
       },
+      dropShadow: {
+        'ruleIcon': '1px 1px 0 rgb(0,0,0)',
+      },
     },
   },
   plugins: [