From 11073ef6051d128aa9fe608e2674ee3cbd9f267a Mon Sep 17 00:00:00 2001
From: manubo <manuel@bouza.ch>
Date: Wed, 25 Sep 2019 15:53:54 +0200
Subject: [PATCH] =?UTF-8?q?Define=20colors=20as=20sass=20variables?=
 =?UTF-8?q?=E2=8E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/css/_button.scss               |  8 ++++----
 src/css/_form.scss                 | 20 +++++++++++---------
 src/css/_variables.scss            |  4 ++++
 src/css/content.scss               |  4 ++++
 src/css/options.scss               |  4 ++--
 src/css/popup.scss                 | 10 +++++++---
 src/js/components/App/TimerView.js |  3 ++-
 src/js/components/Bubble.js        |  3 ++-
 src/js/components/Select.js        |  2 +-
 9 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/src/css/_button.scss b/src/css/_button.scss
index 33ec648..f2bab7f 100644
--- a/src/css/_button.scss
+++ b/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 {
diff --git a/src/css/_form.scss b/src/css/_form.scss
index 233df13..71794a7 100644
--- a/src/css/_form.scss
+++ b/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;
   }
 }
-
diff --git a/src/css/_variables.scss b/src/css/_variables.scss
index d5b7a37..5584b29 100644
--- a/src/css/_variables.scss
+++ b/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;
diff --git a/src/css/content.scss b/src/css/content.scss
index aad519e..19b0a8f 100644
--- a/src/css/content.scss
+++ b/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;
diff --git a/src/css/options.scss b/src/css/options.scss
index 465fde3..8b42215 100644
--- a/src/css/options.scss
+++ b/src/css/options.scss
@@ -32,11 +32,11 @@
     }
 
     .text-success {
-      color: #7DC332;
+      color: $green;
     }
 
     .text-danger {
-      color: #FB3A2F;
+      color: $red;
     }
   }
 }
diff --git a/src/css/popup.scss b/src/css/popup.scss
index ccb5622..9bab894 100644
--- a/src/css/popup.scss
+++ b/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;
               }
             }
           }
diff --git a/src/js/components/App/TimerView.js b/src/js/components/App/TimerView.js
index 0fbff41..810a083 100644
--- a/src/js/components/App/TimerView.js
+++ b/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
diff --git a/src/js/components/Bubble.js b/src/js/components/Bubble.js
index 3a428a2..9c611b2 100644
--- a/src/js/components/Bubble.js
+++ b/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>
diff --git a/src/js/components/Select.js b/src/js/components/Select.js
index 4e659e5..8486ce5 100644
--- a/src/js/components/Select.js
+++ b/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,