EZP-32075: redesign error page (#1635)

Co-authored-by: Dariusz Szut <[email protected]>

src/bundle/Resources/public/scss/_error-page.scss

@@ -1,49 +1,57 @@
-.error-page-wrapper {
-    width: 100vw;
+.ez-error-page-wrapper {
+    width: 100%;
     height: 100vh;
-    background: $ibexa-white;
-
-    .error-page {
-        height: 100vh;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
+
+    .ez-error-page {
+        width: 100%;
+
+        &__logo-link {
+            display: inline-block;
+            max-width: calculateRem(88px);
+            max-height: calculateRem(24px);
+            margin-top: calculateRem(15px);
+        }
 
-        &__title {
-            text-align: center;
-            font-size: calculateRem(58px);
+        &__logo-image {
+            display: inline-block;
+            max-width: 100%;
+            width: auto;
+            height: auto;
         }
 
-        &__messages {
+        &__messages-container {
             display: flex;
             flex-direction: column;
-            align-items: center;
+        }
+
+        &__icon {
+            margin-top: calculateRem(100px);
+            margin-bottom: calculateRem(20px);
+        }
+
+        &__title {
+            text-align: center;
+            font-size: calculateRem(32px);
+            margin-bottom: calculateRem(32px);
         }
 
         &__message {
             text-align: center;
-            font-size: calculateRem(16px);
 
             &--title {
-                margin: calculateRem(70px) auto;
-                font-size: calculateRem(45px);
-            }
-
-            &--content {
-                max-width: calculateRem(630px);
+                font-weight: bold;
+                margin-bottom: 0;
             }
 
             &--actions {
-                max-width: calculateRem(700px);
-                margin-top: calculateRem(40px);
-                font-size: calculateRem(21px);
-                line-height: calculateRem(38px);
+                margin-top: calculateRem(80px);
             }
         }
-    }
 
-    &__link {
-        color: #0058ba;
-        text-decoration: none;
+        &--top-section {
+            height: calculateRem(500px);
+            background-color: $ibexa-white;
+            background-image: url('/bundles/ezplatformadminui/img/errors/background.png');
+        }
     }
 }

src/bundle/Resources/translations/forms.en.xliff

@@ -446,6 +446,11 @@
         <target>Segment / Update</target>
         <note>key: role.policy.segment.update</note>
       </trans-unit>
+      <trans-unit id="c105a8689a3c11e6c3cc7840662eab1832989141" resname="role.policy.segment.view_user_segment_list">
+        <source>Segment / View user segment list</source>
+        <target>Segment / View user segment list</target>
+        <note>key: role.policy.segment.view_user_segment_list</note>
+      </trans-unit>
       <trans-unit id="80900cd56c795ae32bc19af548c92ec378d7df63" resname="role.policy.segment_group">
         <source>Segment group</source>
         <target>Segment group</target>

src/bundle/Resources/translations/messages.en.xliff

@@ -212,8 +212,8 @@
         <note>key: error.page.404.title</note>
       </trans-unit>
       <trans-unit id="a599d59a63814826906caa9842f0b3c33db24d09" resname="error.page.default.actions">
-        <source><![CDATA[Contact your Administrator and inform them about the time the error occurred, the URL in your browser window, and anything related that you think may have caused the error.<br/>You can also go back or try to reload the application.]]></source>
-        <target state="new"><![CDATA[Contact your Administrator and inform them about the time the error occurred, the URL in your browser window, and anything related that you think may have caused the error.<br/>You can also go back or try to reload the application.]]></target>
+        <source><![CDATA[<b>Contact your Administrator and inform them about</b><br/> the time the error occurred, the URL in your browser window, and anything related<br/>that you think may have caused the error.<br/>You can also go back or try to reload the application.]]></source>
+        <target state="new"><![CDATA[<b>Contact your Administrator and inform them about</b><br/> the time the error occurred, the URL in your browser window, and anything related<br/>that you think may have caused the error.<br/>You can also go back or try to reload the application.]]></target>
         <note>key: error.page.default.actions</note>
       </trans-unit>
       <trans-unit id="8338c190462d420926edf71e8d4cddcae710d361" resname="error.page.default.message">

src/bundle/Resources/views/themes/admin/ui/error_page/403.html.twig

@@ -5,15 +5,23 @@
 {% block body_class %}ez-has-no-sidebars{% endblock %}
 
 {% block content %}
-<div class="row error-page-wrapper">
-    <div class="container">
-        <div class="row error-page">
-            <h2 class="error-page__title">{{ 'error.page.403.title'|trans|desc('You don\'t have permission') }}</h2>
-            <div class="error-page__messages">                                                                                                      
-                <p class="error-page__message error-page__message--title">{{ 'error.page.403.sub_title'|trans|raw|desc('Not possible to retrieve or access this page.') }}</p>
-                <p class="error-page__message error-page__message--actions">{{ 'error.page.403.actions'|trans({ '%dashboard%': path('ezplatform.dashboard'), '%search%': path('ezplatform.search') })|raw|desc('Please contact your Administrator to request access to this content or modify your profile.<br/>Otherwise, go back to <a class="error-page__link" href="%dashboard%">dashboard</a> or <a class="error-page__link" href="%search%">search</a> for another Content item.') }}</p>
+    <div class="ez-error-page-wrapper">
+        <div class="ez-error-page ez-error-page--top-section">
+            <a href="{{ url('ezplatform.dashboard') }}" class="ez-error-page__logo-link">
+                <img class="ez-error-page__logo-image" src="/bundles/ezplatformadminui/img/ibexa-logo.svg" alt="Ibexa" />
+            </a>
+            <div class="ez-error-page__messages-container">
+                <svg class="ez-error-page__icon">
+                    <use xlink:href="{{ ez_icon_path('error-icon') }}"></use>
+                </svg>
+                <h2 class="ez-error-page__title">{{ 'error.page.403.title'|trans|desc('You don\'t have permission') }}</h2>
+                <p class="ez-error-page__message ez-error-page__message--title">{{ 'error.page.403.sub_title'|trans|raw|desc('Not possible to retrieve or access this page.') }}</p>
             </div>
         </div>
+        <div class="ez-error-page ez-error-page--bottom-section">
+            <p class="ez-error-page__message ez-error-page__message--actions">{{ 'error.page.403.actions'|trans({ '%dashboard%': path('ezplatform.dashboard'), '%search%': path('ezplatform.search') })|raw|desc('Please contact your Administrator to request access to this content or modify your profile.<br/>Otherwise, go back to <a class="error-page__link" href="%dashboard%">dashboard</a> or <a class="error-page__link" href="%search%">search</a> for another Content item.') }}</p>
+        </div>
     </div>
-</div>
 {% endblock %}
+
+

src/bundle/Resources/views/themes/admin/ui/error_page/404.html.twig

@@ -9,16 +9,22 @@
 {% block body_class %}ez-has-no-sidebars{% endblock %}
 
 {% block content %}
-<div class="row error-page-wrapper">
-    <div class="container">
-        <div class="row error-page">
-            <h2 class="error-page__title">{{ 'error.page.404.title'|trans|desc('Page not found') }}</h2>
-            <div class="error-page__messages">
-                <p class="error-page__message error-page__message--title">{{ 'error.page.404.sub_title'|trans|raw|desc('You probably weren\'t expecting to land here.') }}</p>
-                <p class="error-page__message error-page__message--content">{{ 'error.page.404.message'|trans|raw|desc('The page you requested was not found.<br/> It might have been deleted or it is temporarily unavailable.') }}</p>
-                <p class="error-page__message error-page__message--actions">{{ 'error.page.404.actions'|trans({ '%dashboard%': path('ezplatform.dashboard'), '%search%': path('ezplatform.search') })|raw|desc('Check the URL for a typo and try again.<br/>Otherwise, go back to the <a class="error-page__link" href="%dashboard%">dashboard</a> or <a class="error-page__link" href="%search%">search</a> for another Content item.') }}</p>
+    <div class="ez-error-page-wrapper">
+        <div class="ez-error-page ez-error-page--top-section">
+            <a href="{{ url('ezplatform.dashboard') }}" class="ez-error-page__logo-link">
+                <img class="ez-error-page__logo-image" src="/bundles/ezplatformadminui/img/ibexa-logo.svg" alt="Ibexa" />
+            </a>
+            <div class="ez-error-page__messages-container">
+                <svg class="ez-error-page__icon">
+                    <use xlink:href="{{ ez_icon_path('error-icon') }}"></use>
+                </svg>
+                <h2 class="ez-error-page__title">{{ 'error.page.404.title'|trans|desc('Page not found') }}</h2>
+                <p class="ez-error-page__message ez-error-page__message--title">{{ 'error.page.404.sub_title'|trans|raw|desc('You probably weren\'t expecting to land here.') }}</p>
+                <p class="ez-error-page__message ez-error-page__message--content">{{ 'error.page.404.message'|trans|raw|desc('The page you requested was not found.<br/> It might have been deleted or it is temporarily unavailable.') }}</p>
             </div>
         </div>
+        <div class="ez-error-page ez-error-page--bottom-section">
+            <p class="ez-error-page__message ez-error-page__message--actions">{{ 'error.page.404.actions'|trans({ '%dashboard%': path('ezplatform.dashboard'), '%search%': path('ezplatform.search') })|raw|desc('Check the URL for a typo and try again.<br/>Otherwise, go back to the <a class="error-page__link" href="%dashboard%">dashboard</a> or <a class="error-page__link" href="%search%">search</a> for another Content item.') }}</p>
+        </div>
     </div>
-</div>
 {% endblock %}

src/bundle/Resources/views/themes/admin/ui/error_page/unknown.html.twig

@@ -5,16 +5,22 @@
 {% block body_class %}ez-has-no-sidebars{% endblock %}
 
 {% block content %}
-<div class="row error-page-wrapper">
-    <div class="container">
-        <div class="row error-page">
-            <h2 class="error-page__title">{{ 'error.page.default.title'|trans|desc('Something went wrong') }}</h2>
-            <div class="error-page__messages">
-                <p class="error-page__message error-page__message--title">{{ 'error.page.default.sub_title'|trans|raw|desc('We apologize for the internal server error.') }}</p>
-                <p class="error-page__message error-page__message--content">{{ 'error.page.default.message'|trans|raw|desc('The server was unable to complete your request because of an internal problem.') }}</p>
-                <p class="error-page__message error-page__message--actions">{{ 'error.page.default.actions'|trans|raw|desc('Contact your Administrator and inform them about the time the error occurred, the URL in your browser window, and anything related that you think may have caused the error.<br/>You can also go back or try to reload the application.') }}</p>
+    <div class="ez-error-page-wrapper">
+        <div class="ez-error-page ez-error-page--top-section">
+            <a href="{{ url('ezplatform.dashboard') }}" class="ez-error-page__logo-link">
+                <img class="ez-error-page__logo-image" src="/bundles/ezplatformadminui/img/ibexa-logo.svg" alt="Ibexa" />
+            </a>
+            <div class="ez-error-page__messages-container">
+                <svg class="ez-error-page__icon">
+                    <use xlink:href="{{ ez_icon_path('error-icon') }}"></use>
+                </svg>
+                <h2 class="ez-error-page__title">{{ 'error.page.default.title'|trans|desc('Something went wrong') }}</h2>
+                <p class="ez-error-page__message ez-error-page__message--title">{{ 'error.page.default.sub_title'|trans|raw|desc('We apologize for the internal server error.') }}</p>
+                <p class="ez-error-page__message ez-error-page__message--content">{{ 'error.page.default.message'|trans|raw|desc('The server was unable to complete your request because of an internal problem.') }}</p>
             </div>
         </div>
+        <div class="ez-error-page ez-error-page--bottom-section">
+            <p class="ez-error-page__message ez-error-page__message--actions">{{ 'error.page.default.actions'|trans|raw|desc('<b>Contact your Administrator and inform them about</b><br/> the time the error occurred, the URL in your browser window, and anything related<br/>that you think may have caused the error.<br/>You can also go back or try to reload the application.') }}</p>
+        </div>
     </div>
-<div>
 {% endblock %}