From d1b351b549c02b54315e2daca2c04a9840901990 Mon Sep 17 00:00:00 2001
From: Kian Badie <kianbadie@gmail.com>
Date: Tue, 29 Oct 2019 09:54:59 -0700
Subject: [PATCH 1/9] Add status indicator to cards

---
 _includes/current-projects.html |  7 +++++++
 _sass/components/_projects.scss | 35 +++++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+)

diff --git a/_includes/current-projects.html b/_includes/current-projects.html
index 24c663af89..53971b7308 100644
--- a/_includes/current-projects.html
+++ b/_includes/current-projects.html
@@ -7,6 +7,13 @@ <h2 class="project-header">Current Projects</h2>
             <li class="project-card">
               <div class="project-card-inner">
                 <div class="project-tmb">
+                  <!-- Status indicator -->
+                  {% assign status = 'Launched' %}
+                  <!-- <div class='status-indicator {{ "status-" | append: status }}'> -->
+                  <div class='status-indicator'>
+                    <h5 class='status-text'>{{ status }}</h5>
+                  </div>
+                  <!-- Status indicator -->
                   <img src={{ item.image | absolute_url }} class="project-tmb-img" alt={{item.alt}}/>
                 </div>
                 <div class="project-body">
diff --git a/_sass/components/_projects.scss b/_sass/components/_projects.scss
index c51a505a08..9dbd8c3796 100644
--- a/_sass/components/_projects.scss
+++ b/_sass/components/_projects.scss
@@ -68,3 +68,38 @@
     margin: 0 0 0 12px;
   }
 }
+
+// Status Indicator Styling
+.project-tmb {
+  position: relative;
+}
+
+.status-indicator {
+  position: absolute;
+  right: 0;
+  // background-color: rgb(255, 255, 121);
+  background-color: rgb(160, 216, 160);
+  //padding: 2px;
+  padding: 2px 7px;
+  margin: 5px 5px 0px 0px;
+  border: 0 solid rgba($color-black, 0.06);
+  border-radius: 9px;
+  box-shadow: 0 0 8px 0 rgba($color-black, 0.2);
+}
+
+.status-text {
+  margin: 0px 0px;
+  color: $color-white;
+}
+
+.status-Active {
+  background-color: rgb(160, 216, 160);
+}
+
+.status-Rebooting {
+  background-color: rgb(156, 167, 199);
+}
+
+.status-Launched {
+  background-color: rgb(250, 17, 79);
+}
\ No newline at end of file

From 5f00ca937fe0ce129461e9f345508a690fa3e0b6 Mon Sep 17 00:00:00 2001
From: kianbadie <kianbadie@gmail.com>
Date: Tue, 29 Oct 2019 15:32:43 -0700
Subject: [PATCH 2/9] Move indicator to card body. Left old indicator in card
 picture commented out. Old styling is commented out as well.

---
 _includes/current-projects.html | 15 ++++++++++++---
 _sass/components/_projects.scss | 14 ++++++--------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/_includes/current-projects.html b/_includes/current-projects.html
index 53971b7308..104d8b4800 100644
--- a/_includes/current-projects.html
+++ b/_includes/current-projects.html
@@ -7,16 +7,25 @@ <h2 class="project-header">Current Projects</h2>
             <li class="project-card">
               <div class="project-card-inner">
                 <div class="project-tmb">
+                  {% comment %}
                   <!-- Status indicator -->
-                  {% assign status = 'Launched' %}
-                  <!-- <div class='status-indicator {{ "status-" | append: status }}'> -->
-                  <div class='status-indicator'>
+                  {% assign status = 'On Hold' %}
+                  <div class='status-indicator {{ "status-" | append: status }}'>
                     <h5 class='status-text'>{{ status }}</h5>
                   </div>
                   <!-- Status indicator -->
+                  {% endcomment %}
                   <img src={{ item.image | absolute_url }} class="project-tmb-img" alt={{item.alt}}/>
                 </div>
                 <div class="project-body">
