fix: improve emoji ticker display in token cards

Co-Authored-By: devin.riot152@passmail.net <devin.riot152@passmail.net>
stampchain-io · Dec 19, 2024 · 7c6f287 · 7c6f287
1 parent ad22703
commit 7c6f287
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/islands/src20/cards/SRC20BaseCard.tsx b/islands/src20/cards/SRC20BaseCard.tsx
@@ -67,7 +67,7 @@ export function SRC20BaseCard(
           alt={convertToEmoji(src20.tick)}
         />
         <div class="flex flex-col">
-          <p class="text-2xl mobileLg:text-4xl font-black uppercase flex gap-4">
+          <p class="text-2xl mobileLg:text-4xl font-black uppercase flex gap-4 relative z-[20]">
             {(() => {
               const { text, emoji } = splitTextAndEmojis(
                 convertToEmoji(src20.tick),
@@ -83,11 +83,10 @@ export function SRC20BaseCard(
                       {text}
                     </span>
                   )}
-                  {emoji && <span>{emoji}</span>}
+                  {emoji && <span class="emoji-ticker">{emoji}</span>}
                 </>
               );
             })()}
-            {/* Social Icons */}
             <div class="flex gap-2">
               {src20.email != null && (
                 <a href={src20.email} target="_blank">

diff --git a/static/styles.css b/static/styles.css
@@ -467,3 +467,12 @@ body {
   border-bottom-left-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
 }
+
+/* Emoji ticker styling for SRC20 cards */
+.emoji-ticker {
+  @apply text-stamp-primary-hover;
+  font-family: system-ui;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+}