Audio: Better cover visibility (#1489)

src/components/common/Audio.scss

@@ -39,6 +39,10 @@
   .toggle-play {
     margin-inline-end: .5rem;
 
+    &.translucent-white {
+      color: rgba(255, 255, 255, 0.8);
+    }
+
     &.smaller {
       width: 3rem;
       height: 3rem;

src/components/ui/Button.scss

@@ -317,13 +317,4 @@
   .emoji {
     vertical-align: -3px;
   }
-
-  .backdrop {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-  }
 }

src/components/ui/Button.tsx

@@ -157,12 +157,7 @@ const Button: FC<OwnProps> = ({
           <span dir={isRtl ? 'auto' : undefined}>Please wait...</span>
           <Spinner color={isText ? 'blue' : 'white'} />
         </div>
-      ) : (
+      ) : children }
-        <>
-          {backgroundImage && <div className="backdrop" />}
-          {children}
-        </>
-      )}
       {!disabled && ripple && (
         <RippleEffect />
       )}