Remove scale transition from green flag, stop and sound editor buttons

See #4382 for more info about why, and what we need to follow up on it

src/components/green-flag/green-flag.css

@@ -8,11 +8,10 @@
     user-select: none;
     user-drag: none;
     cursor: pointer;
-    transition: 0.2s ease-out;
 }
 
 .green-flag:hover {
-    transform: scale(1.2);
+    background-color: $motion-light-transparent;
 }
 
 .green-flag.is-active {

src/components/icon-button/icon-button.css

@@ -5,16 +5,11 @@
     flex-direction: column;
     align-items: center;
     cursor: pointer;
-    transition: 0.2s;
     font-size: 0.75rem;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     color: $motion-primary;
 }
 
-.container:hover {
-    transform: scale(1.1);
-}
-
 .container + .container {
     margin-top: 1.25rem;
 }

src/components/stop-all/stop-all.css

+@import "../../css/colors.css";
+
 .stop-all {
     width: 2rem;
     height: 2rem;
@@ -5,15 +7,14 @@
     border-radius: 0.25rem;
     user-select: none;
     cursor: pointer;
-    transition: 0.2s ease-out;
 }
 
-.stop-all {
-    opacity: 0.5;
+.stop-all:hover {
+    background-color: $motion-light-transparent;
 }
 
-.stop-all:hover {
-    transform: scale(1.2);
+.stop-all {
+    opacity: 0.5;
 }
 
 .stop-all.is-active {

src/css/colors.css

@@ -17,7 +17,7 @@ $text-primary-transparent: hsla(225, 15%, 40%, 0.75);
 $motion-primary: hsla(215, 100%, 65%, 1); /* #4C97FF */
 $motion-tertiary: hsla(215, 60%, 50%, 1); /* #3373CC */
 $motion-transparent: hsla(215, 100%, 65%, 0.35); /* 35% transparent version of motion-primary */
-$motion-light-transparent: hsla(215, 100%, 65%, 0.1); /* 10% transparent version of motion-primary */
+$motion-light-transparent: hsla(215, 100%, 65%, 0.15); /* 15% transparent version of motion-primary */
 
 $red-primary: hsla(20, 100%, 55%, 1); /* #FF661A */
 $red-tertiary: hsla(20, 100%, 45%, 1); /* #E64D00 */