Designer level polish

Git-Commit-Show · Jun 10, 2021 · 7bc3178 · 7bc3178
1 parent 359efe7
commit 7bc3178
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 27 deletions.
diff --git a/index.css b/index.css
@@ -115,10 +115,20 @@ footer a {
   margin: 96px auto;
 }
 
-.titleSeparator {
-  border: none;
-  border-top: 1px solid #eee;
-  margin-top: 30px;
+.headline {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.headline span {
+  background-color: #f5f6f8;
+  border-radius: 5px;
+  padding: 6px;
+  margin-left: 12px;
+  font-size: 16px;
+  font-weight: 700;
+  text-transform: uppercase;
 }
 
 .reportContainer {
@@ -142,7 +152,6 @@ footer a {
 .statusStreamContainer {
   display: flex;
   justify-content: space-between;
-  margin: 16px 0;
 }
 
 .statusSquare {
@@ -169,13 +178,15 @@ footer a {
   display: flex;
   flex-direction: row;
   align-items: center;
+  margin-bottom: 16px;
 }
 
 .statusHeadline {
   color: #eee;
   padding: 4px 8px;
   border-radius: 15px;
   font-size: 12px;
+  font-weight: 700;
   margin-left: 12px;
 }
 
@@ -221,13 +232,13 @@ footer a {
 }
 
 .tooltip {
-  background-color: #194b7dee;
-  box-shadow: 0 0 8px 0 #33333366;
+  background-color: #fff;
+  box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.12);
   border-radius: 4px;
-  color: #fff;
+  color: #3b3b3b;
   font-size: 12px;
   line-height: 18px;
-  padding: 8px;
+  padding: 16px;
   position: absolute;
   text-align: left;
   z-index: 100;
@@ -241,17 +252,40 @@ footer a {
   width: 4px;
   text-align: center;
   border: 4px solid transparent;
-  border-bottom-color: #194b7d;
+  border-bottom-color: #fff;
   left: 50%;
   margin-left: -2px;
 }
 
 .tooltip .tooltipDateTime {
   font-size: 12px;
-  font-weight: bold;
+  color: #7c7c7c;
+  text-transform: uppercase;
+  font-weight: 600;
 }
 
 .tooltip .tooltipKey {
   color: #ccc;
   font-size: 10px;
 }
+
+.tooltip .tooltipDescription {
+  margin-top: 12px;
+  font-size: 14px;
+  color: #181818;
+}
+
+.tooltip #tooltipStatus {
+  padding: 4px 8px;
+  border-radius: 15px;
+  font-size: 12px;
+  font-weight: bold;
+  margin-top: 6px;
+  display: inline-block;
+}
+
+.tooltip hr {
+  border: none;
+  border-top: 1px solid #ededed;
+  margin-top: 16px;
+}
diff --git a/index.html b/index.html
@@ -7,19 +7,19 @@
   </head>
   <body>
     <div class="pageContainer">
-      <h1>
-        Statsig Status
-      </h1>
+      <div class="headline">
+        <img src="/logo.svg" alt="Logo" width="200px" />
+        <span>
+          System Status
+        </span>
+      </div>
       <div id="reports" class="reportContainer">
       </div>
       <div id="tooltip" class="tooltip" style="opacity: 0;">
         <div id="tooltipArrow" class="tooltipArrow"> </div>
-        <div class="tooltipDateTime">
-          <span id="tooltipDateTime"></span> | <span id="tooltipQuartile"></span> 
-        </div>
-        <div id="tooltipKey" class="tooltipKey">
-        </div>
+        <div id="tooltipDateTime" class="tooltipDateTime"></div>
         <div id="tooltipStatus" class="tooltipStatus"></div>
+        <hr />
         <div id="tooltipDescription" class="tooltipDescription"></div>
       </div>
       <div id="templates" style="display: none;">
@@ -44,7 +44,7 @@ <h6 class="statusTitle">$title&nbsp;</h6>
     </div>
     <footer>
       Powered by Statsig Open Source Library: 
-      <a href="https://github.com/statsig-io/pinger/">https://github.com/statsig-io/pinger</a>
+      <a href="https://github.com/statsig-io/statuspage/">https://github.com/statsig-io/statuspage</a>
     </footer>
   </body>
   <script>

diff --git a/index.js b/index.js
@@ -108,9 +108,9 @@ function getStatusText(color) {
 
 function getStatusDescriptiveText(color) {
   return color == 'nodata' ? 'No Data Available: Health check was not performed.' :
-    color == 'success' ? 'All systems 100% operational.' :
-    color == 'failure' ? 'The system was down as seen from health-checker during this period.' :
-    color == 'partial' ? 'There were some periods of instability in the service.' : 'Unknown';
+    color == 'success' ? 'No downtime recorded today.' :
+    color == 'failure' ? 'Major outages recorded today.' :
+    color == 'partial' ? 'Partial outages recorded today.' : 'Unknown';
 }
 
 function getTooltip(key, date, quartile, color) {
@@ -193,13 +193,18 @@ function splitRowsByDate(rows) {
 }
 
 let tooltipTimeout = null;
-function showTooltip(element, key, date, quartile, color) {
+function showTooltip(element, key, date, color) {
   clearTimeout(tooltipTimeout);
   const toolTipDiv = document.getElementById('tooltip');
+
   document.getElementById('tooltipDateTime').innerText = date.toDateString();
-  document.getElementById('tooltipKey').innerText = key;
-  document.getElementById('tooltipStatus').innerText = getStatusDescriptiveText(color);
-  toolTipDiv.style.top = element.offsetTop + element.offsetHeight + 4;
+  document.getElementById('tooltipDescription').innerText = getStatusDescriptiveText(color);
+
+  const statusDiv = document.getElementById('tooltipStatus');
+  statusDiv.innerText = getStatusText(color);
+  statusDiv.className = color;
+
+  toolTipDiv.style.top = element.offsetTop + element.offsetHeight + 10;
   toolTipDiv.style.left = element.offsetLeft + element.offsetWidth / 2 - toolTipDiv.offsetWidth / 2;
   toolTipDiv.style.opacity = "1";
 }

diff --git a/logo.svg b/logo.svg