Merge pull request #698 from AppQuality/new-not-found

New not found

Author: marcbon

src/assets/not_found/404_desktop.svg

@@ -15,7 +15,8 @@ import CampaignPreview from 'src/pages/Campaign/preview';
 import Dashboard from 'src/pages/Dashboard';
 import Project from 'src/pages/Dashboard/Project';
 import LoginPage from 'src/pages/LoginPage';
-import NotFound from 'src/pages/NotFound';
+import NotFound from 'src/pages/NotFound/NotFound';
+import MediaNotFound from 'src/pages/NotFound/MediaNotFound';
 import Service from 'src/pages/Service';
 import Catalog from 'src/pages/Services';
 import Manual from 'src/pages/Manual';
@@ -72,6 +73,10 @@ const Pages = () => {
                   element={<Service />}
                 />
                 {/* No route found */}
+                <Route
+                  path={`/${langPrefix}/media/oops`}
+                  element={<MediaNotFound />}
+                />
                 <Route path={`/${langPrefix}/oops`} element={<NotFound />} />
                 <Route index element={<Dashboard />} />
               </Route>

src/assets/not_found/404_media_desktop.svg

@@ -35,7 +35,11 @@ const ErrorBoundaryPage = () => {
                 </Paragraph>
 
                 <Paragraph style={{ marginTop: theme.space.lg }}>
-                  <Button isPrimary onClick={() => window.location.reload()}>
+                  <Button
+                    isPrimary
+                    isAccent
+                    onClick={() => window.location.reload()}
+                  >
                     {t('__ERROR_PAGE_BUTTON')}
                   </Button>
                 </Paragraph>

src/assets/not_found/404_media_mobile.svg

@@ -0,0 +1,31 @@
+import { styled } from 'styled-components';
+
+export const Container = styled.div<{
+  excludeMarginTop?: boolean;
+  excludeMarginBottom?: boolean;
+}>`
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: ${({ theme }) => theme.palette.grey[100]};
+  padding-bottom: ${({ theme }) =>
+    theme.components.chrome.header
+      .height}; /* Fix to prevent page bottom for being cut because of the chrome fixed header height */
+  margin: ${({ theme }) => theme.space.xxl} auto;
+  ${({ excludeMarginTop }) => excludeMarginTop && `margin-top: 0;`}
+  ${({ excludeMarginBottom }) => excludeMarginBottom && `margin-bottom: 0;`}
+
+  @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
+    margin: ${({ theme }) => theme.space.md} auto;
+    ${({ excludeMarginTop }) => excludeMarginTop && `margin-top: 0;`}
+    ${({ excludeMarginBottom }) => excludeMarginBottom && `margin-bottom: 0;`}
+  }
+`;

src/assets/not_found/404_mobile.svg

@@ -1,38 +1,8 @@
 import React from 'react';
 import { GoogleTagManager } from 'src/common/GoogleTagManager';
-import styled from 'styled-components';
 import { Logged } from './Logged';
 import ErrorBoundary from '../../common/components/ErrorBoundary';
-
-const Container = styled.div<{
-  excludeMarginTop?: boolean;
-  excludeMarginBottom?: boolean;
-}>`
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  ::-webkit-scrollbar {
-    display: none;
-  }
-
-  /* Hide scrollbar for IE, Edge and Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background-color: ${({ theme }) => theme.palette.grey[100]};
-  padding-bottom: ${({ theme }) =>
-    theme.components.chrome.header
-      .height}; /* Fix to prevent page bottom for being cut because of the chrome fixed header height */
-  margin: ${({ theme }) => theme.space.xxl} auto;
-  ${({ excludeMarginTop }) => excludeMarginTop && `margin-top: 0;`}
-  ${({ excludeMarginBottom }) => excludeMarginBottom && `margin-bottom: 0;`}
-
-  @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
-    margin: ${({ theme }) => theme.space.md} auto;
-    ${({ excludeMarginTop }) => excludeMarginTop && `margin-top: 0;`}
-    ${({ excludeMarginBottom }) => excludeMarginBottom && `margin-bottom: 0;`}
-  }
-`;
+import { Container } from './Container';
 
 export const Page = ({
   children,

src/common/Pages.tsx

@@ -1,8 +1,8 @@
 {
   "__404_PAGE_BUTTON": "Back to home",
-  "__404_PAGE_DESCRIPTION": "The page are you looking for might be removed or is temporarily unavailable.",
-  "__404_PAGE_SUB_TITLE MAX:80": "We couldn't find the page that you are looking for",
-  "__404_PAGE_TITLE MAX:10": "Oops!",
+  "__404_PAGE_DESCRIPTION": "Let’s find a better place for you to go.",
+  "__404_PAGE_SUB_TITLE MAX:80": "This page could have been removed or it’s unavailable.",
+  "__404_PAGE_TITLE MAX:10": "We guess this page is lost.",
   "__APP_DAYS_LABEL_one": "day",
   "__APP_DAYS_LABEL_many": "days",
   "__APP_DAYS_LABEL_other": "days",
@@ -738,6 +738,10 @@
   "__LOGIN_FORM_PASSWORD_FORGOT_LABEL": "Forgot your password?",
   "__LOGIN_FORM_PASSWORD_PLACEHOLDER": "Insert your password",
   "__LOGIN_FORM_TITLE": "Log in to UNGUESS",
+  "__MEDIA_404_PAGE_BUTTON": "Back to Home",
+  "__MEDIA_404_PAGE_DESCRIPTION": "This page doesn’t exist or you need permission to view it.",
+  "__MEDIA_404_PAGE_SUB_TITLE MAX:80": "You cannot access this page.",
+  "__MEDIA_404_PAGE_TITLE MAX:10": "Hold up.",
   "__NOTIFICATION_CLOSE_TEXT": "Dismiss",
   "__NOTIFICATION_PROFILE_MODAL_COPY_EMAIL_MESSAGE": "Email address copied to clipboard",
   "__PAGE_BUG_EMPTY_STATE_CTA": "Try another search",

src/common/components/ErrorBoundary/ErrorBoundaryPage.tsx

@@ -1,8 +1,8 @@
 {
-  "__404_PAGE_BUTTON": "Torna alla dashboard",
-  "__404_PAGE_DESCRIPTION": "La pagina che stavi cercando potrebbe essere stata rimossa o temporaneamente non disponibile.",
-  "__404_PAGE_SUB_TITLE MAX:80": "Non siamo riusciti a trovare la pagina che stavi cercando",
-  "__404_PAGE_TITLE MAX:10": "Oops!",
+  "__404_PAGE_BUTTON": "Torna alla Home",
+  "__404_PAGE_DESCRIPTION": "La direzione giusta ora è solo una.",
+  "__404_PAGE_SUB_TITLE MAX:80": "L’abbiamo cercata ovunque ma non è disponibile.",
+  "__404_PAGE_TITLE MAX:10": "Non troviamo questa pagina.",
   "__APP_DAYS_LABEL_one": "giorno",
   "__APP_DAYS_LABEL_many": "giorni",
   "__APP_DAYS_LABEL_other": "giorni",
@@ -760,6 +760,10 @@
   "__LOGIN_FORM_PASSWORD_FORGOT_LABEL": "Password dimenticata?",
   "__LOGIN_FORM_PASSWORD_PLACEHOLDER": "Inserisci password",
   "__LOGIN_FORM_TITLE": "Entra in UNGUESS",
+  "__MEDIA_404_PAGE_BUTTON": "Back to Home",
+  "__MEDIA_404_PAGE_DESCRIPTION": "This page doesn’t exist or you need permission to view it.",
+  "__MEDIA_404_PAGE_SUB_TITLE MAX:80": "You cannot access this page.",
+  "__MEDIA_404_PAGE_TITLE MAX:10": "Hold up.",
   "__NOTIFICATION_CLOSE_TEXT": "Chiudi",
   "__NOTIFICATION_PROFILE_MODAL_COPY_EMAIL_MESSAGE": "Hai copiato l’indirizzo email",
   "__PAGE_BUG_EMPTY_STATE_CTA": "Fai una nuova ricerca",