From 95fcd7cc00d52bc39aa82acc405f3c664830f104 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Sat, 21 May 2022 18:38:37 +0300
Subject: [PATCH] style: vote btn overlay bug on chrome

---
 src/Components/VoteButton/VoteButton.tsx         | 13 +++----------
 .../{styles.module.css => styles.module.scss}    | 16 +++++-----------
 2 files changed, 8 insertions(+), 21 deletions(-)
 rename src/Components/VoteButton/{styles.module.css => styles.module.scss} (91%)

diff --git a/src/Components/VoteButton/VoteButton.tsx b/src/Components/VoteButton/VoteButton.tsx
index 99ea2c7..00897ab 100644
--- a/src/Components/VoteButton/VoteButton.tsx
+++ b/src/Components/VoteButton/VoteButton.tsx
@@ -2,7 +2,7 @@ import { MdLocalFireDepartment } from 'react-icons/md'
 import Button from 'src/Components/Button/Button'
 import { useAppSelector, usePressHolder } from 'src/utils/hooks'
 import { ComponentProps, useRef, useState } from 'react'
-import styles from './styles.module.css'
+import styles from './styles.module.scss'
 import { random, randomItem, numberFormatter } from 'src/utils/helperFunctions'
 import { useDebouncedCallback, useThrottledCallback } from '@react-hookz/web'
 
@@ -183,6 +183,7 @@ export default function VoteButton({
                 ${fillType === 'radial' && styles.color_overlay__radial}
                 `}
                 >
+                    <div></div>
                 </div>
                 <div className={`
                 relative z-10 
@@ -201,15 +202,7 @@ export default function VoteButton({
             >+{increment.value}</span>)}
 
             <div className="relative z-50">
-                <MdLocalFireDepartment className={styles.spark}
-                    style={{
-                        opacity: 1,
-                        scale: 1,
-                        top: 0,
-                        left: 0,
-                        color: 'green'
-                    }}
-                />
+
                 {sparks.map(spark =>
                     <div
                         key={spark.id}
diff --git a/src/Components/VoteButton/styles.module.css b/src/Components/VoteButton/styles.module.scss
similarity index 91%
rename from src/Components/VoteButton/styles.module.css
rename to src/Components/VoteButton/styles.module.scss
index 8350e48..a7e116d 100644
--- a/src/Components/VoteButton/styles.module.css
+++ b/src/Components/VoteButton/styles.module.scss
@@ -71,7 +71,7 @@
   transition: all 0.1s;
 }
 
-.color_overlay::before {
+.color_overlay > div {
   content: "";
   background: var(--bg-color);
   width: 100%;
@@ -79,30 +79,24 @@
   position: absolute;
 }
 
-.color_overlay__background::before {
+.color_overlay__background > div {
   top: 0;
   right: 0;
 }
 
-.color_overlay__leftRight::before {
+.color_overlay__leftRight > div {
   top: 0;
   right: 100%;
   transform: translateX(var(--offset));
 }
 
-.color_overlay__upDown::before {
+.color_overlay__upDown > div {
   top: 100%;
   right: 0;
   transform: translateY(calc(-1 * var(--offset)));
 }
 
-@property --offset {
-  syntax: "<number>"; /* <- defined as type number for the transition to work */
-  initial-value: 0%;
-  inherits: false;
-}
-
-.color_overlay__radial::before {
+.color_overlay__radial > div {
   top: 0;
   right: 0;
   background: radial-gradient(