web/satellite,satellite/console/consoleweb: update static error pages

Our static error pages have been unified and updated to reflect our new designs. Change-Id: Ib7cf76e87c56180dd997a91a2829187dac99baff
storj · Apr 14, 2023 · 34e6c50 · 34e6c50
1 parent 4ee22e0
commit 34e6c50
Show file tree

Hide file tree

Showing 8 changed files with 138 additions and 197 deletions.
diff --git a/satellite/console/consoleweb/server.go b/satellite/console/consoleweb/server.go
@@ -138,9 +138,8 @@ type Server struct {
 }
 
 type templates struct {
-	index               *template.Template
-	notFound            *template.Template
-	internalServerError *template.Template
+	index *template.Template
+	error *template.Template
 }
 
 // apiAuth exposes methods to control authentication process for each generated API endpoint.
@@ -858,27 +857,16 @@ func (server *Server) graphqlHandler(w http.ResponseWriter, r *http.Request) {
 func (server *Server) serveError(w http.ResponseWriter, status int) {
 	w.WriteHeader(status)
 
-	switch status {
-	case http.StatusInternalServerError:
-		templates, err := server.loadTemplates()
-		if err != nil {
-			server.log.Error("unable to load templates", zap.Error(err))
-			return
-		}
-		err = templates.internalServerError.Execute(w, nil)
-		if err != nil {
-			server.log.Error("cannot parse internalServerError template", zap.Error(err))
-		}
-	case http.StatusNotFound:
-		templates, err := server.loadTemplates()
-		if err != nil {
-			server.log.Error("unable to load templates", zap.Error(err))
-			return
-		}
-		err = templates.notFound.Execute(w, nil)
-		if err != nil {
-			server.log.Error("cannot parse pageNotFound template", zap.Error(err))
-		}
+	templates, err := server.loadTemplates()
+	if err != nil {
+		server.log.Error("unable to load templates", zap.Error(err))
+		return
+	}
+
+	data := struct{ StatusCode int }{StatusCode: status}
+	err = templates.error.Execute(w, data)
+	if err != nil {
+		server.log.Error("cannot parse error template", zap.Error(err))
 	}
 }
 
@@ -955,12 +943,7 @@ func (server *Server) parseTemplates() (_ *templates, err error) {
 		// Loading index is optional.
 	}
 
-	t.notFound, err = template.ParseFiles(filepath.Join(server.config.StaticDir, "static", "errors", "404.html"))
-	if err != nil {
-		return &t, Error.Wrap(err)
-	}
-
-	t.internalServerError, err = template.ParseFiles(filepath.Join(server.config.StaticDir, "static", "errors", "500.html"))
+	t.error, err = template.ParseFiles(filepath.Join(server.config.StaticDir, "static", "errors", "error.html"))
 	if err != nil {
 		return &t, Error.Wrap(err)
 	}

diff --git a/web/satellite/static/errors/404.html b/web/satellite/static/errors/404.html
diff --git a/web/satellite/static/errors/500.html b/web/satellite/static/errors/500.html
diff --git a/web/satellite/static/errors/error.css b/web/satellite/static/errors/error.css
@@ -1,61 +1,93 @@
-/* Copyright (C) 2021 Storj Labs, Inc. */
-
-/* See LICENSE for copying information. */
-
-body {
-    margin: 0;
-}
-
-@font-face {
-    font-family: 'font_regular';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src:
-        local(''),
-        url('/static/static/fonts/inter-v3-latin-regular.woff2') format('woff2'),
-        url('/static/static/fonts/inter-v3-latin-regular.woff') format('woff'),
-        url('/static/static/fonts/inter-v3-latin-regular.ttf') format('truetype');
-}
-
-img,
-a {
-    -webkit-user-drag: none;
-}
-
-.error-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 1000;
-    width: 100%;
-    height: 100vh;
-    background-color: #fff;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.logo {
-    display: flex;
-    align-items: center;
-    position: absolute;
-    top: 87px;
-    left: 100px;
-}
-
-.text {
-    margin-left: 15px;
-}
-
-.title {
-    font-family: 'font_regular', sans-serif;
-    margin-bottom: 60px;
-    font-size: 32px;
-}
+/* Copyright (C) 2021 Storj Labs, Inc. */
+/* See LICENSE for copying information. */
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+@font-face {
+    font-family: 'font_bold';
+    font-style: normal;
+    font-weight: 800;
+    font-display: swap;
+    src:
+        local(''),
+        url('/static/static/fonts/inter-v3-latin-800.woff2') format('woff2'),
+        url('/static/static/fonts/inter-v3-latin-800.woff') format('woff'),
+        url('/static/static/fonts/inter-v3-latin-800.ttf') format('truetype');
+}
+
+.error-area {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 52px 24px;
+    box-sizing: border-box;
+    display: flex;
+    background: url("/static/static/images/errors/dotWorld.png") no-repeat center 178px;
+    flex-direction: column;
+    justify-content: center;
+    overflow-y: auto;
+}
+
+.logo-wrapper {
+    height: 30.89px;
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    top: 52px;
+    left: 0;
+    right: 0;
+    margin-bottom: 52px;
+}
+
+.logo {
+    height: 100%;
+    width: auto;
+    cursor: pointer;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-family: 'font_bold', sans-serif;
+    text-align: center;
+}
+
+.title {
+    font-size: 90px;
+    line-height: 90px;
+}
+
+.subtitle {
+    margin-top: 20px;
+    font-size: 28px;
+}
+
+.button {
+    margin-top: 32px;
+    padding: 16px 37.5px;
+    border-radius: 26px;
+    background-color: #0149ff;
+    color: white;
+    line-height: 20px;
+    text-decoration: none;
+}
+
+.button:hover {
+    background-color: #0059d0;
+}
+
+@media screen and (max-height: 500px) {
+    .error-area {
+        justify-content: flex-start;
+    }
+
+    .logo-wrapper {
+        position: unset;
+    }
+}
diff --git a/web/satellite/static/errors/error.html b/web/satellite/static/errors/error.html
@@ -0,0 +1,31 @@
+<!--Copyright (C) 2023 Storj Labs, Inc.-->
+<!--See LICENSE for copying information.-->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>{{ .StatusCode }} | Storj</title>
+    <link rel="stylesheet" type="text/css" href="/static/static/errors/error.css">
+</head>
+<body>
+    <div class="error-area">
+        <a class="logo-wrapper" href="/">
+            <img class="logo" src="/static/static/images/logo.svg" alt="Storj logo" />
+		</a>
+        <div class="container">
+            <h1 class="title">{{ .StatusCode }}</h1>
+            <h2 class="subtitle">
+                {{- if eq .StatusCode 400 -}}
+                    Bad request.
+                {{- else if eq .StatusCode 500 -}}
+                    Internal server error.
+                {{- else -}}
+                    An error occurred.
+                {{- end -}}
+            </h2>
+            <a href="/" class="button">Go to homepage</a>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/web/satellite/static/images/errors/404.svg b/web/satellite/static/images/errors/404.svg
diff --git a/web/satellite/static/images/errors/50X.svg b/web/satellite/static/images/errors/50X.svg