💄 Add UI for degraded

upptime · Nov 23, 2020 · 376bdf9 · 376bdf9
1 parent 29ceb73
commit 376bdf9
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;