fix: APP-506 update play/pause button color (#2564)

regen-network · Dec 2, 2024 · dacdc85 · dacdc85
1 parent 16eed46
commit dacdc85
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/web-components/src/components/atoms/PlayPauseButton/PlayPauseButton.tsx b/web-components/src/components/atoms/PlayPauseButton/PlayPauseButton.tsx
@@ -22,9 +22,13 @@ export const PlayPauseButton = ({
     >
       <div className={cn(styles.button, className)}>
         {playing ? (
-          <PauseIcon width="100%" height="100%" />
+          <PauseIcon
+            width="100%"
+            height="100%"
+            className="text-ac-primary-500"
+          />
         ) : (
-          <PlayIcon width="50%" height="50%" />
+          <PlayIcon width="50%" height="50%" className="text-ac-primary-500" />
         )}
       </div>
     </button>

diff --git a/web-components/src/components/icons/PauseIcon.tsx b/web-components/src/components/icons/PauseIcon.tsx
@@ -14,7 +14,7 @@ export const PauseIcon = (props: React.SVGProps<SVGSVGElement>) => (
         fill-rule="evenodd"
         clip-rule="evenodd"
         d="M32 20H25V50H32V20ZM45 20H38V50H45V20Z"
-        fill="#4FB573"
+        fill="currentColor"
       />
     </g>
   </svg>

diff --git a/web-components/src/components/icons/PlayIcon.tsx b/web-components/src/components/icons/PlayIcon.tsx
@@ -30,7 +30,7 @@ export default function PlayIcon({
     <SvgIcon viewBox="0 0 9 9" className={cx(className, classes.root)}>
       <path
         d="M8.36279 4.18667C8.69613 4.37912 8.69613 4.86024 8.36279 5.05269L1.72899 8.88272C1.39566 9.07517 0.97899 8.83461 0.97899 8.44971L0.97899 0.789649C0.978991 0.404749 1.39566 0.164188 1.72899 0.356638L8.36279 4.18667Z"
-        fill="#4FB573"
+        fill="currentColor"
       />
     </SvgIcon>
   );

diff --git a/web-components/src/components/sliders/ProjectMedia.tsx b/web-components/src/components/sliders/ProjectMedia.tsx
@@ -286,7 +286,11 @@ export default function ProjectMedia({
           />
           {mediaAsset?.type === 'video' && (
             <div className={classes.play}>
-              <PlayIcon width="10.85px" height="10.85px" />
+              <PlayIcon
+                width="10.85px"
+                height="10.85px"
+                className="text-ac-primary-500"
+              />
             </div>
           )}
         </div>