fix(Ratings): icons styles

src/components/MetaPreview/MetaPreview.js

@@ -260,7 +260,7 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
                         null
                 }
                 {
-                    !compact ?
+                    !compact && like.type === 'Ready' ?
                         <Ratings
                             metaId={metaId}
                             like={like}

src/components/MetaPreview/Ratings/Ratings.less

@@ -32,11 +32,6 @@
             &:hover {
                 opacity: 1;
             }
-
-            &.active {
-                opacity: 0.9;
-                fill: var(--primary-foreground-color);
-            }
         }
     }
 }

src/components/MetaPreview/Ratings/Ratings.tsx

@@ -23,10 +23,10 @@ const Ratings = ({ metaId, like, className }: Props) => {
     return (
         <div className={classNames(styles['ratings-container'], className)}>
             <div className={styles['icon-container']} onClick={onLiked}>
-                <Icon name={'thumbs-up'} className={classNames(styles['icon'], { [styles['active']]: liked })} />
+                <Icon name={liked ? 'thumbs-up' : 'thumbs-up-outline'} className={styles['icon']} />
             </div>
             <div className={styles['icon-container']} onClick={onLoved}>
-                <Icon name={'heart'} className={classNames(styles['icon'], { [styles['active']]: loved })} />
+                <Icon name={loved ? 'heart' : 'heart-outline'} className={styles['icon']} />
             </div>
         </div>
     );