From 7cd866de624c58a6c9d8df2fdf7c920c4084a748 Mon Sep 17 00:00:00 2001
From: carljbowman <bowman@media.mit.edu>
Date: Mon, 9 Jul 2018 16:49:16 -0400
Subject: [PATCH] =?UTF-8?q?Change=20=E2=80=9Cmini-card=E2=80=9DUI=20Color?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In addtion to changing the UI color for “mini cards” from motion blue to extensions aqua, this commit also updates the color variable previously known as ‘$pen-primary’ to ‘$extensions-primary’.
---
 src/components/action-menu/action-menu.css     |  6 +++---
 src/components/camera-modal/camera-modal.css   |  2 +-
 src/components/cards/card.css                  | 11 ++++++-----
 src/components/import-modal/import-modal.css   |  6 +++---
 src/components/preview-modal/preview-modal.css |  4 ++--
 src/css/colors.css                             |  4 +++-
 6 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/components/action-menu/action-menu.css b/src/components/action-menu/action-menu.css
index 6771a6851..8f39946c1 100644
--- a/src/components/action-menu/action-menu.css
+++ b/src/components/action-menu/action-menu.css
@@ -28,7 +28,7 @@ button::-moz-focus-inner {
 }
 
 .button:hover {
-    background: $pen-primary;
+    background: $extensions-primary;
 }
 
 .button:active {
@@ -126,7 +126,7 @@ button::-moz-focus-inner {
     is not very easy to style.
 */
 .tooltip {
-    background-color: $pen-primary !important;
+    background-color: $extensions-primary !important;
     opacity: 1 !important;
     border: 1px solid hsla(0, 0%, 0%, .1) !important;
     box-shadow: 0 0 .5rem hsla(0, 0%, 0%, .25) !important;
@@ -134,7 +134,7 @@ button::-moz-focus-inner {
 }
 
 .tooltip:after {
-    background-color: $pen-primary;
+    background-color: $extensions-primary;
 }
 
 .coming-soon-tooltip {
diff --git a/src/components/camera-modal/camera-modal.css b/src/components/camera-modal/camera-modal.css
index 5f631e41b..4ea962fba 100644
--- a/src/components/camera-modal/camera-modal.css
+++ b/src/components/camera-modal/camera-modal.css
@@ -93,7 +93,7 @@ $main-button-size: 2.75rem;
 }
 
 .main-button:hover {
-    background: $pen-primary;
+    background: $extensions-primary;
     box-shadow: 0 0 0 6px $motion-transparent;
 }
 
diff --git a/src/components/cards/card.css b/src/components/cards/card.css
index 99ab8a66c..782b1e6ea 100644
--- a/src/components/cards/card.css
+++ b/src/components/cards/card.css
@@ -41,7 +41,7 @@
     left: 0;
     height: 1.8rem;
     width: 100%;
-    background: $motion-primary;
+    background: $extensions-primary;
 }
 
 .left-button, .right-button {
@@ -51,14 +51,15 @@
     z-index: 20;
     user-select: none;
     cursor: pointer;
-    background: $motion-primary;
-    box-shadow: 0 0 0 4px $motion-transparent;
     height: 40px;
     width: 40px;
+    background: $extensions-primary;
+    box-shadow: 0 0 0 4px $extensions-transparent;
     border-radius: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
+    box-shadow: 0 0 0 6px $extensions-transparent;
 }
 
 .left-button {
@@ -88,9 +89,9 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    background: $motion-primary;
-    border-bottom: 1px solid $motion-tertiary;
     padding: 0.5rem;
+    background: $extensions-primary;
+    border-bottom: 1px solid $extensions-tertiary;
     font-size: 0.625rem;
 }
 
diff --git a/src/components/import-modal/import-modal.css b/src/components/import-modal/import-modal.css
index b41c02b1b..b265efae0 100644
--- a/src/components/import-modal/import-modal.css
+++ b/src/components/import-modal/import-modal.css
@@ -45,7 +45,7 @@ $sides: 20rem;
 
     box-sizing: border-box;
     width: 100%;
-    background-color: $pen-primary;
+    background-color: $extensions-primary;
 }
 
 .header-item {
@@ -129,12 +129,12 @@ $sides: 20rem;
     font-weight: bold;
     font-size: .875rem;
     cursor: pointer;
-    border: 0px solid $pen-primary;
+    border: 0px solid $extensions-primary;
     outline: none;
 }
 
 .input-row button.ok-button {
-    background: $pen-primary;
+    background: $extensions-primary;
     color: white;
 }
 
diff --git a/src/components/preview-modal/preview-modal.css b/src/components/preview-modal/preview-modal.css
index 2c35acf63..d6cf6dc45 100644
--- a/src/components/preview-modal/preview-modal.css
+++ b/src/components/preview-modal/preview-modal.css
@@ -69,8 +69,8 @@
 }
 
 .button-row button.view-project-button {
-    background: $pen-primary;
-    border-color: $pen-primary;
+    background: $extensions-primary;
+    border-color: $extensions-primary;
     color: white;
 }
 
diff --git a/src/css/colors.css b/src/css/colors.css
index 8dbc51ecd..39503771d 100644
--- a/src/css/colors.css
+++ b/src/css/colors.css
@@ -26,4 +26,6 @@ $control-primary: hsla(38, 100%, 55%, 1); /* #FFAB19 */
 
 $data-primary: hsla(30, 100%, 55%, 1); /* #FF8C1A */
 
-$pen-primary: hsla(163, 85%, 40%, 1); /* #0FBD8C */
+$extensions-primary: hsla(163, 85%, 40%, 1); /* #0FBD8C */
+$extensions-tertiary: hsla(163, 85%, 30%, 1); /* #0B8E69 */
+$extensions-transparent: hsla(163, 85%, 40%, 0.35); /* 35% transparent version of extensions-primary */
-- 
GitLab