mirror of
https://github.com/penpot/penpot.git
synced 2025-03-28 15:41:25 -05:00
💄 Redesign error page
This commit is contained in:
alonso.torres
parent
c1882af124
commit
6b5c75bf6a
6 changed files with 193 additions and 45 deletions
|
|
@ -29,7 +29,7 @@ paths.resources = "./resources/";
|
|||
paths.output = "./resources/public/";
|
||||
paths.dist = "./target/dist/";
|
||||
|
||||
const touchSourceOnStyleChange = true;
|
||||
const touchSourceOnStyleChange = false;
|
||||
|
||||
/***********************************************
|
||||
* Marked Extensions
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
3
frontend/resources/images/icons/logo-error-screen.svg
Normal file
3
frontend/resources/images/icons/logo-error-screen.svg
Normal 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 |
|
|
@ -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))
|
||||
|
|
|
|||
|
|
@ -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])]))
|
||||
|
|
|
|||
91
frontend/src/app/main/ui/static.scss
Normal file
91
frontend/src/app/main/ui/static.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue