From 0dd8c66ce48e86c48cb00ac8988cb64f08750915 Mon Sep 17 00:00:00 2001
From: Juan de la Cruz <juan.delacruz@kaleidos.net>
Date: Mon, 13 Apr 2020 14:58:30 +0200
Subject: [PATCH] Add new error page design

---
 .../resources/images/icons/icon-empty.svg     |  3 +++
 frontend/resources/images/icons/icon-lock.svg |  3 +++
 .../styles/main/layouts/not-found.scss        | 21 ++++++++++++++++---
 frontend/src/uxbox/builtins/icons.cljs        |  2 ++
 frontend/src/uxbox/main/ui/not_found.cljs     |  1 +
 5 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 frontend/resources/images/icons/icon-empty.svg
 create mode 100644 frontend/resources/images/icons/icon-lock.svg

diff --git a/frontend/resources/images/icons/icon-empty.svg b/frontend/resources/images/icons/icon-empty.svg
new file mode 100644
index 000000000..b3988c12b
--- /dev/null
+++ b/frontend/resources/images/icons/icon-empty.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="279.383" height="413.176" viewBox="0 0 261.921 387.352">
+  <path d="M123.594 0v53.485h14.733V0zM45.196 37.427L31.79 43.539 53.985 92.2l13.403-6.112zm171.914 0l-22.194 48.662L208.32 92.2l22.192-48.662zM130.844 76.03L0 136.533v188.952l130.96 61.867 130.961-61.867V136.533l-.232.11zm-.116 16.406l112.266 53.037-112.039 52.978-112.264-53.088zM15.082 160.34l108.337 51.178v155.59L15.082 315.93zm231.755 0v155.59l-108.334 51.178v-155.59z"/>
+</svg>
diff --git a/frontend/resources/images/icons/icon-lock.svg b/frontend/resources/images/icons/icon-lock.svg
new file mode 100644
index 000000000..8cb8aa6f7
--- /dev/null
+++ b/frontend/resources/images/icons/icon-lock.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="279.383" height="369.004" viewBox="0 0 261.922 345.941">
+  <path d="M68.318 0L31.941 51.237v28.961L.286 95.255 0 95.121v188.952l123.419 58.309 7.542 3.56 7.542-3.56 123.418-58.309V95.121l-.232.11-31.666-15.062V51.237l-1.106-1.559L193.645 0l-36.38 51.237v.05l-26.47-37.281L104.528 51l-.939-1.322L68.318 0zm6.437 29.762l14.07 19.816H47.811L61.72 29.995l13.036-.233zm125.324 0l14.072 19.816h-41.012l13.903-19.583 13.037-.233zM137.23 43.77l14.07 19.813h-41.008L124.195 44l13.035-.23zM43.923 59.564h19.452v65.497l-19.452-9.19V59.564zm29.438 0h19.354l-.001 79.356-19.355-9.142.002-70.214zm95.887 0h19.453l-.002 70.146-19.45 9.188-.001-79.334zm29.438 0h19.352v56.285l-19.352 9.142V59.564zM106.4 73.57h19.451v81.004l-19.451-9.19V73.57zm29.438 0h19.352l-.002 71.971-19.352 9.145.002-81.116zm94.182 21.526l17.126 7.002-17.126 8.09V95.095zm-198.08.025v15.09l-17.122-8.09 17.122-7zM15.082 118.93l108.337 51.178v155.59L15.082 274.519v-155.59zm231.755 0v155.59l-108.334 51.178v-155.59l108.334-51.178zm-44.245 73.323c-1.94 0-2.775.238-5.523 1.574-2.748 1.336-3.583 1.911-5.522 3.796-2.977 2.893-5.578 6.852-6.922 10.536-.91 2.498-1.075 3.455-1.075 6.313 0 2.873.162 3.655 1.094 5.305 1.13 2 4.276 4.018 5.875 3.768.493-.076.837.194.837.658 0 .705-3.885 27.398-4.416 30.342l-.216 1.194 10.345-5.028 10.344-5.03-.218-.983c-.501-2.247-4.413-25.348-4.413-26.062 0-.451.35-1.062.837-1.46 1.599-1.305 4.746-6.383 5.876-9.482.931-2.556 1.093-3.494 1.093-6.367 0-2.858-.164-3.657-1.075-5.27-1.344-2.377-3.945-3.806-6.921-3.804z"/>
+</svg>
diff --git a/frontend/resources/styles/main/layouts/not-found.scss b/frontend/resources/styles/main/layouts/not-found.scss
index 359d7ab53..c1d64ea06 100644
--- a/frontend/resources/styles/main/layouts/not-found.scss
+++ b/frontend/resources/styles/main/layouts/not-found.scss
@@ -29,15 +29,30 @@
   justify-content: center;
   align-items: center;
 
+  .error-img {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 2rem;
+
+    svg {
+      height: 320px;
+      width: 200px;
+    }
+  }
+
   .main-message {
-    font-size: 18rem;
     color: $color-black;
-    line-height: 226px;
+    font-size: 11rem;
+    line-height: 200px;
+    text-align: center;
   }
 
   .desc-message {
-    font-size: 3rem;
     color: $color-black;
+    font-size: 2.2rem;
+    font-weight: 300;
+    text-align: center;
   }
 }
 
diff --git a/frontend/src/uxbox/builtins/icons.cljs b/frontend/src/uxbox/builtins/icons.cljs
index d234e1980..b1fa6d8ff 100644
--- a/frontend/src/uxbox/builtins/icons.cljs
+++ b/frontend/src/uxbox/builtins/icons.cljs
@@ -49,6 +49,8 @@
 (def grid (icon-xref :grid))
 (def grid-snap (icon-xref :grid-snap))
 (def icon-set (icon-xref :icon-set))
+(def icon-lock (icon-xref :icon-lock))
+(def icon-empty (icon-xref :icon-empty))
 (def image (icon-xref :image))
 (def infocard (icon-xref :infocard))
 (def layers (icon-xref :layers))
diff --git a/frontend/src/uxbox/main/ui/not_found.cljs b/frontend/src/uxbox/main/ui/not_found.cljs
index 85d8f6bbc..96a8d4782 100644
--- a/frontend/src/uxbox/main/ui/not_found.cljs
+++ b/frontend/src/uxbox/main/ui/not_found.cljs
@@ -20,5 +20,6 @@
    [:div.not-found-header i/logo]
    [:div.not-found-content
     [:div.message-container
+     [:div.error-img i/icon-empty]
      [:div.main-message "404"]
      [:div.desc-message "Oops! Page not found"]]]])