From 3162d45c5e7708df1b0f0a2db42c631d8e4af074 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 31 Oct 2023 09:48:19 +0000
Subject: [PATCH] Update error page again

---
 hosting/proxy/error.html | 35 ++++++++++++++++++-----------------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/hosting/proxy/error.html b/hosting/proxy/error.html
index ab322277d5..545d6c7f6d 100644
--- a/hosting/proxy/error.html
+++ b/hosting/proxy/error.html
@@ -57,8 +57,8 @@
       --spectrum-global-color-gray-600: rgb(144,144,144);
       --spectrum-global-color-gray-900: rgb(255,255,255);
       --spectrum-global-color-gray-800: rgb(227,227,227);
-      --spectrum-global-color-static-blue-600: rgb(20,115,230);
-      --spectrum-global-color-static-blue-hover: rgb(	18, 103, 207);
+      --bb-indigo: #6E56FF;
+      --bb-indigo-light: #9F8FFF;
     }
 
     html, body {
@@ -90,15 +90,8 @@
     .info {
       display: flex;
       flex-direction: column;
-      align-items: left;
+      align-items: flex-start;
     }
-
-    @media only screen and (max-width: 600px) {
-      .info {
-        align-items: center;
-      }
-    }
-
     .status {
       color: var(--spectrum-global-color-gray-600)
     }
@@ -113,13 +106,14 @@
     .buttons {
       display: flex;
       flex-direction: row;
+      justify-content: flex-start;
       margin-top: 15px;
     }
     .homeButton {
-      background-color: var(--spectrum-global-color-static-blue-600);
+      background-color: var(--bb-indigo);
     }
     .homeButton:hover {
-      background-color: var(--spectrum-global-color-static-blue-hover);
+      background-color: var(--bb-indigo-light);
     }
     .statusButton {
       background-color: transparent;
@@ -127,8 +121,8 @@
       border: none;
     }
     .hero {
-      height: 72px;
-      margin-right: 40px;
+      height: 60px;
+      margin: 10px 40px 10px 0;
     }
     .hero img {
       height: 100%;
@@ -138,11 +132,19 @@
       flex-direction: row;
       align-items: center;
       justify-content: center;
+      padding: 0 40px;
+    }
+    h1 {
+      margin-bottom: 10px;
+    }
+    h3 {
+      margin-top: 0;
     }
 
     @media only screen and (max-width: 600px) {
       .content {
         flex-direction: column;
+        align-items: flex-start;
       }
     }
   </style>
@@ -158,12 +160,11 @@
         </div>
         <div class="info">
           <div>
-            <h4 id="status" class="status"></h4>
+            <h4 id="status" class="status">&nbsp;</h4>
             <h1 class="title">
               Houston we have a problem!
             </h1>
-            <h3 id="message" class="message">
-            </h3>
+            <h3 id="message" class="message">&nbsp;</h3>
           </div>
           <div class="buttons">
             <button class="homeButton" onclick=goHome()>Return home</button>