Skip to content

Commit

Permalink
feat: Update error page (#1932)
Browse files Browse the repository at this point in the history 
* feat: Update error page

closes #1894

This PR updates the appearance of the error page aligning it with the new branding and look and feel

* ci: Force build on push to feature branch

* import icon

* format

Co-authored-by: Francisco Aranda <francisco@recogn.ai>
  • Loading branch information
@leiyre @frascuchon
leiyre and frascuchon committed Nov 21, 2022
1 parent c25a225 commit caeb7d4
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 187 deletions.
4 changes: 4 additions & 0 deletions .github/workflows/package.yml
View file
Expand Up @@ -10,11 +10,15 @@ on:
- "main"
- "develop"
- "releases/**"
- "feat/**"
- "feature/**"
pull_request:
branches:
- "main"
- "develop"
- "releases/**"
- "feat/**"
- "feature/**"

jobs:
src-test:
Expand Down
1 change: 1 addition & 0 deletions frontend/assets/scss/abstract/variables/_variables.scss
View file
Expand Up @@ -94,6 +94,7 @@ $info: palette(grey, 600);
// Fonts
//-----------
$primary-font-family: "Inter", "Helvetica", "Arial", sans-serif;
$secondary-font-family: "raptor_v2_premiumbold", "Helvetica", "Arial", sans-serif;
$base-font-size: 14px;
$base-line-height: 1.4em;

Expand Down
277 changes: 90 additions & 187 deletions frontend/layouts/error.vue
View file
Expand Up @@ -17,223 +17,126 @@

<template>
<div class="error">
<div class="container">
<div class="error__container">
<brand-logo class="error__logo" />
</div>
<div class="error__code">
{{ error.statusCode }}
</div>
<div class="error__container">
<div class="error__content">
<p class="error__text">
Oh no!
<br />It looks like we’ve been split up
</p>
<h1 v-if="error.statusCode === 404">Error 404</h1>
<h1 v-else class="error__title">An error occurred</h1>
<p class="error__subtitle">
The page you’re looking for can’t be found.
</p>
<nuxt-link to="/" class="error__link">Take me home</nuxt-link>
<div class="error__pill">{{ error.message }}</div>
<h1 class="error__title">Something went wrong.</h1>
<h2 class="error__text">
We can't seem to find the page you are looking for
</h2>
<div class="error__buttons">
<nuxt-link class="error__button" :to="`/`"
>Back to home page
<svgicon name="chevron-right" width="20" height="20"></svgicon>
</nuxt-link>
</div>
</div>
</div>
<div class="error--bg">
<svg
width="1461px"
height="421px"
viewBox="0 0 1461 421"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g
id="*-Documentation"
stroke="none"
stroke-width="1"
fill="none"
fill-rule="evenodd"
>
<g
id="error-message-explore"
transform="translate(0.000000, -392.000000)"
>
<path
id="Path-2"
d="M858.516319,553.275608 L979.678991,553.275608 C981.110745,541.1066 988.964344,535.022095 1003.23979,535.022095 C1024.65295,535.022095 1026.12972,558.684553 1034.99035,549.412076 C1043.85097,540.139599 1036.71266,529.771294 1041.71561,510.522956 C1046.71857,491.274618 1069.69015,503.68286 1074.12475,510.522956 C1076.38052,514.002333 1060.81308,530.311269 1059.72624,530.311269 C1058.24804,530.311269 1069.69015,522.367351 1074.12475,526.230883 C1078.55935,530.094415 1036.42637,549.412076 1078.55506,549.412076 C1120.68375,549.412076 1282.26499,553.275608 1362.05275,553.275608 C1415.24459,553.275608 1454.88531,557.654278 1480.97492,566.411617 C1454.3974,588.92992 1431.73073,601.126048 1412.97492,603 C1298.76247,614.411322 1138.55263,593 951.974916,593 C855.308249,602.333333 824.155383,589.091869 858.516319,553.275608 Z"
fill="#FFB493"
transform="translate(1162.987458, 553.293021) scale(-1, 1) translate(-1162.987458, -553.293021) "
/>
<path
id="Path-2"
d="M-53.8848338,566.411617 C-21.8848338,566.411617 486.348425,557.911847 493.739424,553.275608 C501.130422,548.639369 502.479959,545.067279 503.219058,535.022095 C503.958158,524.976912 482.541418,519.022727 485.497817,510.522956 C488.454217,502.023185 472.326257,475.236893 485.497817,475.236893 C490.696306,475.236893 496.652685,473.050991 502.228207,471.267352 C510.779544,468.531733 518.434981,466.742365 521.086118,475.236893 C525.465812,489.269902 533.501423,516.046163 524.632225,510.522956 C515.763027,504.999749 507.043221,512.55069 512.21692,519.390786 C517.390619,526.230883 533.650816,512.322167 521.086118,526.230883 C508.521421,540.139599 527.939231,549.412076 534.969616,549.412076 C542,549.412076 580.405242,553.275608 660.193,553.275608 C713.384839,553.275608 753.025561,557.654278 779.115166,566.411617 C449.652192,582.137206 168.652192,590 -63.8848338,590 C-131.579295,590 -89.8848338,566.411617 -53.8848338,566.411617 Z"
fill="#FFB493"
/>
<path
id="Rectangle-7"
d="M1,582 C437.800642,571.552576 696.133975,566.219243 776,566 C793.854245,565.950988 794.444815,491.443886 784,474 C774.223177,457.671727 719,419 759,434 C792.39464,446.52299 794.387945,434 805,434 C815.451449,434 828.950628,454.899462 844,442 C855.594238,432.062082 880,423 887,442 C894,461 887,469 876,474 C842.354395,489.293457 839,526 851,564 C859,589.333333 1062.66667,595.333333 1462,582 L1462,921 L1,921 L1,582 Z"
fill="#89D8F1"
/>
<ellipse
id="eye-1"
fill="#FBFAED"
cx="512.5"
cy="486.5"
rx="2.5"
ry="4.5"
/>
<path
id="Path-3"
d="M897,405 C909,391.666667 917,388.666667 921,396 C925,403.333333 917,406.333333 897,405 Z"
fill="#89D8F1"
/>
<path
id="Path-4"
d="M889,427 C901,431 907,436.333333 907,443 C907,453 931,458 936,443 C941,428 936,416 916,418 C902.666667,419.333333 893.666667,422.333333 889,427 Z"
fill="#89D8F1"
/>
<path
id="Path-5"
d="M730,435.859375 C713.814815,436.286458 708.185185,440.583333 713.111111,448.75 C718.037037,456.916667 723.666667,452.619792 730,435.859375 Z"
fill="#89D8F1"
/>
<ellipse
id="eye-2"
fill="#FBFAED"
transform="translate(1265.000000, 514.000000) rotate(46.000000) translate(-1265.000000, -514.000000) "
cx="1265"
cy="514"
rx="2"
ry="3"
/>
</g>
</g>
</svg>
</div>
</div>
</template>

<script>
import "assets/icons/chevron-right";
export default {
layout: "error",
props: ["error"],
};
</script>
<style lang="scss" scoped>
@import url("https://fonts.googleapis.com/css2?family=Just+Me+Again+Down+Here&display=swap");
.container {
@extend %container;
}
.navbar {
border-bottom: 1px solid palette(grey, 700);
display: block;
svg {
max-width: 120px;
height: auto;
padding: 1em;
}
}
<styles lang="scss" scoped>
.error {
position: relative;
min-height: calc(100vh - 8em);
background-size: 100%;
min-height: 100vh;
background: palette(white);
&__content {
max-width: 700px;
&__container {
@extend %container;
margin: auto;
padding: 0 $base-space * 3;
}
&--bg {
position: absolute;
width: 100%;
bottom: -8em;
pointer-events: none;
svg {
width: 100%;
height: auto;
display: block;
&__logo {
max-width: 150px;
path {
fill: $brand-primary-color;
}
}
&__link {
color: $primary-color;
text-decoration: none;
@include font-size(18px);
&:hover {
text-decoration: underline;
&__code {
position: absolute;
left: -3vw;
color: palette(white);
font-family: $secondary-font-family;
text-shadow: 0 0 2px $brand-primary-color;
font-size: 34vw;
line-height: 1em;
@include media("<desktop") {
position: relative;
left: 0;
margin-left: $base-space * 3;
margin-bottom: 0.4em;
@include font-size(75px);
color: $brand-primary-color;
text-shadow: none;
}
}
&__pill {
display: inline-block;
border: 1px solid #ffe5d9;
padding: 5px 10px;
border: 1px solid $brand-primary-color;
border-radius: 20px;
margin-bottom: 20px;
color: $brand-primary-color;
}
&__title {
display: block;
margin-right: 1em;
margin-top: 0 !important;
padding-top: 0 !important;
margin-bottom: 1em;
@include font-size(32px);
line-height: 1.2em;
margin: 0;
font-family: $secondary-font-family;
@include font-size(75px);
line-height: 1em;
}
&__subtitle {
&__text {
display: block;
font-weight: lighter;
margin-top: 0 !important;
margin-bottom: 1em;
@include font-size(32px);
line-height: 1.2em;
}
&__text {
font-family: "Just Me Again Down Here";
color: #4c10bc;
font-size: 4.2rem;
line-height: 0.8em;
margin-top: 0;
margin-bottom: 0.5em;
margin-left: calc(4 / 12 * 100%);
@include font-size(20px);
font-weight: lighter;
line-height: 1.5em;
@include media("<desktop") {
margin-left: 0;
}
}
&__links {
font-weight: bold;
list-style: none;
&__button {
display: inline-flex;
align-items: center;
gap: $base-space;
padding: 12px 20px;
border-radius: $border-radius;
background: $brand-primary-color;
border: 0;
outline: 0;
text-decoration: none;
padding-left: 0;
li {
margin-bottom: 1em;
}
a {
text-decoration: none;
@include font-size(15px);
color: palette(white);
@include font-size(16px);
font-weight: 600;
&:hover {
background: darken($brand-primary-color, 5%);
}
.svg-icon {
margin-left: 0.5em;
@include media(">desktop") {
margin-left: calc(4 / 12 * 100%);
}
}
:deep(.footer) {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
}
#eye-1 {
animation: animateEye1 3s infinite 3s;
}
#eye-2 {
animation: animateEye2 3s infinite;
}
@keyframes animateEye1 {
0% {
ry: 4.5;
}
5% {
ry: 0;
}
10% {
ry: 4.5;
}
100% {
ry: 4.5;
}
}
@keyframes animateEye2 {
0% {
ry: 3.5;
}
5% {
ry: 0;
}
10% {
ry: 3.5;
}
100% {
ry: 3.5;
&__content {
position: relative;
max-width: 500px;
margin-left: calc(6 / 12 * 100%);
margin-top: 4vh;
@include media("<desktop") {
margin-left: 0;
}
}
}
</style>
</styles>

0 comments on commit caeb7d4

Please sign in to comment.