From 65b7e614f0a3ee2785aeadeee599737d14cf83fc Mon Sep 17 00:00:00 2001
From: RockinChaos <JacobGaming@CraftationGaming.com>
Date: Tue, 27 Aug 2024 17:26:34 -0700
Subject: [PATCH] fix: icons

---
 common/components/cards/PreviewCard.svelte |  5 +-
 common/views/ViewAnime/AudioLabel.svelte   | 73 +++++++++++++---------
 common/views/ViewAnime/Details.svelte      |  4 +-
 3 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/common/components/cards/PreviewCard.svelte b/common/components/cards/PreviewCard.svelte
index b0a441b..42aad7b 100644
--- a/common/components/cards/PreviewCard.svelte
+++ b/common/components/cards/PreviewCard.svelte
@@ -49,7 +49,7 @@
   <div class='banner position-relative bg-black overflow-hidden'>
     <img src={media.bannerImage || (media.trailer?.id ? `https://i.ytimg.com/vi/${media.trailer?.id}/hqdefault.jpg` : media.coverImage?.extraLarge || ' ')} alt='banner' class='img-cover w-full h-full' />
     {#if media.trailer?.id}
-      <div class='position-absolute z-10 top-0 right-0 p-15' use:click={toggleMute}>
+      <div class='position-absolute z-10 top-0 right-0 p-15 sound' use:click={toggleMute}>
         {#if muted}
           <VolumeX size='2.2rem' fill='currentColor' />
         {:else}
@@ -170,6 +170,9 @@
   .banner {
     height: 45%
   }
+  .sound {
+   filter: drop-shadow(0 0 .4rem rgba(0, 0, 0, 1))
+  }
   /* video {
     object-fit: cover;
   } */
diff --git a/common/views/ViewAnime/AudioLabel.svelte b/common/views/ViewAnime/AudioLabel.svelte
index f26a8b4..f785258 100644
--- a/common/views/ViewAnime/AudioLabel.svelte
+++ b/common/views/ViewAnime/AudioLabel.svelte
@@ -4,7 +4,7 @@
     import { malDubs } from '@/modules/animedubs.js'
     import { writable } from 'svelte/store'
     import { matchPhrase } from "@/modules/util.js"
-    import { Mic, MicOff, Captions, GraduationCap } from 'lucide-svelte'
+    import { Mic, MicOff, Captions, TriangleAlert } from 'lucide-svelte'
 
     /** @type {import('@/modules/al.d.ts').Media} */
     export let media = null
@@ -35,20 +35,22 @@
 
 {#if !banner && !viewAnime && !example}
     {#if settings.value.cardAudio}
-        <div class='pl-10 pt-10 position-absolute top-0 left-0 filled font-weight-medium z-10 {$isDubbed ? "dubbed" : $isPartial ? "incomplete" : "subbed"}' title={$isDubbed ? "English Dubbed" : $isPartial ? "English Dub was not completed" : "Subtitles Only"}>
+        <div class='position-absolute top-0 left-0 ml-10 mt-10 d-flex align-items-center justify-content-center'>
+        <div class='w-auto h-auto z-10 text-white d-flex align-items-center justify-content-center {$isDubbed ? "dubbed" : $isPartial ? "incomplete" : "subbed"}'>
             {#if $isDubbed}
-                <Mic size='3rem' />
+                <Mic size='2.5rem' />
             {:else if $isPartial}
-                <MicOff size='3rem' />
+                <MicOff size='2.5rem' />
             {:else}
-                <Captions size='3rem' />
+                <Captions size='2.5rem' />
             {/if}
         </div>
         {#if media.isAdult}
-             <div class='pt-10 position-absolute top-0 left-0 filled font-weight-medium z-10 adult'>
-                <GraduationCap size='3rem' />
-             </div>
+            <div class='ml-5 w-auto h-auto z-10 text-white d-flex align-items-center justify-content-center adult'>
+                <TriangleAlert size='2.5rem' />
+            </div>
         {/if}
+        </div>
     {/if}
  {:else if !viewAnime && !example}
      {$isDubbed ? 'Dub' : $isPartial ? 'Partial Dub' : 'Sub'}
@@ -65,44 +67,53 @@
      </span>
  {:else}
      <div>
-         <span class='font-size-24 label ml-20 position-relative z-10 adult'>
-             <GraduationCap size='2.5rem' />
-         </span>
-         <span class='position-relative ml-2'>Rated 18+</span>
-         <span class='font-size-24 label ml-20 position-relative z-10 subbed'>
-             <Captions size='2.5rem' />
-         </span>
-         <span class='position-relative ml-2'>Sub Only</span>
-         <span class='font-size-24 label ml-20 position-relative z-10 incomplete'>
-             <MicOff size='2.5rem' />
-         </span>
-         <span class='position-relative ml-2'>Partial Dub</span>
-         <span class='font-size-24 label ml-20 position-relative z-10 dubbed'>
-             <Mic size='2.5rem' />
-         </span>
-         <span class='position-relative ml-2'>Dub</span>
+         <div class='position-relative d-flex align-items-center justify-content-center mt-5'>
+             <div class='position-relative d-flex align-items-center justify-content-center'>
+                 <div class='font-size-24 label ml-20 z-10 adult'>
+                     <TriangleAlert size='2.5rem' />
+                 </div>
+                 <span class='ml-5 mb-5'>Rated 18+</span>
+             </div>
+             <div class='position-relative d-flex align-items-center justify-content-center'>
+                 <div class='font-size-24 label ml-20 z-10 subbed'>
+                     <Captions size='2.5rem' />
+                 </div>
+                 <span class='ml-5 mb-5'>Sub Only</span>
+             </div>
+             <div class='position-relative d-flex align-items-center justify-content-center'>
+                 <div class='font-size-24 label ml-20 z-10 incomplete'>
+                     <MicOff size='2.5rem' />
+                 </div>
+                 <span class='ml-5 mb-5'>Partial Dub</span>
+             </div>
+             <div class='position-relative d-flex align-items-center justify-content-center'>
+                 <div class='font-size-24 label ml-20 z-10 dubbed'>
+                     <Mic size='2.5rem' />
+                 </div>
+                 <span class='ml-5 mb-5 mr-10'>Dub</span>
+              </div>
+          </div>
      </div>
  {/if}
 
  <style>
      .label {
-         top: 0.625rem;
+         top: .625rem;
      }
      .adult {
-         color: rgba(215, 6, 10) !important;
-         padding-left: 4.6rem;
-         text-shadow: black 0 0 1rem;
+         color: rgb(215, 6, 10) !important;
+         filter: drop-shadow(0 0 .4rem rgba(0, 0, 0, 1)) drop-shadow(0 0 .4rem rgba(0, 0, 0, 1));
      }
      .dubbed {
          color: rgb(255, 214, 0) !important;
-         text-shadow: black 0 0 .5rem;
+         filter: drop-shadow(0 0 .4rem rgba(0, 0, 0, 1)) drop-shadow(0 0 .4rem rgba(0, 0, 0, 1));
      }
      .subbed {
          color: rgb(137, 39, 255) !important;
-         text-shadow: black 0 0 .5rem;
+         filter: drop-shadow(0 0 .4rem rgba(0, 0, 0, 1)) drop-shadow(0 0 .4rem rgba(0, 0, 0, 1));
      }
      .incomplete {
          color: rgb(255, 94, 0) !important;
-         text-shadow: black 0 0 .5rem;
+         filter: drop-shadow(0 0 .4rem rgba(0, 0, 0, 1)) drop-shadow(0 0 .4rem rgba(0, 0, 0, 1));
      }
  </style>
diff --git a/common/views/ViewAnime/Details.svelte b/common/views/ViewAnime/Details.svelte
index 2a9dc24..8f7c0b9 100644
--- a/common/views/ViewAnime/Details.svelte
+++ b/common/views/ViewAnime/Details.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Building2, Earth, GraduationCap, FolderKanban, Languages, CalendarRange, MonitorPlay, Type } from 'lucide-svelte'
+  import { Building2, Earth, TriangleAlert, FolderKanban, Languages, CalendarRange, MonitorPlay, Type } from 'lucide-svelte'
 
   export let media = null
   export let alt = null
@@ -10,7 +10,7 @@
     { property: 'studios', label: 'Studio', icon: Building2, custom: 'property' },
     { property: 'source', label: 'Source', icon: FolderKanban },
     { property: 'countryOfOrigin', label: 'Country', icon: Earth, custom: 'property' },
-    { property: 'isAdult', label: 'Adult', icon: GraduationCap },
+    { property: 'isAdult', label: 'Adult', icon: TriangleAlert },
     { property: 'english', label: 'English', icon: Type },
     { property: 'romaji', label: 'Romaji', icon: Languages },
     { property: 'native', label: 'Native', icon: '語', custom: 'icon' }