Cleanup styles and add Sanic palette

sanic/pages/error.py

@@ -30,7 +30,7 @@ class ErrorPage(BasePage):
         # FIXME: This needs to be done some place else but I am not digging into that now.
         if "Internal Server Error" in title:
             text = "The application encountered an unexpected error and could not continue."
-        self.TITLE = E(f"App {request.app.name} cannot handle your request")
+        self.TITLE = E.strong(request.app.name)(" cannot handle your request")
         self.title = title
         self.text = text
         self.request = request
@@ -53,7 +53,7 @@ class ErrorPage(BasePage):
             context = getattr(self.exc, "context", None)
             if context:
                 self._key_value_table(
-                    "Exception context", "exception-context", context
+                    "Issue context", "exception-context", context
                 )
 
             if not debug:
@@ -89,13 +89,13 @@ class ErrorPage(BasePage):
     def _key_value_table(
         self, title: str, table_id: str, data: Mapping[str, Any]
     ) -> None:
-        with self.doc.table(id=table_id, class_="key-value-table"):
+        with self.doc.table(id=table_id, class_="key-value-table smalltext"):
             self.doc.caption(title)
             for key, value in data.items():
                 try:
                     self.doc.tr.td(key, class_="nobr key").td(value)
                 # Printing values may cause a new exception, so suppress it
                 except Exception:
-                    self.doc.tr.td(key, class_="nobr key").td(
-                        E.em("Unable to display value")
+                    self.doc.tr.td(key, class_="nobr key").td.em(
+                        "Unable to display value"
                     )

sanic/pages/styles/BasePage.css

@@ -8,7 +8,11 @@ html {
 body {
     margin: 0;
     font-size: 1.25rem;
-    --accent: #ff0d68;
+    --sanic: #ff0d68;
+    --sanic-blue: #0092FF;
+    --sanic-yellow: #FFE900;
+    --sanic-purple: #833FE3;
+    --sanic-green: #16DB93;
 }
 
 body>* {

sanic/pages/styles/ErrorPage.css

@@ -4,14 +4,13 @@ summary {
 }
 
 .tracerite {
-    /* --color-var: var(--accent);
-    --color-val: #ff0; */
-    --color-type: var(--accent);
+    --color-var: var(--sanic-blue);
+    --color-val: var(--sanic-green);
+    --color-type: var(--sanic-purple);
 }
 
 .key-value-table {
     margin: 2rem 0;
-    border-collapse: collapse;
 }
 
 .key-value-table caption {
@@ -21,32 +20,3 @@ summary {
     font-weight: 700;
     padding-bottom: 0.5rem;
 }
-
-.key-value-table td {
-    font-size: 1rem;
-    font-family: monospace;
-    border: 1px solid #888;
-    padding: 0.25rem;
-}
-
-.key-value-table .key {
-    color: var(--accent)
-}
-
-mark {
-    position: relative;
-}
-
-mark[data-symbol="💣"]::before {
-    content: "Exception raised";
-    display: none;
-    position: absolute;
-    top: -1.25em;
-    right: 0;
-    padding: 0.25em;
-    background-color: var(--accent);
-}
-
-mark[data-symbol="💣"]:hover::before {
-    display: block;
-}