Define colors as sass variables⎄

src/css/_button.scss

@@ -7,8 +7,8 @@ button.moco-bx-btn {
   white-space: nowrap;
   color: white;
   background-image: none;
-  background-color: #7dc332;
-  border-color: #7dc332;
+  background-color: $green;
+  border-color: $green;
   border-radius: 0;
   border-style: solid;
   box-shadow: none;
@@ -16,8 +16,8 @@ button.moco-bx-btn {
   cursor: pointer;
 
   &:hover:not(:disabled) {
-    background-color: #639a28;
-    border-color: #639a28;
+    background-color: $green-dark;
+    border-color: $green-dark;
   }
 
   &:disabled {

src/css/_form.scss

@@ -1,3 +1,4 @@
+@import "variables";
 @import "button";
 
 input {
@@ -15,7 +16,8 @@ input {
     margin-bottom: 0.25rem;
   }
 
-  input, textarea {
+  input,
+  textarea {
     padding: 6px 12px;
     background-color: white;
     border-color: #cccccc;
@@ -31,13 +33,14 @@ input {
   }
 
   &.has-error {
-    input, textarea {
-      border-color: #FB3A2F;
+    input,
+    textarea {
+      border-color: $red;
     }
   }
 
   .form-error {
-    color: #FB3A2F;
+    color: $red;
   }
 
   .input-group {
@@ -71,8 +74,8 @@ input[name="hours"] {
   outline: 0 !important;
 
   &:focus {
-    border: 1px solid #38b5eb;
-    box-shadow: 0 0 0 1px #38b5eb;
+    border: 1px solid $blue;
+    box-shadow: 0 0 0 1px $blue;
   }
 }
 
@@ -84,8 +87,7 @@ textarea[name="description"] {
   outline: 0 !important;
 
   &:focus {
-    border: 1px solid #38b5eb;
-    box-shadow: 0 0 0 1px #38b5eb;
+    border: 1px solid $blue;
+    box-shadow: 0 0 0 1px $blue;
   }
 }
-

src/css/_variables.scss

@@ -3,3 +3,7 @@ $font-color: #191919;
 $popup-width: 420px;
 $popup-height: 463px;
 
+$green: #7dc332;
+$green-dark: #639a28;
+$blue: #38b5eb;
+$red: #fb3a2f;

src/css/content.scss

@@ -6,6 +6,10 @@
   color: $font-color;
   pointer-events: all;
 
+  .text-red {
+    color: $red;
+  }
+
   .moco-bx-bubble {
     box-sizing: content-box;
     position: fixed;

src/css/options.scss

@@ -32,11 +32,11 @@
     }
 
     .text-success {
-      color: #7DC332;
+      color: $green;
     }
 
     .text-danger {
-      color: #FB3A2F;
+      color: $red;
     }
   }
 }

src/css/popup.scss

@@ -1,6 +1,6 @@
+@import "variables";
 @import "form";
 @import "spinner";
-@import "variables";
 
 html {
   overflow: hidden;
@@ -14,6 +14,10 @@ html {
     #moco-bx-root {
       min-width: 516px;
 
+      .text-red {
+        color: $red;
+      }
+
       .moco-bx-app-container {
         width: 324px;
         padding: 3rem 6rem;
@@ -69,7 +73,7 @@ html {
 
             &.moco-bx-calendar__day--filled {
               .moco-bx-calendar__hours {
-                background-color: #7dc332;
+                background-color: $green;
               }
             }
 
@@ -82,7 +86,7 @@ html {
 
             &.moco-bx-calendar__day--active {
               .moco-bx-calendar__hours {
-                background-color: #38b5eb;
+                background-color: $blue;
               }
             }
           }

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,