Reactions: Remove reaction backgaound color

Author: ealush

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.7.2",
+  "version": "4.7.3",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/components/Reactions/BtnPlus.tsx

@@ -49,7 +49,8 @@ const styles = stylesheet.create({
       backgroundColor: 'var(--epr-hover-bg-color)',
       // @ts-ignore
       ':after': {
-        backgroundPositionY: '-20px'
+        backgroundPositionY: '-20px',
+        transform: 'scale(1.2)'
       }
     },
     ':focus': {

src/components/Reactions/Reactions.tsx

@@ -40,7 +40,7 @@ export function Reactions() {
             unified={reaction}
             showVariations={false}
             className={cx(styles.emojiButton)}
-            round
+            noBackground
           />
         </li>
       ))}

src/components/emoji/ClickableEmojiButton.tsx

@@ -17,7 +17,7 @@ type ClickableEmojiButtonProps = Readonly<{
   children: React.ReactNode;
   hasVariations: boolean;
   unified?: string;
-  round?: boolean;
+  noBackground?: boolean;
   className?: string;
 }>;
 
@@ -30,7 +30,7 @@ export function ClickableEmojiButton({
   hasVariations,
   children,
   className,
-  round = false
+  noBackground = false
 }: ClickableEmojiButtonProps) {
   return (
     <Button
@@ -42,7 +42,7 @@ export function ClickableEmojiButton({
           [ClassNames.visible]: !hidden && !hiddenOnSearch
         },
         !!(hasVariations && showVariations) && styles.hasVariations,
-        round && styles.round,
+        noBackground && styles.noBackground,
         className
       )}
       data-unified={unified}
@@ -76,8 +76,16 @@ const styles = stylesheet.create({
       backgroundColor: 'var(--epr-focus-bg-color)'
     }
   },
-  round: {
-    borderRadius: '50%'
+  noBackground: {
+    background: 'none',
+    ':hover': {
+      backgroundColor: 'transparent',
+      background: 'none'
+    },
+    ':focus': {
+      backgroundColor: 'transparent',
+      background: 'none'
+    }
   },
   hasVariations: {
     '.': ClassNames.emojiHasVariations,

src/components/emoji/Emoji.tsx

@@ -14,7 +14,7 @@ type ClickableEmojiProps = Readonly<
     hiddenOnSearch?: boolean;
     emoji: DataEmoji;
     className?: string;
-    round?: boolean;
+    noBackground?: boolean;
   }
 >;
 
@@ -29,7 +29,7 @@ export function ClickableEmoji({
   lazyLoad,
   getEmojiUrl,
   className,
-  round = false
+  noBackground = false
 }: ClickableEmojiProps) {
   const hasVariations = emojiHasVariations(emoji);
 
@@ -41,7 +41,7 @@ export function ClickableEmoji({
       hiddenOnSearch={hiddenOnSearch}
       emojiNames={emojiNames(emoji)}
       unified={unified}
-      round={round}
+      noBackground={noBackground}
     >
       <ViewOnlyEmoji
         unified={unified}