From 376bdf9d6d75b51d4e01c1eb024800cebbd8f46f Mon Sep 17 00:00:00 2001
From: Anand Chowdhary <mail@anandchowdhary.com>
Date: Tue, 24 Nov 2020 00:36:44 +0530
Subject: [PATCH] :lipstick: Add UI for degraded

---
 src/components/ActiveIncidents.svelte |  5 ++++-
 src/components/History.svelte         |  2 +-
 src/components/Incidents.svelte       |  2 +-
 static/global.css                     | 10 ++++++++--
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/ActiveIncidents.svelte b/src/components/ActiveIncidents.svelte
index e844f7c..4d2b662 100644
--- a/src/components/ActiveIncidents.svelte
+++ b/src/components/ActiveIncidents.svelte
@@ -44,6 +44,9 @@
   article {
     background-color: #ffdce3;
   }
+  article.degraded {
+    background-color: #ffdfad;
+  }
   article.good {
     background-color: #dcffeb;
     color: #003300;
@@ -60,7 +63,7 @@
   {:else if incidents.length}
     <h2>{config.i18n.activeIncidents}</h2>
     {#each incidents as incident}
-      <article class="down link">
+      <article class="down link {incident.title.includes('degraded') ? 'degraded' : ''}">
         <div class="f">
           <div>
             <h4>{incident.title.replace('🛑', '').replace('⚠️', '').trim()}</h4>
diff --git a/src/components/History.svelte b/src/components/History.svelte
index ce25aad..596c346 100644
--- a/src/components/History.svelte
+++ b/src/components/History.svelte
@@ -53,7 +53,7 @@
       {#if incident.showHeading}
         <h3>{new Date(incident.created_at).toLocaleDateString()}</h3>
       {/if}
-      <article class="down link">
+      <article class="down link {incident.title.includes('degraded') ? 'degraded' : ''}">
         <div class="f">
           <div>
             <h4>{incident.title.replace('🛑', '').replace('⚠️', '').trim()}</h4>
diff --git a/src/components/Incidents.svelte b/src/components/Incidents.svelte
index 67e1d26..8ac1c39 100644
--- a/src/components/Incidents.svelte
+++ b/src/components/Incidents.svelte
@@ -52,7 +52,7 @@
       {#if incident.showHeading}
         <h3>{new Date(incident.created_at).toLocaleDateString()}</h3>
       {/if}
-      <article class="down link">
+      <article class="down link {incident.title.includes('degraded') ? 'degraded' : ''}">
         <div class="f">
           <div>
             <h4>{incident.title.replace('🛑', '').replace('⚠️', '').trim()}</h4>
diff --git a/static/global.css b/static/global.css
index 32238c0..96bb6da 100644
--- a/static/global.css
+++ b/static/global.css
@@ -1,7 +1,7 @@
 body {
   margin: 0;
-  font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell,
+    Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   line-height: 1.5;
   padding-bottom: 2.5rem;
   color: #333;
@@ -79,6 +79,9 @@ h4 {
 article.down {
   border-left: 0.2rem solid #e74c3c;
 }
+article.degraded {
+  border-left: 0.2rem solid #f39c12 !important;
+}
 article.up {
   border-left: 0.2rem solid #2ecc71;
 }
@@ -102,6 +105,9 @@ section + h2 {
 .tag.down {
   background-color: #c0392b;
 }
+.tag.degraded {
+  background-color: #f39c12 !important;
+}
 .tag {
   display: inline-block;
   color: #fff;