+
+                  <!-- Status indicator -->
+                  {% assign status = 'On Hold' %}
+                  <div class='status-indicator {{ "status-" | append: status }}'>
+                    <h5 class='status-text'>{{ status }}</h5>
+                  </div>
+                  <!-- Status indicator -->
+
                   <h4 class="project-title">{{ item.title }}</h4>
                   <p class="project-description">{{ item.description }}</p>
                   {%- if item.links -%}
diff --git a/_sass/components/_projects.scss b/_sass/components/_projects.scss
index 9dbd8c3796..7d926d9606 100644
--- a/_sass/components/_projects.scss
+++ b/_sass/components/_projects.scss
@@ -75,21 +75,19 @@
 }
 
 .status-indicator {
-  position: absolute;
-  right: 0;
-  // background-color: rgb(255, 255, 121);
-  background-color: rgb(160, 216, 160);
-  //padding: 2px;
+  //position: absolute;
+  //right: 0;
+  float: right;
+  background-color: rgb(255, 255, 121);
   padding: 2px 7px;
-  margin: 5px 5px 0px 0px;
+  //margin: 0px 6px 0px 0px;
   border: 0 solid rgba($color-black, 0.06);
   border-radius: 9px;
-  box-shadow: 0 0 8px 0 rgba($color-black, 0.2);
+  box-shadow: 0 0 8px 0 rgba($color-black, 0.1);
 }
 
 .status-text {
   margin: 0px 0px;
-  color: $color-white;
 }
 
 .status-Active {

From d34cd344da94d3cfead1dc38cc70e5039d8482c1 Mon Sep 17 00:00:00 2001
From: kianbadie <kianbadie@gmail.com>
Date: Thu, 31 Oct 2019 08:25:48 -0700
Subject: [PATCH 3/9] Make status indicator accurate to status in card. Change
 "Launched" status to "Completed"

---
 _includes/current-projects.html | 2 +-
 _sass/components/_projects.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/_includes/current-projects.html b/_includes/current-projects.html
index 104d8b4800..00e14376fd 100644
--- a/_includes/current-projects.html
+++ b/_includes/current-projects.html
@@ -20,7 +20,7 @@ <h5 class='status-text'>{{ status }}</h5>
                 <div class="project-body">
 
                   <!-- Status indicator -->
-                  {% assign status = 'On Hold' %}
+                  {% assign status = item.status %}
                   <div class='status-indicator {{ "status-" | append: status }}'>
                     <h5 class='status-text'>{{ status }}</h5>
                   </div>
diff --git a/_sass/components/_projects.scss b/_sass/components/_projects.scss
index 7d926d9606..b835a00c4e 100644
--- a/_sass/components/_projects.scss
+++ b/_sass/components/_projects.scss
@@ -98,6 +98,6 @@
   background-color: rgb(156, 167, 199);
 }
 
