feat: pinging badge active vote (#5568)

* chore: adds prop classes to PingingBadge and remove positioning classes from it * feat: adds PingingBadge component to ProposalAnswer * chore: remove .ring css selector Co-authored-by: Tuditi <daviddetroch@pm.me>
iotaledger · Jan 17, 2023 · 6532b1d · 6532b1d
1 parent 3d3d9a4
commit 6532b1d
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 10 deletions.
diff --git a/packages/desktop/components/SidebarTab.svelte b/packages/desktop/components/SidebarTab.svelte
@@ -30,6 +30,7 @@
         <PingingBadge
             innerColor={tab?.notificationType === 'warning' ? 'yellow-600' : 'red-500'}
             outerColor={tab?.notificationType === 'warning' ? 'yellow-400' : 'red-300'}
+            classes="absolute -top-2 -left-2"
         />
     {/if}
 </button>

diff --git a/packages/shared/components/PingingBadge.svelte b/packages/shared/components/PingingBadge.svelte
@@ -1,9 +1,10 @@
 <script lang="typescript">
     export let innerColor = 'blue-500'
     export let outerColor = 'blue-500'
+    export let classes = ''
 </script>
 
-<span class="absolute -top-2 -left-2 flex justify-center items-center h-3 w-3">
+<span class="flex justify-center items-center h-3 w-3 {classes}">
     <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-{outerColor} opacity-75" />
     <span class="relative inline-flex rounded-full h-2 w-2 bg-{innerColor}" />
 </span>
diff --git a/packages/shared/components/ProposalAnswer.svelte b/packages/shared/components/ProposalAnswer.svelte
@@ -1,7 +1,7 @@
 <script lang="typescript">
     import type { Answer } from '@iota/wallet'
     import { createEventDispatcher } from 'svelte'
-    import { Text, FontWeight, TooltipIcon } from 'shared/components'
+    import { Text, FontWeight, TooltipIcon, PingingBadge } from 'shared/components'
     import { Position } from 'shared/components/enums'
     import { appSettings } from '@core/app/stores'
     import { Icon } from '@auxiliary/icon'
@@ -58,8 +58,8 @@
     <div class="flex space-x-3 items-center">
         {#if answerIndex !== undefined}
             {#if isVotedFor}
-                <div class="flex justify-center w-5">
-                    <span class="ring flex items-center justify-center h-1.5 w-1.5 bg-blue-500 rounded-full" />
+                <div class="flex justify-center items-center w-5">
+                    <PingingBadge classes="relative" />
                 </div>
             {:else}
                 <span
@@ -129,10 +129,4 @@
             @apply bg-gray-1000;
         }
     }
-
-    .ring {
-        @apply ring-4;
-        @apply ring-blue-500;
-        @apply ring-opacity-20;
-    }
 </style>