diff --git a/sanic/pages/error.py b/sanic/pages/error.py index 968cfae8..4c1a0ce2 100644 --- a/sanic/pages/error.py +++ b/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" ) diff --git a/sanic/pages/styles/BasePage.css b/sanic/pages/styles/BasePage.css index 88782d5c..f31ff333 100644 --- a/sanic/pages/styles/BasePage.css +++ b/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>* { diff --git a/sanic/pages/styles/ErrorPage.css b/sanic/pages/styles/ErrorPage.css index 379a8591..6a3212f3 100644 --- a/sanic/pages/styles/ErrorPage.css +++ b/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; -}