Tidyup, handle diff contrasts

src/components/Molecules/Promo/ProgressRing.js

@@ -6,8 +6,10 @@ import {
 } from './PromoVideoButton.style';
 
 const ProgressRing = ({
-  thisStroke, thisRadius, videoProgress, isPlaying
+  videoProgress, ...rest
 }) => {
+  const thisStroke = 4;
+  const thisRadius = 28;
   const initNormRadius = thisRadius - thisStroke * 2;
   const thisCircumference = initNormRadius * 2 * Math.PI;
   const [thisDashOffset, setThisDashOffset] = useState(initNormRadius * 2 * Math.PI);
@@ -27,18 +29,15 @@ const ProgressRing = ({
           r={`${initNormRadius}`}
           cx={`${thisRadius}`}
           cy={`${thisRadius}`}
-          isPlaying={isPlaying}
+          {...rest}
         />
       </ProgressRingSVG>
     </ProgressRingWrapper>
   );
 };
 
 ProgressRing.propTypes = {
-  thisStroke: PropTypes.number.isRequired,
-  thisRadius: PropTypes.number.isRequired,
-  videoProgress: PropTypes.number.isRequired,
-  isPlaying: PropTypes.bool.isRequired
+  videoProgress: PropTypes.number.isRequired
 };
 
 export default ProgressRing;

src/components/Molecules/Promo/Promo.js

@@ -23,7 +23,7 @@ const Promo = ({
   video
 }) => {
   // To be updated via useEffect on load:
-  const [isPlaying, setIsPlaying] = useState(null);
+  const [isPlaying, setIsPlaying] = useState(false);
   const [videoProgress, setVideoProgress] = useState(0);
   const videoEl = useRef(null);
 
@@ -72,6 +72,8 @@ const Promo = ({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const whiteButtonDebug = true; // to-do: suss out how this relates in context
+
   return (
     <Container backgroundColor={backgroundColor} position={position}>
       {(hasImage && !hasVideo) && (
@@ -103,6 +105,7 @@ const Promo = ({
           videoProgress={videoProgress}
           togglePlay={togglePlay}
           isPlaying={isPlaying}
+          whiteButton={whiteButtonDebug}
         />
       </Media>
       )}

src/components/Molecules/Promo/PromoVideoButton.js

@@ -1,33 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ProgressCircle from './ProgressRing';
+import ProgressRing from './ProgressRing';
 import { PlayButtonWrapper, PlayButton, Icon } from './PromoVideoButton.style';
 
 const PromoVideoButton = ({
-  videoProgress, copyLeft, togglePlay, isPlaying
+  videoProgress, togglePlay, ...rest
 }) => (
   <PlayButtonWrapper>
     <PlayButton
-      copyLeft={copyLeft}
       onClick={() => { togglePlay(); }}
-      isPlaying={isPlaying}
+      {...rest}
     >
-      <Icon isPlaying={isPlaying} />
-      <ProgressCircle
-        thisStroke={4}
-        thisRadius={25}
+      <Icon {...rest} />
+      <ProgressRing
         videoProgress={videoProgress}
-        isPlaying={isPlaying}
+        {...rest}
       />
     </PlayButton>
   </PlayButtonWrapper>
 );
 
 PromoVideoButton.propTypes = {
-  copyLeft: PropTypes.bool.isRequired,
   videoProgress: PropTypes.number.isRequired,
-  togglePlay: PropTypes.func.isRequired,
-  isPlaying: PropTypes.bool.isRequired
+  togglePlay: PropTypes.func.isRequired
 };
 
 export default PromoVideoButton;

src/components/Molecules/Promo/PromoVideoButton.style.js

@@ -6,10 +6,10 @@ const PlayButton = styled.button`
   // visibility: hidden; // debug
   // opacity: 0; // debug
   transition: opacity 0.2s, visibility 0.2s;
+
   width: 50px;
   height: 50px;
   background: none;
-  display: flex;
   position: absolute;
   top: 10px;
   right: 10px;
@@ -19,8 +19,13 @@ const PlayButton = styled.button`
   border: 0;
   padding: 0;
   margin: 0;
+  border-radius: 50%;
+  background: black;
+
+  ${({ whiteButton }) => whiteButton && css`
+    background: ${({ theme }) => theme.color('white')};
+  `}
 
-  // Re-align button accordingly
   ${({ copyLeft }) => !copyLeft && css`
     right: auto;
     left: 10px;
@@ -46,10 +51,11 @@ const ProgressRingWrapper = styled.span`
     position: absolute;
     width: 100%;
     height: 100%;
+    display: flex;
 `;
 
 const ProgressRingSVG = styled.svg`
-//
+ //
 `;
 
 const ProgressRingCircle = styled.circle`
@@ -61,6 +67,10 @@ const ProgressRingCircle = styled.circle`
     stroke: white; // need to changed based on Promo settings
     fill: transparent;
 
+    ${({ whiteButton }) => whiteButton && css`
+      stroke: ${({ theme }) => theme.color('black')};
+    `}
+
     ${({ isPlaying }) => !isPlaying && css`
       // transition: stroke-dashoffset 0.1s;
   `}
@@ -69,12 +79,16 @@ const ProgressRingCircle = styled.circle`
 const Icon = styled.span`
   height: 40px;
   width: 40px;
-  background-color: white; // need to changed based on Promo settings
   -webkit-mask-image: url(${playIcon});
   mask-image: url(${playIcon});
   mask-repeat: no-repeat;
   mask-position: center;
   mask-size: 25px;
+  background-color: white; // need to changed based on Promo settings
+  
+  ${({ whiteButton }) => whiteButton && css`
+    background-color: ${({ theme }) => theme.color('black')};
+  `}
 
   ${({ isPlaying }) => isPlaying && css`
     -webkit-mask-image: url(${pauseIcon});