Merge pull request #4316 from runningonsideprojects/run-stop-icon-refactor

Run and Stop Toolbar Button Color Refactor

Author: doradocodes

client/images/play.svg

@@ -36,12 +36,12 @@ const Toolbar = (props) => {
   const showVisibilityDropdown = project?.owner && userIsOwner;
 
   const playButtonClass = classNames({
-    'toolbar__play-button': true,
-    'toolbar__play-button--selected': isPlaying
+    'toolbar-start-stop-button play': true,
+    'toolbar-start-stop-button--selected play': isPlaying
   });
   const stopButtonClass = classNames({
-    'toolbar__stop-button': true,
-    'toolbar__stop-button--selected': !isPlaying
+    'toolbar-start-stop-button stop': true,
+    'toolbar-start-stop-button--selected stop': !isPlaying
   });
   const preferencesButtonClass = classNames({
     'toolbar__preferences-button': true,

client/images/stop.svg

@@ -181,7 +181,13 @@ $themes: (
     toast-background-color: $medium-dark,
     toast-text-color: $lightest,
     toolbar-button-background-color: $medium-light,
-    toolbar-button-color: $dark
+    toolbar-button-color: $dark,
+    toolbar-start-stop-button-background-color: #dbdbdb,
+    toolbar-start-stop-button-hover-background-color: #ed225e,
+    toolbar-start-stop-button-hover-outline-color: $p5js-pink,
+    toolbar-start-stop-button-outline-color: #dbdbdb,
+    toolbar-start-stop-icon-color: $p5-light-black,
+    toolbar-start-stop-active-icon-color: #ffffff
   ),
   dark: (
     activeline-background-color: $p5-dark-activeline,
@@ -299,7 +305,13 @@ $themes: (
     toast-background-color: $medium-light,
     toast-text-color: $dark,
     toolbar-button-background-color: $medium-dark,
-    toolbar-button-color: $lightest
+    toolbar-button-color: $lightest,
+    toolbar-start-stop-button-background-color: #dedede,
+    toolbar-start-stop-button-hover-background-color: #ed225e,
+    toolbar-start-stop-button-hover-outline-color: $p5js-pink,
+    toolbar-start-stop-button-outline-color: #dedede,
+    toolbar-start-stop-icon-color: $p5-light-black,
+    toolbar-start-stop-active-icon-color: #ffffff
   ),
   contrast: (
     activeline-background-color: $p5-contrast-activeline,
@@ -414,6 +426,12 @@ $themes: (
     toast-background-color: $medium-light,
     toast-text-color: $darker,
     toolbar-button-background-color: $medium-light,
-    toolbar-button-color: $dark
+    toolbar-button-color: $dark,
+    toolbar-start-stop-button-background-color: $darker,
+    toolbar-start-stop-button-hover-background-color: $p5-contrast-yellow,
+    toolbar-start-stop-button-hover-outline-color: $yellow,
+    toolbar-start-stop-button-outline-color: #ffffff,
+    toolbar-start-stop-icon-color: #ffffff,
+    toolbar-start-stop-active-icon-color: #000000
   )
 );