♻️(frontend) extract shared error page styles and reuse ErrorPage

Export action and description styles from ErrorPage and simplify offline page.

src/frontend/apps/impress/src/components/ErrorPage.tsx

@@ -7,7 +7,7 @@ import styled from 'styled-components';
 import { Box, Icon, Text } from '@/components';
 import HomeSvg from '@/icons/house-rounded.svg';
 
-const errorActionStyles = `
+export const errorActionStyles = `
   display: flex;
   height: var(--md, 24px);
   padding: 0 var(--xxxs, 4px);
@@ -37,11 +37,19 @@ const errorActionStyles = `
   }
 `;
 
-const ErrorActionLink = styled.button`
+export const errorDescriptionStyles = `
+  color: var(--c--contextuals--content--semantic--neutral--secondary);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: var(--line-height-xs, 16px);
+  margin-top: 4px;
+`;
+
+export const ErrorActionLink = styled.button`
   ${errorActionStyles}
 `;
 
-const ErrorActionLinkStyled = styled(Link)`
+export const ErrorActionLinkStyled = styled(Link)`
   ${errorActionStyles}
 `;
 
@@ -124,13 +132,7 @@ export const ErrorPage = ({
             $textAlign="center"
             $maxWidth="350px"
             $margin="0"
-            $css="
-              color: var(--c--contextuals--content--semantic--neutral--secondary);
-              font-size: 12px;
-              font-weight: 400;
-              line-height: var(--line-height-xs, 16px);
-              margin-top: 4px;
-            "
+            $css={errorDescriptionStyles}
           >
             {description}
           </Text>

src/frontend/apps/impress/src/features/auth/components/UserReconciliation.tsx

@@ -1,42 +1,18 @@
 import { useTranslation } from 'react-i18next';
-import styled from 'styled-components';
 
 import Error500Svg from '@/assets/icons/500.svg';
 import EmailConfirmationSvg from '@/assets/icons/Mail.svg';
-import { Box, Icon, Loading, Text } from '@/components';
+import {
+  Box,
+  ErrorActionLink,
+  Icon,
+  Loading,
+  Text,
+  errorDescriptionStyles,
+} from '@/components';
 
 import { useUserReconciliationsQuery } from '../api';
 
-const ErrorActionLink = styled.button`
-  display: flex;
-  height: var(--md, 24px);
-  padding: 0 var(--xxxs, 4px);
-  justify-content: center;
-  align-items: center;
-  gap: var(--xxxs, 4px);
-  color: var(--c--contextuals--content--semantic--neutral--tertiary);
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-family: inherit;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: var(--line-height-xs, 16px);
-  text-decoration: none;
-
-  svg {
-    text-decoration: none;
-  }
-
-  .--docs--error-action-label {
-    text-decoration: none;
-  }
-
-  &:hover:not(:disabled) .--docs--error-action-label {
-    text-decoration: underline;
-  }
-`;
-
 interface UserReconciliationProps {
   reconciliationId: string;
   type: 'active' | 'inactive';
@@ -74,13 +50,7 @@ export const UserReconciliation = ({
         $textAlign="center"
         $maxWidth="330px"
         $margin="0"
-        $css="
-          color: var(--c--contextuals--content--semantic--neutral--secondary);
-          font-size: 12px;
-          font-weight: 400;
-          line-height: var(--line-height-xs, 16px);
-          margin-top: 4px;
-        "
+        $css={errorDescriptionStyles}
       >
         {t(
           'To complete the unification of your user accounts, please click the confirmation links sent to all the email addresses you provided.',
@@ -117,13 +87,7 @@ export const UserReconciliation = ({
           $textAlign="center"
           $maxWidth="330px"
           $margin="0"
-          $css="
-            color: var(--c--contextuals--content--semantic--neutral--secondary);
-            font-size: 12px;
-            font-weight: 400;
-            line-height: var(--line-height-xs, 16px);
-            margin-top: 4px;
-          "
+          $css={errorDescriptionStyles}
         >
           {t('An error occurred during email validation.')}
         </Text>

src/frontend/apps/impress/src/features/docs/doc-management/components/DocPage403.tsx

@@ -1,12 +1,18 @@
 import Head from 'next/head';
-import Link from 'next/link';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
 import ErrorAccessDeniedSvg from '@/assets/icons/Docs Locked.svg';
 import BubbleTextSvg from '@/icons/bubble-text.svg';
-import { Box, Loading, Text } from '@/components';
+import {
+  Box,
+  ErrorActionLinkStyled,
+  Loading,
+  Text,
+  errorActionStyles,
+  errorDescriptionStyles,
+} from '@/components';
 import { Role } from '@/docs/doc-management';
 import {
   useCreateDocAccessRequest,
@@ -15,40 +21,6 @@ import {
 import HomeSvg from '@/icons/house-rounded.svg';
 import { useSkeletonStore } from '@/features/skeletons';
 
-const errorActionStyles = `
-  display: flex;
-  height: var(--md, 24px);
-  padding: 0 var(--xxxs, 4px);
-  justify-content: center;
-  align-items: center;
-  gap: var(--xxxs, 4px);
-  color: var(--c--contextuals--content--semantic--neutral--tertiary);
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-family: inherit;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: var(--line-height-xs, 16px);
-  text-decoration: none;
-
-  svg {
-    text-decoration: none;
-  }
-
-  .--docs--error-action-label {
-    text-decoration: none;
-  }
-
-  &:hover:not(:disabled) .--docs--error-action-label {
-    text-decoration: underline;
-  }
-`;
-
-const ErrorActionLinkStyled = styled(Link)`
-  ${errorActionStyles}
-`;
-
 const RequestAccessButton = styled.button`
   ${errorActionStyles}
   color: var(--c--contextuals--content--semantic--brand--tertiary);
@@ -122,13 +94,7 @@ export const DocPage403 = ({ id }: DocProps) => {
             $textAlign="center"
             $maxWidth="350px"
             $margin="0"
-            $css="
-              color: var(--c--contextuals--content--semantic--neutral--secondary);
-              font-size: 12px;
-              font-weight: 400;
-              line-height: var(--line-height-xs, 16px);
-              margin-top: 4px;
-            "
+            $css={errorDescriptionStyles}
           >
             {hasRequested
               ? t('Your access request for this document is pending.')
@@ -141,13 +107,7 @@ export const DocPage403 = ({ id }: DocProps) => {
               $textAlign="center"
               $maxWidth="320px"
               $margin="0"
-              $css="
-                color: var(--c--contextuals--content--semantic--neutral--secondary);
-                font-size: 12px;
-                font-weight: 400;
-                line-height: var(--line-height-xs, 16px);
-                margin-top: 4px;
-              "
+              $css={errorDescriptionStyles}
             >
               {t(
                 "You're currently viewing a sub-document. To gain access, please request permission from the main document.",

src/frontend/apps/impress/src/pages/401.tsx

@@ -5,7 +5,7 @@ import { ReactElement, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import ErrorAccessDeniedSvg from '@/assets/icons/Docs Locked.svg';
-import { Box, Text } from '@/components';
+import { Box, Text, errorDescriptionStyles } from '@/components';
 import { gotoLogin, useAuth } from '@/features/auth';
 import { PageLayout } from '@/layouts';
 import { NextPageWithLayout } from '@/types/next';
@@ -54,13 +54,7 @@ const Page: NextPageWithLayout = () => {
             $textAlign="center"
             $maxWidth="350px"
             $margin="0"
-            $css="
-              color: var(--c--contextuals--content--semantic--neutral--secondary);
-              font-size: 12px;
-              font-weight: 400;
-              line-height: var(--line-height-xs, 16px);
-              margin-top: 4px;
-            "
+            $css={errorDescriptionStyles}
           >
             {t('Sign in to access the document.')}
           </Text>

src/frontend/apps/impress/src/pages/offline/index.tsx

@@ -13,11 +13,9 @@ const Page: NextPageWithLayout = () => {
     <ErrorPage
       icon={Error503Svg}
       title={t('Error 503')}
-      description={t(
-        'The server is temporarily overloaded or unavailable',
-      )}
-      showReload
+      description={t('The server is temporarily overloaded or unavailable')}
       showHome={false}
+      showReload
     />
   );
 };