Define colors as sass variables⎄

src/js/components/App/TimerView.js

@@ -17,9 +17,10 @@ export default function TimerView({ timedActivity, onStopTimer }) {
       <h3>{timedActivity.task_name}</h3>
       <br />
       <Timer
+        className="text-red"
         startedAt={parseISO(timedActivity.timer_started_at)}
         offset={timedActivity.seconds}
-        style={{ color: "red", fontSize: "60px", display: "inline-block" }}
+        style={{ fontSize: "60px", display: "inline-block" }}
       />
       <button className="moco-bx-btn btn-stop-timer" onClick={handleStopTimer}>
         Timer Stoppen

src/js/components/Bubble.js

@@ -16,9 +16,10 @@ const Bubble = ({ bookedSeconds, timedActivity }) => {
       )}
       {timedActivity && (
         <Timer
+          className="text-red"
           startedAt={parseISO(timedActivity.timer_started_at)}
           offset={timedActivity.seconds}
-          style={{ color: "red", marginBottom: "3px", fontSize: "12px" }}
+          style={{ marginBottom: "3px", fontSize: "12px" }}
         />
       )}
     </div>

src/js/components/Select.js

@@ -36,7 +36,7 @@ const customTheme = theme => ({
 const customStyles = props => ({
   control: (base, _state) => ({
     ...base,
-    borderColor: props.hasError ? "#FB3A2F" : base.borderColor,
+    borderColor: props.hasError ? "#fb3a2f" : base.borderColor,
   }),
   valueContainer: base => ({
     ...base,