0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-09 14:21:42 -05:00

💄 Redesign error page

This commit is contained in:
alonso.torres 2023-11-27 17:41:25 +01:00
parent c1882af124
commit 6b5c75bf6a
6 changed files with 193 additions and 45 deletions

View file

@ -29,7 +29,7 @@ paths.resources = "./resources/";
paths.output = "./resources/public/";
paths.dist = "./target/dist/";
const touchSourceOnStyleChange = true;
const touchSourceOnStyleChange = false;
/***********************************************
* Marked Extensions

View file

@ -15,6 +15,7 @@
"test:compile": "clojure -M:dev:shadow-cljs compile test --config-merge '{:autorun false}'",
"lint:clj": "clj-kondo --parallel --lint src/",
"lint:scss": "yarn run prettier -c resources/styles -c src/**/*.scss",
"lint:fix": "yarn run prettier -c resources/styles -c src/**/*.scss -w",
"test:run": "node target/tests.js",
"test:watch": "clojure -M:dev:shadow-cljs watch test",
"test": "yarn run test:compile && yarn run test:run",

View file

@ -0,0 +1,3 @@
<svg width="79" xmlns="http://www.w3.org/2000/svg" height="1537" viewBox="2462.648 7069.559 79 1537">
<path d="m2483.255 7069.559-10.973 15.432v1441.521l-9.547 4.535-.087-.039v56.915l37.226 17.564 2.274 1.072 2.276-1.072 37.224-17.564v-56.915l-.07.032-9.55-4.536V7084.991l-.334-.468-10.639-14.964-10.973 15.432v.016l-7.983-11.231-7.923 11.144-.282-.397-10.639-14.964Zm1.941 8.964 4.244 5.968h-12.37l4.195-5.899 3.931-.069Zm37.8 0 4.244 5.968h-12.37l4.193-5.899 3.933-.069Zm-18.956 4.219 4.244 5.968h-12.37l4.194-5.898 3.932-.07Zm-28.143 4.758h5.866v1452.525l-5.866-2.768V7087.5Zm8.878 0h5.838v1456.7l-5.838-2.754V7087.5Zm28.923 0h5.866v1453.925l-5.866 2.768V7087.5Zm8.877 0h5.838v1449.75l-5.838 2.754V7087.5Zm-27.834 4.219h5.866v1457.196l-5.866-2.768V7091.719Zm8.879 0h5.837v1454.476l-5.837 2.754v-1457.23Zm28.407 1439.28 5.165 2.11-5.165 2.437v-4.547Zm-59.745.009v4.544l-5.164-2.436 5.164-2.108Zm-5.084 7.17 32.676 15.416v46.867l-32.676-15.415v-46.868Zm69.901 0v46.868l-32.675 15.415v-46.867l32.675-15.416Z"/>
</svg>

After

Width:  |  Height:  |  Size: 1,020 B

View file

@ -170,6 +170,7 @@
(def lock (icon-xref :lock))
(def logo (icon-xref :penpot-logo))
(def logo-icon (icon-xref :penpot-logo-icon))
(def logo-error-screen (icon-xref :logo-error-screen))
(def logout (icon-xref :logout))
(def lowercase (icon-xref :lowercase))
(def mail (icon-xref :mail))

View file

