From 40b6b6817829e9566d1d079c8e34ddc03095998f Mon Sep 17 00:00:00 2001
From: Tom <20648924+moT01@users.noreply.github.com>
Date: Fri, 6 Sep 2019 04:26:08 -0500
Subject: [PATCH] fix(style): rework color scheme for icons (#36760)

* fix(style): rework color scheme for icons

* fix: update snapshot

* fix(style): add some space in and around test area

* fix(style): lessen padding
---
 client/src/assets/icons/Caret.js                     |  6 +++++-
 client/src/assets/icons/Fail.js                      | 12 ++++++------
 client/src/assets/icons/GreenNotCompleted.js         |  6 +++---
 client/src/assets/icons/GreenPass.js                 | 12 ++++++------
 client/src/assets/icons/Initial.js                   |  6 +++---
 .../__snapshots__/ChallengeTitle.test.js.snap        | 12 ++++++------
 .../templates/Challenges/components/test-suite.css   | 12 +++++++-----
 7 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/client/src/assets/icons/Caret.js b/client/src/assets/icons/Caret.js
index c2c9d2dbfa..62e07f4361 100644
--- a/client/src/assets/icons/Caret.js
+++ b/client/src/assets/icons/Caret.js
@@ -5,7 +5,11 @@ function Caret() {
     <svg viewBox='0 0 100 100' width='25px'>
       <polygon
         points='-6.04047,17.1511 81.8903,58.1985 -3.90024,104.196'
-        style={{ stroke: '#858591', fill: '#858591', strokeWidth: '1px' }}
+        style={{
+          stroke: 'var(--primary-color)',
+          fill: 'var(--primary-color)',
+          strokeWidth: '1px'
+        }}
         transform={
           'matrix(0.999729, 0.023281, -0.023281, 0.999729, 7.39321, -10.0425)'
         }
diff --git a/client/src/assets/icons/Fail.js b/client/src/assets/icons/Fail.js
index 6c67ffad26..8574387899 100644
--- a/client/src/assets/icons/Fail.js
+++ b/client/src/assets/icons/Fail.js
@@ -13,17 +13,17 @@ function RedFail() {
         <circle
           cx='100'
           cy='99'
-          fill='#858591'
+          fill='var(--primary-color)'
           r='95'
-          stroke='#858591'
+          stroke='(var--primary-color)'
           strokeDasharray='null'
           strokeLinecap='null'
           strokeLinejoin='null'
         />
         <rect
-          fill='#ffffff'
+          fill='var(--primary-background)'
           height='30'
-          stroke='#ffffff'
+          stroke='var(--primary-background)'
           strokeDasharray='null'
           strokeLinecap='null'
           strokeLinejoin='null'
@@ -33,9 +33,9 @@ function RedFail() {
           y='88'
         />
         <rect
-          fill='#ffffff'
+          fill='var(--primary-background)'
           height='30'
-          stroke='#ffffff'
+          stroke='var(--primary-background)'
           strokeDasharray='null'
           strokeLinecap='null'
           strokeLinejoin='null'
diff --git a/client/src/assets/icons/GreenNotCompleted.js b/client/src/assets/icons/GreenNotCompleted.js
index 0dfb0faae0..449d775b4b 100644
--- a/client/src/assets/icons/GreenNotCompleted.js
+++ b/client/src/assets/icons/GreenNotCompleted.js
@@ -18,13 +18,13 @@ function GreenNotCompleted(props) {
           <circle
             cx='100'
             cy='99'
-            fill='#FFFFFF'
+            fill='var(--primary-background)'
             r='95'
-            stroke='#858591'
+            stroke='var(--primary-color)'
             strokeDasharray='null'
             strokeLinecap='null'
             strokeLinejoin='null'
-            strokeWidth='5'
+            strokeWidth='10'
           />
         </g>
       </svg>
diff --git a/client/src/assets/icons/GreenPass.js b/client/src/assets/icons/GreenPass.js
index 71d149fc6c..cf21211570 100644
--- a/client/src/assets/icons/GreenPass.js
+++ b/client/src/assets/icons/GreenPass.js
@@ -16,17 +16,17 @@ function GreenPass(props) {
           <circle
             cx='100'
             cy='99'
-            fill='#858591'
+            fill='var(--primary-color)'
             r='95'
-            stroke='#858591'
+            stroke='var(--primary-color)'
             strokeDasharray='null'
             strokeLinecap='null'
             strokeLinejoin='null'
           />
           <rect
-            fill='#ffffff'
+            fill='var(--primary-background)'
             height='30'
-            stroke='#ffffff'
+            stroke='var(--primary-background)'
             strokeDasharray='null'
             strokeLinecap='null'
             strokeLinejoin='null'
@@ -36,9 +36,9 @@ function GreenPass(props) {
             y='91.32089'
           />
           <rect
-            fill='#ffffff'
+            fill='var(--primary-background)'
             height='30'
-            stroke='#ffffff'
+            stroke='var(--primary-background)'
             strokeDasharray='null'
             strokeLinecap='null'
             strokeLinejoin='null'
diff --git a/client/src/assets/icons/Initial.js b/client/src/assets/icons/Initial.js
index eaab9c15f6..e4741203a8 100644
--- a/client/src/assets/icons/Initial.js
+++ b/client/src/assets/icons/Initial.js
@@ -14,9 +14,9 @@ function Initial(props) {
         <circle
           cx='100'
           cy='99'
-          fill='#858591'
+          fill='var(--primary-color)'
           r='95'
-          stroke='#858591'
+          stroke='var(--primary-color)'
           strokeDasharray='null'
           strokeLinecap='null'
           strokeLinejoin='null'
@@ -42,7 +42,7 @@ function Initial(props) {
               '447 1-1zm3 3c0-.552-.448-1-1-1s-1 .448-1 1 .448 1 1 1 1-.448 ' +
               '1-1z'
             }
-            fill='#fff'
+            fill='var(--primary-background)'
           />
         </svg>
       </g>
diff --git a/client/src/templates/Challenges/components/__snapshots__/ChallengeTitle.test.js.snap b/client/src/templates/Challenges/components/__snapshots__/ChallengeTitle.test.js.snap
index 8f0d75b18d..f1cac3adfb 100644
--- a/client/src/templates/Challenges/components/__snapshots__/ChallengeTitle.test.js.snap
+++ b/client/src/templates/Challenges/components/__snapshots__/ChallengeTitle.test.js.snap
@@ -40,17 +40,17 @@ exports[`<ChallengeTitle/> renders correctly 1`] = `
         <circle
           cx="100"
           cy="99"
-          fill="#858591"
+          fill="var(--primary-color)"
           r="95"
-          stroke="#858591"
+          stroke="var(--primary-color)"
           strokeDasharray="null"
           strokeLinecap="null"
           strokeLinejoin="null"
         />
         <rect
-          fill="#ffffff"
+          fill="var(--primary-background)"
           height="30"
-          stroke="#ffffff"
+          stroke="var(--primary-background)"
           strokeDasharray="null"
           strokeLinecap="null"
           strokeLinejoin="null"
@@ -60,9 +60,9 @@ exports[`<ChallengeTitle/> renders correctly 1`] = `
           y="91.32089"
         />
         <rect
-          fill="#ffffff"
+          fill="var(--primary-background)"
           height="30"
-          stroke="#ffffff"
+          stroke="var(--primary-background)"
           strokeDasharray="null"
           strokeLinecap="null"
           strokeLinejoin="null"
diff --git a/client/src/templates/Challenges/components/test-suite.css b/client/src/templates/Challenges/components/test-suite.css
index 73a32608ce..c75947094e 100644
--- a/client/src/templates/Challenges/components/test-suite.css
+++ b/client/src/templates/Challenges/components/test-suite.css
@@ -2,7 +2,7 @@
   display: flex;
   justify-content: flex-start;
   flex-direction: column;
-  margin-top: 15px;
+  margin: 15px 0;
 }
 
 .test-result {
@@ -16,16 +16,18 @@
 }
 
 .test-output {
-  margin-left: 15px;
+  padding: 5px 10px;
 }
 
 .test-status-icon {
   display: flex;
   align-items: center;
-  margin-left: 3px;
+  justify-content: center;
+  min-width: 60px;
+  min-height: 60px;
 }
 
 .test-status-icon > svg {
-  width: 50px;
-  height: 50px;
+  width: 40px;
+  height: 40px;
 }