Merge pull request #38 from concord-consortium/188162647-orbit-button

Implement Orbit button style
concord-consortium · Aug 27, 2024 · a4686be · a4686be
2 parents 13d26cb + e8b69c3
commit a4686be
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 8 deletions.
diff --git a/src/grasp-seasons/components/seasons.scss b/src/grasp-seasons/components/seasons.scss
@@ -1,3 +1,5 @@
+@import "../../components/vars.scss";
+
 .grasp-seasons {
   font-size: 12px;
   color: #222;
@@ -226,4 +228,29 @@
       margin-left:6px;
     }
   }
+
+  .orbit-button-bg {
+    background-color: #fff;
+    border-radius: 3px;
+    margin-right: 10px;
+  }
+
+  .orbit-button {
+    @include rect-button;
+    & {
+      width: 80px;
+      background-color: white;
+      padding-left: 33px;
+    }
+    &:hover {
+      background-color: $teal-light-25;
+    }
+    &:active {
+      background-color: $teal-light-50;
+    }
+    svg {
+      position: absolute;
+      left: 7px;
+    }
+  }
 }
diff --git a/src/grasp-seasons/components/seasons.tsx b/src/grasp-seasons/components/seasons.tsx
@@ -15,6 +15,8 @@ import { ILocation } from "../../types";
 
 import ForwardBackIcon from "../../assets/images/forward-back-icon.svg";
 import ForwardBackJumpIcon from "../../assets/images/forward-back-jump-icon.svg";
+import PlayIcon from "../../assets/images/play-icon.svg";
+import PauseIcon from "../../assets/images/pause-icon.svg";
 
 import "./seasons.scss";
 
@@ -269,13 +271,16 @@ const Seasons: React.FC<IProps> = ({ lang = "en_us", initialState = {}, log = (a
             />
           </div>
           <div className="playback-controls">
-            <button
-              className="btn btn-default animation-btn"
-              name={playStopLabel}
-              onClick={toggleMainAnimation}
-            >
-              { playStopLabel }
-            </button>
+            <div className="orbit-button-bg">
+              <button
+                className="orbit-button"
+                name={playStopLabel}
+                onClick={toggleMainAnimation}
+              >
+                { mainAnimationStarted ? <PauseIcon /> : <PlayIcon /> }
+                { playStopLabel }
+              </button>
+            </div>
             <label>
               <input
                 type="checkbox"

diff --git a/src/grasp-seasons/translation/en-us.ts b/src/grasp-seasons/translation/en-us.ts
@@ -38,7 +38,7 @@ export default {
   "~GROUND": "Ground",
   "~SPACE": "Space",
   "~NOTHING": "Nothing",
-  "~STOP": "Stop",
+  "~STOP": "Pause",
   "~DIR_NORTH": "N",
   "~DIR_SOUTH": "S",
   "~DIR_EAST": "E",