feat(404): reorganized + translations

Author: iacopolea

src/assets/not_found/404_media_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_mobile.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/common/Pages.tsx

@@ -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/common/components/ErrorBoundary/ErrorBoundaryPage.tsx

@@ -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,
@@ -68,30 +38,3 @@ export const Page = ({
     </ErrorBoundary>
   </GoogleTagManager>
 );
-
-export const NotLoggedPage = ({
-  children,
-  title = 'UNGUESS - BE SMART FROM THE START',
-  excludeMarginTop,
-  excludeMarginBottom,
-  className,
-}: {
-  children: React.ReactNode;
-  title?: string;
-  excludeMarginTop?: boolean;
-  excludeMarginBottom?: boolean;
-  className?: string;
-}) => (
-  <GoogleTagManager title={title}>
-    <ErrorBoundary>
-      <Container
-        id="container"
-        className={className}
-        excludeMarginTop={excludeMarginTop}
-        excludeMarginBottom={excludeMarginBottom}
-      >
-        {children}
-      </Container>
-    </ErrorBoundary>
-  </GoogleTagManager>
-);

src/features/templates/Container.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",
@@ -115,7 +115,6 @@
   "__BUGS_PAGE_CUSTOM_STATUS_DRAWER_CONFIRM_TOAST": "Changes saved",
   "__BUGS_PAGE_CUSTOM_STATUS_DRAWER_CREATE_CUSTOM_STATUS_BUTTON": "Create a new status",
   "__BUGS_PAGE_CUSTOM_STATUS_DRAWER_CUSTOM_STATUS_REQUIRED": "Choose a name up to 17 characters including spaces.",
-  "__BUGS_PAGE_CUSTOM_STATUS_DRAWER_CUSTOM_STATUS_MAX": "This name is a bit long. We recommend sticking to a maximum of 17 characters including spaces.",
   "__BUGS_PAGE_CUSTOM_STATUS_DRAWER_CUSTOM_STATUS_SUCCESS": "Status changed! Save it to see it on the campaign.",
   "__BUGS_PAGE_CUSTOM_STATUS_DRAWER_DELETE_CUSTOM_STATUS_BUTTON": "Delete status",
   "__BUGS_PAGE_CUSTOM_STATUS_DRAWER_EDIT_COLOR_BUTTON": "Edit color",
@@ -726,6 +725,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",