Merge branch 'sarahg/404-fixes' into 'main'

Update 404 page copy and styles

See merge request https://gitlab.com/gitlab-org/gitlab-docs/-/merge_requests/3281

Merged-by: Suzanne Selhorn <sselhorn@gitlab.com>
Co-authored-by: Sarah German <sgerman@gitlab.com>

4 files changed, 27 insertions, 57 deletions

diff --git a/content/404.html b/content/404.html
index 9f6c251f..f400f826 100644
--- a/content/404.html
+++ b/content/404.html
@@ -3,25 +3,23 @@ title: Page Not Found | GitLab Documentation
 searchbar: false
 ---
 
-<div class="four-oh-four d-flex justify-content-center">
+<div class="four-oh-four gl-text-center gl-display-flex gl-justify-content-center">
   <div>
-    <img src="<%= @items['/assets/images/error-404.svg'].path %>" alt="404"/>
-    <div id="js-error-message"></div>
-    <br>
+    <img src="<%= @items['/assets/images/error-404.svg'].path %>" width="300" alt="" class="gl-m-auto" />
+    <h1 class="gl-text-theme-indigo-900">We're sorry, no page exists at this address.</h1>
+    <p>To search an older version of the docs, <a href="https://docs.gitlab.com/archives">access an archive</a>.</p>
+
     <% if @config[:algolia] == "true" %>
-    <div class="card search w-100 text-center">
-      <div class="card-body">
-        <h3 class="card-title mb-4">Search the docs</h3>
-        <div id="docsearch" class="mb-3 d-flex justify-content-center"></div>
-      </div>
+    <div class="search-card gl-w-70p gl-pt-6 gl-pb-7 gl-mt-7 gl-mx-auto gl-rounded-lg">
+      <h3 class="gl-mb-5 gl-text-theme-indigo-900">Search the docs</h3>
+      <div id="docsearch" class="gl-display-flex gl-justify-content-center"></div>
     </div>
     <% end %>
-    <div class="d-flex justify-content-center my-4">
-      <a href="javascript:history.back()" class="btn btn-outline-primary">
-        <%= icon('arrow-left') %>
-        Go back
+
+    <div class="gl-mt-8 gl-mb-11">
+      <a href="javascript:history.back()" class="back-btn gl-py-3 gl-px-4 gl-text-purple-600 gl-rounded-small gl-border gl-border-purple-700 gl-transition-slow">
+        <%= icon('arrow-left') %>Go back
       </a>
     </div>
-    <br>
   </div>
 </div>
diff --git a/content/assets/stylesheets/404.scss b/content/assets/stylesheets/404.scss
deleted file mode 100644
index 115c34f1..00000000
--- a/content/assets/stylesheets/404.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-@import 'variables';
-@import 'docsearch';
-
-.four-oh-four {
-  h2 {
-    color: $gds-purple-900;
-  }
-
-  .btn-outline-primary {
-    transition: 0.3s all;
-    border-color: $landing-gl-purple-500;
-    color: $landing-gl-purple-500;
-    fill: $landing-gl-purple-500;
-
-    &:hover {
-      color: $gds-white;
-      fill: $gds-white;
-      background-color: $landing-gl-purple-500;
-    }
-  }
-
-  .search {
-    background: $gds-white;
-    box-shadow: 0 0 0.125rem $landing-gl-black-50, 0 0.5rem 1.5rem $landing-gl-blue-950;
-    border-radius: 0.25rem;
-    width: 65%;
-
-    @media (max-width: $bp-md) {
-      width: 100%;
-    }
-
-    .card-title {
-      font-size: 2rem;
-      color: $gds-purple-900;
-
-      @media (max-width: $bp-xs) {
-        font-size: 2rem;
-      }
-    }
-  }
-}
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 767a7350..44a97ef1 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -572,3 +572,14 @@ a.gl-tab-nav-item:hover {
     z-index: auto;
   }
 }
+
+.four-oh-four {
+  a.back-btn:hover {
+    text-decoration: none;
+    color: $gds-white;
+    background-color: $purple-500;
+  }
+  .search-card {
+    box-shadow: 0 0 0.125rem $landing-gl-black-50, 0 0.25rem 1.5rem $landing-gl-blue-950;
+  }
+}
diff --git a/layouts/404.html b/layouts/404.html
index eaf565d8..fc54df78 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -4,7 +4,6 @@
     <%= render '/head.*' %>
     <meta name="robots" content="noindex">
     <link rel="canonical" href="<%= @config[:base_url] %>/404.html">
-    <link rel="stylesheet" href="<%= @items['/assets/stylesheets/404.*'].path %>">
   </head>
   <body>
     <%= render '/header.*' %>
@@ -17,8 +16,11 @@
     </div>
   </section>
   <script src="<%= @items['/frontend/shared/global_imports.*'].path %>"></script>
+
+  <% if @config[:algolia] == "true" %>
   <script src="<%= @items['/frontend/search/docsearch.*'].path %>"></script>
-  <script src="<%= @items['/frontend/404/404.*'].path %>"></script>
+  <% end %>
+
   <% if production? %>
   <%# Add analytics only in production %>
     <%= render '/analytics.*' %>