From d48e34f6fb3c6227cb9cdb1ac274e8f9be04e2ec Mon Sep 17 00:00:00 2001
From: "Carlos Valverde (cvs)" <cvs@odoo.com>
Date: Fri, 4 Dec 2020 13:40:38 +0000
Subject: [PATCH] [IMP] website: 404 page improvement

Current 404 page template has been improved, by adjusting the alignment
of the elements and making a better use of their previous Bootstrap
syntax, in order to have a more readable template.

Task 2409545

closes odoo/odoo#62894

Signed-off-by: Romain Derie <rdeodoo@users.noreply.github.com>
---
 .../views/http_routing_template.xml           | 25 +++++++++++--------
 addons/website/views/website_templates.xml    | 15 ++++++-----
 2 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/addons/http_routing/views/http_routing_template.xml b/addons/http_routing/views/http_routing_template.xml
index 09c5f748db9..0d2f30fc269 100644
--- a/addons/http_routing/views/http_routing_template.xml
+++ b/addons/http_routing/views/http_routing_template.xml
@@ -105,24 +105,27 @@
             <div id="wrap">
                 <t t-raw="0"/>
                 <div class="oe_structure oe_empty">
-                    <section class="pt128 pb104">
+                    <section class="s_text_image pt104 pb104" data-snippet="s_image_text" data-name="Image - Text">
                         <div class="container">
-                            <div class="row">
-                                <div class="col-md-6 text-center text-md-right my-md-auto mb-5 mb-md-0">
-                                    <img class="img img-fluid" src="/http_routing/static/src/img/404.svg"/>
+                            <div class="row align-items-center">
+                                <div class="col-lg-4 pb32">
+                                    <img class="img img-fluid mx-auto" src="/http_routing/static/src/img/404.svg"/>
                                 </div>
-                                <div class="col-md-6 text-center text-md-left my-auto">
+                                <div class="col-lg-8 text-lg-left text-center my-auto">
                                     <h1 class="sr-only">Error 404</h1>
-                                    <h2 class="mb16">We couldn't find the page you're looking for!</h2>
+                                    <h2>We couldn't find the page you're looking for!</h2>
+                                    <p></p>
                                     <p><b>Don't panic.</b> If you think it's our mistake, please send us a message on <a href="/contactus">this page</a>.</p>
                                 </div>
-                                <div class="col-12 pt40 pb24">
-                                    <hr/>
+                                <div class="col-lg-12">
+                                    <div class="s_hr pt32 pb48" data-snippet="s_hr" data-name="Separator">
+                                        <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-top-color: var(--400);"/>
+                                    </div>
                                 </div>
-                                <div class="col-12">
-                                    <p class="text-center pt24">Maybe you were looking for one of these <b>popular pages?</b></p>
+                                <div class="col-lg-12">
+                                    <p class="text-center">Maybe you were looking for one of these <b>popular pages?</b></p>
                                     <ul class="list-inline text-center">
-                                        <li class="list-inline-item mb-2"><a href="/" class="btn btn-secondary">Home</a></li>
+                                        <li class="list-inline-item mb-2"><a href="/" class="btn btn-primary">Home</a></li>
                                     </ul>
                                 </div>
                             </div>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 073b9ed7d47..2b1849f3374 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -2121,16 +2121,19 @@
     1,2,3
 </template>
 
+<!-- PAGE 404 -->
 <template id="page_404" name="Page Not Found">
     <t t-call="http_routing.404">
-        <div class="container o_not_editable">
-            <div class="alert alert-info mt32">
-                <p>This page does not exist, but you can create it as you are administrator of this site.</p>
-                <a role="button" class="btn btn-primary js_disable_on_click post_link" t-attf-href="/website/add/#{ path }#{ from_template and '?template=%s' % from_template }">Create Page</a>
+        <div class="o_not_editable bg-100 pt40">
+            <div class="container">
+                <div class="alert alert-info text-center d-lg-flex justify-content-between align-items-center">
+                    <p class="m-lg-0 text-info">This page does not exist, but you can create it as you are editor of this site.</p>
+                    <a role="button" class="btn btn-info js_disable_on_click post_link" t-attf-href="/website/add/#{ path }#{ from_template and '?template=%s' % from_template }">Create Page</a>
+                </div>
+                <div class="text-center text-muted p-3"><i class="fa fa-info-circle"></i> Edit the content below this line to adapt the default <strong>Page not found</strong> page.</div>
             </div>
-            <div class="text-center text-muted">Edit the content below this line to adapt the default "page not found" page.</div>
+            <hr/>
         </div>
-        <hr/>
     </t>
 </template>