-.status-Launched {
+.status-Completed {
   background-color: rgb(250, 17, 79);
 }
\ No newline at end of file

From 70ca22a72063ea678b2de84f150fd89af398ec8e Mon Sep 17 00:00:00 2001
From: kianbadie <kianbadie@gmail.com>
Date: Thu, 31 Oct 2019 08:27:13 -0700
Subject: [PATCH 4/9] Get rid of commented out code.

---
 _includes/current-projects.html | 8 --------
 _sass/components/_projects.scss | 3 ---
 2 files changed, 11 deletions(-)

diff --git a/_includes/current-projects.html b/_includes/current-projects.html
index 00e14376fd..e14ad1ca15 100644
--- a/_includes/current-projects.html
+++ b/_includes/current-projects.html
@@ -7,14 +7,6 @@ <h2 class="project-header">Current Projects</h2>
             <li class="project-card">
               <div class="project-card-inner">
                 <div class="project-tmb">
-                  {% comment %}
-                  <!-- Status indicator -->
-                  {% assign status = 'On Hold' %}
-                  <div class='status-indicator {{ "status-" | append: status }}'>
-                    <h5 class='status-text'>{{ status }}</h5>
-                  </div>
-                  <!-- Status indicator -->
-                  {% endcomment %}
                   <img src={{ item.image | absolute_url }} class="project-tmb-img" alt={{item.alt}}/>
                 </div>
                 <div class="project-body">
diff --git a/_sass/components/_projects.scss b/_sass/components/_projects.scss
index b835a00c4e..c01f6bbb38 100644
--- a/_sass/components/_projects.scss
+++ b/_sass/components/_projects.scss
@@ -75,12 +75,9 @@
 }
 
 .status-indicator {
-  //position: absolute;
-  //right: 0;
   float: right;
   background-color: rgb(255, 255, 121);
   padding: 2px 7px;
-  //margin: 0px 6px 0px 0px;
   border: 0 solid rgba($color-black, 0.06);
   border-radius: 9px;
   box-shadow: 0 0 8px 0 rgba($color-black, 0.1);

From 559d824016e43a1c37e7d35853857b0455d0449d Mon Sep 17 00:00:00 2001
From: kianbadie <kianbadie@gmail.com>
Date: Thu, 31 Oct 2019 10:58:49 -0700
Subject: [PATCH 5/9] Change colors of indicator

---
 _sass/components/_projects.scss | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/_sass/components/_projects.scss b/_sass/components/_projects.scss
index c01f6bbb38..c759067087 100644
--- a/_sass/components/_projects.scss
+++ b/_sass/components/_projects.scss
@@ -76,11 +76,10 @@
 
 .status-indicator {
   float: right;
-  background-color: rgb(255, 255, 121);
+  //background-color: rgb(255, 255, 121);
+  background-color: rgb(247, 231, 174);
   padding: 2px 7px;
-  border: 0 solid rgba($color-black, 0.06);
-  border-radius: 9px;
-  box-shadow: 0 0 8px 0 rgba($color-black, 0.1);
+  border-radius: 8px;
 }
 
 .status-text {
@@ -88,13 +87,16 @@
 }
 
 .status-Active {
-  background-color: rgb(160, 216, 160);
+  //background-color: rgb(160, 216, 160);
+  background-color: rgb(198, 226, 198);
 }
 
 .status-Rebooting {
-  background-color: rgb(156, 167, 199);
+  //background-color: rgb(156, 167, 199);
+  background-color: rgb(174, 212, 239);
 }
 
 .status-Completed {
-  background-color: rgb(250, 17, 79);
+  //background-color: rgb(250, 17, 79);
+  background-color: rgb(243, 151, 175);
 }
\ No newline at end of file

From 576e11306b564699aa4cdee8625bf5c8d87c304a Mon Sep 17 00:00:00 2001
From: Kian Badie <kianbadie@gmail.com>
Date: Sat, 2 Nov 2019 14:40:28 -0700
Subject: [PATCH 6/9] Make indicator size more consistent and colors softer.

---
 _sass/components/_projects.scss | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/_sass/components/_projects.scss b/_sass/components/_projects.scss
index c759067087..88fbcd000b 100644
--- a/_sass/components/_projects.scss
+++ b/_sass/components/_projects.scss
@@ -76,10 +76,11 @@
 
 .status-indicator {
   float: right;
-  //background-color: rgb(255, 255, 121);
-  background-color: rgb(247, 231, 174);
+  text-align: center;
+  background-color: rgb(255, 255, 151);
+  width: 82px;
   padding: 2px 7px;
-  border-radius: 8px;
+  border-radius: 6px;
 }
 
 .status-text {
@@ -87,16 +88,13 @@
 }
 
 .status-Active {
-  //background-color: rgb(160, 216, 160);
-  background-color: rgb(198, 226, 198);
+  background-color: rgb(187, 255, 187);
 }
 
 .status-Rebooting {
-  //background-color: rgb(156, 167, 199);
-  background-color: rgb(174, 212, 239);
+  background-color: rgb(164, 213, 255);
 }
 
 .status-Completed {
-  //background-color: rgb(250, 17, 79);
-  background-color: rgb(243, 151, 175);
+  background-color: rgb(255, 122, 122);
 }
\ No newline at end of file

From f6b1a95d7d192fb18590c82a145f721b64c5bcbf Mon Sep 17 00:00:00 2001
From: Kian Badie <kianbadie@gmail.com>
Date: Sat, 2 Nov 2019 14:43:05 -0700
Subject: [PATCH 7/9] Add margin-left to indicator to push project title away.

---
 _sass/components/_projects.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/_sass/components/_projects.scss b/_sass/components/_projects.scss
index 88fbcd000b..340147c604 100644
--- a/_sass/components/_projects.scss
+++ b/_sass/components/_projects.scss
@@ -77,6 +77,7 @@
 .status-indicator {
   float: right;
   text-align: center;
+  margin-left: 10px;
   background-color: rgb(255, 255, 151);
   width: 82px;
   padding: 2px 7px;

From 07369f87ddd0452486d4d207d10b0749c26333dd Mon Sep 17 00:00:00 2001
From: kianbadie <kianbadie@gmail.com>
Date: Sun, 10 Nov 2019 16:15:16 -0800
Subject: [PATCH 8/9] Change completed background of indicator to increase
 contrast ratio. Remove commenting, whitespace, and variable "status" and
 replace variable by using item.status

---
 _includes/current-projects.html | 9 ++-------
 _sass/components/_projects.scss | 2 +-
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/_includes/current-projects.html b/_includes/current-projects.html
index e14ad1ca15..c21f2d146c 100644
--- a/_includes/current-projects.html
+++ b/_includes/current-projects.html
@@ -10,14 +10,9 @@ <h2 class="project-header">Current Projects</h2>
                   <img src={{ item.image | absolute_url }} class="project-tmb-img" alt={{item.alt}}/>
                 </div>
                 <div class="project-body">
-
-                  <!-- Status indicator -->
-                  {% assign status = item.status %}
-                  <div class='status-indicator {{ "status-" | append: status }}'>
-                    <h5 class='status-text'>{{ status }}</h5>
+                  <div class='status-indicator {{ "status-" | append: item.status }}'>
+                    <h5 class='status-text'>{{ item.status }}</h5>
                   </div>
-                  <!-- Status indicator -->
-
                   <h4 class="project-title">{{ item.title }}</h4>
                   <p class="project-description">{{ item.description }}</p>
                   {%- if item.links -%}
diff --git a/_sass/components/_projects.scss b/_sass/components/_projects.scss
index 340147c604..7e44948bda 100644
--- a/_sass/components/_projects.scss
+++ b/_sass/components/_projects.scss
@@ -97,5 +97,5 @@
 }
 
 .status-Completed {
-  background-color: rgb(255, 122, 122);
+  background-color: rgb(255, 173, 173);
 }
\ No newline at end of file

From 486b69650ffeeca57862b725377c34dcbaeb9f10 Mon Sep 17 00:00:00 2001
From: kianbadie <kianbadie@gmail.com>
Date: Fri, 15 Nov 2019 19:51:15 -0800
Subject: [PATCH 9/9] Add box shadow to indicator to increase readability a
 little bit.

---
 _sass/components/_projects.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_sass/components/_projects.scss b/_sass/components/_projects.scss
index 7e44948bda..8fc6fb7040 100644
--- a/_sass/components/_projects.scss
+++ b/_sass/components/_projects.scss
@@ -69,7 +69,6 @@
   }
 }
 
-// Status Indicator Styling
 .project-tmb {
   position: relative;
 }
@@ -82,6 +81,7 @@
   width: 82px;
   padding: 2px 7px;
   border-radius: 6px;
+  box-shadow: 0 0 8px 0 rgba($color-black, 0.1);
 }
 
 .status-text {