@ -5,8 +5,11 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.static
(:require-macros [app.main.style :as stl])
(:require
[app.main.features :as features]
[app.main.store :as st]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.util.globals :as globals]
[app.util.i18n :refer [tr]]
@ -17,66 +20,115 @@
(mf/defc static-header
{::mf/wrap-props false}
[props]
(let [children (obj/get props "children")
(let [new-css-system (mf/use-ctx ctx/new-css-system)
children (obj/get props "children")
on-click (mf/use-callback #(set! (.-href globals/location) "/"))]
[:section.exception-layout
[:div.exception-header
{:on-click on-click}
i/logo]
[:div.exception-content
[:div.container children]]]))
(if new-css-system
[:section {:class (stl/css :exception-layout)}
[:div
{:class (stl/css :exception-header)
:on-click on-click}
i/logo-icon]
[:div {:class (stl/css :deco-before)} i/logo-error-screen]
[:div {:class (stl/css :exception-content)}
[:div {:class (stl/css :container)} children]]
[:div {:class (stl/css :deco-after)} i/logo-error-screen]]
[:section.exception-layout
[:div.exception-header
{:on-click on-click}
i/logo]
[:div.exception-content
[:div.container children]]])))
(mf/defc not-found
[]
[:> static-header {}
[:div.image i/icon-empty]
[:div.main-message (tr "labels.not-found.main-message")]
[:div.desc-message (tr "labels.not-found.desc-message")]])
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
(if new-css-system
[:> static-header {}
[:div {:class (stl/css :main-message)} (tr "labels.not-found.main-message")]
[:div {:class (stl/css :desc-message)} (tr "labels.not-found.desc-message")]]
[:> static-header {}
[:div.image i/icon-empty]
[:div.main-message (tr "labels.not-found.main-message")]
[:div.desc-message (tr "labels.not-found.desc-message")]])))
(mf/defc bad-gateway
[]
[:> static-header {}
[:div.image i/icon-empty]
[:div.main-message (tr "labels.bad-gateway.main-message")]
[:div.desc-message (tr "labels.bad-gateway.desc-message")]
[:div.sign-info
[:a.btn-primary.btn-small
{:on-click (fn [] (st/emit! #(dissoc % :exception)))}
(tr "labels.retry")]]])
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
(if new-css-system
[:> static-header {}
[:div {:class (stl/css :main-message)} (tr "labels.bad-gateway.main-message")]
[:div {:class (stl/css :desc-message)} (tr "labels.bad-gateway.desc-message")]
[:div {:class (stl/css :sign-info)}
[:button
{:on-click (fn [] (st/emit! (rt/assign-exception nil)))}
(tr "labels.retry")]]]
[:> static-header {}
[:div.image i/icon-empty]
[:div.main-message (tr "labels.bad-gateway.main-message")]
[:div.desc-message (tr "labels.bad-gateway.desc-message")]
[:div.sign-info
[:a.btn-primary.btn-small
{:on-click (fn [] (st/emit! #(dissoc % :exception)))}
(tr "labels.retry")]]])))
(mf/defc service-unavailable
[]
[:> static-header {}
[:div.image i/icon-empty]
[:div.main-message (tr "labels.service-unavailable.main-message")]
[:div.desc-message (tr "labels.service-unavailable.desc-message")]
[:div.sign-info
[:a.btn-primary.btn-small
{:on-click (fn [] (st/emit! #(dissoc % :exception)))}
(tr "labels.retry")]]])
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
(if new-css-system
[:> static-header {}
[:div {:class (stl/css :main-message)} (tr "labels.service-unavailable.main-message")]
[:div {:class (stl/css :desc-message)} (tr "labels.service-unavailable.desc-message")]
[:div {:class (stl/css :sign-info)}
[:button
{:on-click (fn [] (st/emit! (rt/assign-exception nil)))}
(tr "labels.retry")]]]
[:> static-header {}
[:div.main-message (tr "labels.service-unavailable.main-message")]
[:div.desc-message (tr "labels.service-unavailable.desc-message")]
[:div.sign-info
[:a.btn-primary.btn-small
{:on-click (fn [] (st/emit! #(dissoc % :exception)))}
(tr "labels.retry")]]])))
(mf/defc internal-error
[]
[:> static-header {}
[:div.image i/icon-empty]
[:div.main-message (tr "labels.internal-error.main-message")]
[:div.desc-message (tr "labels.internal-error.desc-message")]
[:div.sign-info
[:a.btn-primary.btn-small
{:on-click (fn [] (st/emit! (rt/assign-exception nil)))}
(tr "labels.retry")]]])
(let [new-css-system (mf/use-ctx ctx/new-css-system)]
(if new-css-system
[:> static-header {}
[:div {:class (stl/css :main-message)} (tr "labels.internal-error.main-message")]
[:div {:class (stl/css :desc-message)} (tr "labels.internal-error.desc-message")]
[:div {:class (stl/css :sign-info)}
[:button
{:on-click (fn [] (st/emit! (rt/assign-exception nil)))}
(tr "labels.retry")]]]
[:> static-header {}
[:div.image i/icon-empty]
[:div.main-message (tr "labels.internal-error.main-message")]
[:div.desc-message (tr "labels.internal-error.desc-message")]
[:div.sign-info
[:a.btn-primary.btn-small
{:on-click (fn [] (st/emit! (rt/assign-exception nil)))}
(tr "labels.retry")]]])))
(mf/defc exception-page
[{:keys [data] :as props}]
(case (:type data)
:not-found
[:& not-found]
(let [new-css-system (features/use-feature "styles/v2")]
[:& (mf/provider ctx/new-css-system) {:value new-css-system}
(case (:type data)
:not-found
[:& not-found]
:bad-gateway
[:& bad-gateway]
:bad-gateway
[:& bad-gateway]
:service-unavailable
[:& service-unavailable]
[:& internal-error]))
:service-unavailable
[:& service-unavailable]
[:& internal-error])]))

View file

@ -0,0 +1,91 @@
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC
@use "common/refactor/common-refactor.scss" as *;
.exception-layout {
width: 100%;
height: 100%;
background-color: $db-secondary;
}
.deco-before,
.deco-after {
position: absolute;
left: calc(50% - $s-40);
svg {
position: absolute;
fill: $df-secondary;
height: 1537px;
width: $s-80;
}
}
.deco-before {
height: 34vh;
top: 0;
svg {
bottom: 0;
}
}
.deco-after {
height: 34vh;
bottom: 0;
svg {
top: 0;
}
}
.exception-header {
padding: $s-24 $s-32;
position: fixed;
svg {
fill: $df-primary;
width: $s-48;
height: auto;
}
}
.exception-content {
display: flex;
height: 100%;
justify-content: center;
width: 100%;
.container {
align-items: center;
display: flex;
flex-direction: column;
gap: $s-16;
height: 34vh;
justify-content: center;
margin-top: 33vh;
text-align: center;
width: $s-640;
}
}
.main-message {
@include bigTitleTipography;
color: $df-primary;
}
.desc-message {
@include bigTitleTipography;
color: $df-secondary;
}
.sign-info {
text-align: center;
button {
@extend .button-primary;
text-transform: uppercase;
padding: $s-8 $s-16;
font-size: $fs-11;
}
}