feat: add sound icon to card (decentraland#2011)

siengvantran · Sep 12, 2023 · c7fb8e0 · c7fb8e0
1 parent 7fe3c11
commit c7fb8e0
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 30 deletions.
diff --git a/webapp/src/components/AssetCard/EmoteTags/EmoteTags.module.css b/webapp/src/components/AssetCard/EmoteTags/EmoteTags.module.css
@@ -1,5 +1,11 @@
 .EmoteTags {
   display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.EmoteTags .badges {
+  display: flex;
 }
 
 .EmoteTags .PlayModeSmallBadge {
@@ -13,14 +19,21 @@
   margin-left: 10px;
 }
 
+.EmoteTags .sound {
+  background-color: #37333d;
+  padding: 4px 6px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+}
+
 .EmoteTags .PlayModeSmallBadge .PlayIcon {
   height: 15px;
   background-position: center;
   background-repeat: no-repeat;
   width: 19px;
-  /* filter obtained using https://isotropic.co/tool/hex-color-to-css-filter/ */
-  filter: invert(99%) sepia(4%) saturate(57%) hue-rotate(228deg)
-    brightness(117%) contrast(100%);
+  filter: brightness(0) invert(1);
+  background-size: cover;
 }
 
 .EmoteTags .PlayModeSmallBadge .PlayOnce {

diff --git a/webapp/src/components/AssetCard/EmoteTags/EmoteTags.tsx b/webapp/src/components/AssetCard/EmoteTags/EmoteTags.tsx
@@ -2,43 +2,50 @@ import classNames from 'classnames'
 import { NFTCategory } from '@dcl/schemas'
 import { Popup } from 'decentraland-ui'
 import { T } from 'decentraland-dapps/dist/modules/translation/utils'
-import { isNFT } from '../../../modules/asset/utils'
 import { AssetType } from '../../../modules/asset/types'
+import soundSrc from '../../../images/emotes/sound.svg'
 import RarityBadge from '../../RarityBadge'
 import { Props } from './EmoteTags.types'
 import styles from './EmoteTags.module.css'
 
 const EmoteTags = (props: Props) => {
   const { asset } = props
-  const { rarity, loop } = asset.data.emote || {}
+  const { rarity, loop, hasSound } = asset.data.emote || {}
 
   return (
     <div className={classNames([styles.EmoteTags, 'tags'])}>
-      {rarity ? (
-        <RarityBadge
-          size="small"
-          rarity={rarity}
-          assetType={AssetType.NFT}
-          category={NFTCategory.EMOTE}
-          withTooltip={false}
-        />
-      ) : null}
-      {isNFT(asset) && loop !== undefined ? (
-        <Popup
-          position="top center"
-          content={<T id={`emote.play_mode.${loop ? 'loop' : 'simple'}`} />}
-          trigger={
-            <div className={styles.PlayModeSmallBadge}>
-              <span
-                className={classNames(
-                  styles.PlayIcon,
-                  loop ? styles.PlayLoop : styles.PlayOnce
-                )}
-              ></span>
-            </div>
-          }
-        />
-      ) : null}
+      <div className={styles.badges}>
+        {rarity ? (
+          <RarityBadge
+            size="small"
+            rarity={rarity}
+            assetType={AssetType.NFT}
+            category={NFTCategory.EMOTE}
+            withTooltip={false}
+          />
+        ) : null}
+        {loop !== undefined ? (
+          <Popup
+            position="top center"
+            content={<T id={`emote.play_mode.${loop ? 'loop' : 'simple'}`} />}
+            trigger={
+              <div className={styles.PlayModeSmallBadge}>
+                <span
+                  className={classNames(
+                    styles.PlayIcon,
+                    loop ? styles.PlayLoop : styles.PlayOnce
+                  )}
+                ></span>
+              </div>
+            }
+          />
+        ) : null}
+      </div>
+      {hasSound && (
+        <div className={styles.sound}>
+          <img src={soundSrc} alt="with sound" />
+        </div>
+      )}
     </div>
   )
 }