Merge pull request #767 from DTS-STN/stefan/adjust-page-alerts

Adjust alert position for page alerts, add slate background.
DTS-STN · Nov 14, 2024 · 67742fe · 67742fe
2 parents 6244208 + f4830c7
commit 67742fe
Show file tree

Hide file tree

Showing 14 changed files with 46 additions and 32 deletions.
diff --git a/src/components/AlertBlock.tsx b/src/components/AlertBlock.tsx
@@ -14,17 +14,19 @@ const AlertBlock = ({ page, className }: AlertBlockProps) => {
   const { data } = useAlerts({ page })
   const { i18n } = useTranslation()
 
-  return (
-    <div className={className}>
+  return data && data.length > 0 ? (
+    <div className={`${className} pt-4`}>
       {data?.map(({ textEn, textFr, type, uid }) => {
         const markdown = i18n.language === 'fr' ? textFr : textEn
         return (
-          <AlertSection key={uid} type={type} className="mb-4 mt-4">
+          <AlertSection key={uid} type={type} background>
             <MarkdownContent markdown={markdown} />
           </AlertSection>
         )
       })}
     </div>
+  ) : (
+    <></>
   )
 }
 

diff --git a/src/components/AlertSection.tsx b/src/components/AlertSection.tsx
@@ -7,6 +7,7 @@ import { AlertType } from '../lib/types'
 export interface AlertSectionProps extends PropsWithChildren {
   type: AlertType
   className?: string
+  background?: boolean
 }
 
 const borderColors = {
@@ -17,18 +18,22 @@ const borderColors = {
 }
 
 const svgStyles = {
-  danger: '-translate-x-3 translate-y-10',
-  warning: '-translate-x-3 translate-y-10',
-  success: '-translate-x-3 translate-y-10',
-  info: '-translate-x-3 translate-y-10',
+  danger: '-translate-x-3 translate-y-3',
+  warning: '-translate-x-3 translate-y-3',
+  success: '-translate-x-3 translate-y-3',
+  info: '-translate-x-3 translate-y-3',
 }
 
-const SVG = (type: AlertType, lang: string) => {
+const SVG = (
+  type: AlertType,
+  lang: string,
+  background: boolean | undefined,
+) => {
   switch (type) {
     case 'danger': {
       return (
         <svg
-          className="h-8 w-8 bg-white fill-accent-error p-1"
+          className={`${background ? 'bg-slate-100' : 'bg-white'} h-8 w-8 fill-accent-error p-1`}
           viewBox="0 0 100 100"
           xmlns="http://www.w3.org/2000/svg"
           role="img"
@@ -41,7 +46,7 @@ const SVG = (type: AlertType, lang: string) => {
     case 'success': {
       return (
         <svg
-          className="h-8 w-8 bg-white fill-accent-success p-1"
+          className={`${background ? 'bg-slate-100' : 'bg-white'} h-8 w-8 fill-accent-success p-1`}
           viewBox="0 0 512 512"
           xmlns="http://www.w3.org/2000/svg"
           role="img"
@@ -54,7 +59,7 @@ const SVG = (type: AlertType, lang: string) => {
     case 'warning': {
       return (
         <svg
-          className="h-8 w-8 bg-white fill-accent-warning p-1"
+          className={`${background ? 'bg-slate-100' : 'bg-white'} h-8 w-8 fill-accent-warning p-1`}
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
           role="img"
@@ -69,7 +74,7 @@ const SVG = (type: AlertType, lang: string) => {
     case 'info': {
       return (
         <svg
-          className="h-8 w-8 bg-white fill-accent-info p-1"
+          className={`${background ? 'bg-slate-100' : 'bg-white'} h-8 w-8 fill-accent-info p-1`}
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 512 512"
           role="img"
@@ -82,18 +87,25 @@ const SVG = (type: AlertType, lang: string) => {
   }
 }
 
-const AlertSection = ({ children, type, className }: AlertSectionProps) => {
+const AlertSection = ({
+  children,
+  type,
+  className,
+  background,
+}: AlertSectionProps) => {
   const { i18n } = useTranslation()
 
   const borderColor = borderColors[type]
 
   return (
-    <div className={`${className} pl-2`}>
-      <div className={`${svgStyles[type]} -mt-8 w-8`}>
-        {SVG(type, i18n.language)}
+    <div
+      className={`${className} pl-4 ${background ? 'bg-slate-100' : 'bg-white'}`}
+    >
+      <div className={`${svgStyles[type]} w-8 bg-transparent`}>
+        {SVG(type, i18n.language, background)}
       </div>
-      <section className={`border-l-8 pb-0.5 pt-2 ${borderColor}`}>
-        <div className="mb-2 ml-4">{children}</div>
+      <section className={`-mt-8 border-l-8 pb-0.5 pt-2 ${borderColor}`}>
+        <div className="ml-4">{children}</div>
       </section>
     </div>
   )

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -20,7 +20,7 @@ const Layout = ({ children }: LayoutProps) => {
       <main
         role="main"
         id="mainContent"
-        className="container mx-auto mt-5 flex-1 px-4 pb-8"
+        className="container mx-auto flex-1 px-4 pb-8"
       >
         <AlertBlock />
         {children}

diff --git a/src/components/check-status-responses/CheckStatusFileBeingProcessed.tsx b/src/components/check-status-responses/CheckStatusFileBeingProcessed.tsx
@@ -7,10 +7,10 @@ export const CheckStatusFileBeingProcessed = () => {
   const { t } = useTranslation(['status', 'common'])
   return (
     <>
+      <AlertBlock page="status-processing" />
       <h1 data-testid="being-processed" className="h1" tabIndex={-1}>
         {t('being-processed.received')}
       </h1>
-      <AlertBlock page="status-processing" />
       <p>
         <Trans
           i18nKey={'being-processed.received-will-not-change'}

diff --git a/src/components/check-status-responses/CheckStatusNoRecord.tsx b/src/components/check-status-responses/CheckStatusNoRecord.tsx
@@ -7,10 +7,10 @@ export const CheckStatusNoRecord = () => {
   const { t } = useTranslation(['status', 'common'])
   return (
     <>
+      <AlertBlock page="status-not-found" />
       <h1 data-testid="no-record" className="h1" tabIndex={-1}>
         {t('no-record.cannot-give-status.description')}
       </h1>
-      <AlertBlock page="status-not-found" />
       <p>{t('no-record.cannot-give-status.because')}</p>
       <ul className="mb-5 list-disc space-y-2 pl-10">
         <li>

diff --git a/src/components/check-status-responses/CheckStatusNotAcceptable.tsx b/src/components/check-status-responses/CheckStatusNotAcceptable.tsx
@@ -7,10 +7,10 @@ export const CheckStatusNotAcceptable = () => {
   const { t } = useTranslation(['status', 'common'])
   return (
     <>
+      <AlertBlock page="status-invalid" />
       <h1 data-testid="not-acceptable" className="h1" tabIndex={-1}>
         {t('not-acceptable.cannot-process')}
       </h1>
-      <AlertBlock page="status-invalid" />
       <p>{t('not-acceptable.explanation')}</p>
       <p>
         <Trans

diff --git a/src/components/check-status-responses/CheckStatusPrinting.tsx b/src/components/check-status-responses/CheckStatusPrinting.tsx
@@ -6,10 +6,10 @@ export const CheckStatusPrinting = () => {
   const { t } = useTranslation('status')
   return (
     <>
+      <AlertBlock page="status-ready-pickup" />
       <h1 data-testid="printing" className="h1" tabIndex={-1}>
         {t('printing.in-printing')}
       </h1>
-      <AlertBlock page="status-ready-pickup" />
       <p>{t('printing.reviewed-printing')}</p>
       <p>{t('printing.print-update')}</p>
     </>

diff --git a/src/components/check-status-responses/CheckStatusReadyForPickup.tsx b/src/components/check-status-responses/CheckStatusReadyForPickup.tsx
@@ -7,11 +7,11 @@ export const CheckStatusReadyForPickup = () => {
   const { t } = useTranslation('status')
   return (
     <>
+      <AlertBlock page="status-ready-pickup" />
       <h1 data-testid="ready-for-pickup" className="h1" tabIndex={-1}>
         {t('ready-for-pickup.has-been-printed')}
       </h1>
       <p>{t('ready-for-pickup.has-been-printed')}</p>
-      <AlertBlock page="status-ready-pickup" />
       <AlertSection type="success" className="mb-8">
         <h2 data-testid="check-receipt" className="h2 mt-0">
           {t('ready-for-pickup.check-receipt')}

diff --git a/src/components/check-status-responses/CheckStatusShippingCanadaPost.tsx b/src/components/check-status-responses/CheckStatusShippingCanadaPost.tsx
@@ -15,10 +15,10 @@ export const CheckStatusShippingCanadaPost = ({
 
   return (
     <>
+      <AlertBlock page="status-shipped-canada" />
       <h1 data-testid="printed-and-mailed" className="h1" tabIndex={-1}>
         {t('shipped-canada-post.header')}
       </h1>
-      <AlertBlock page="status-shipped-canada" />
       <p>{t('shipped-canada-post.header')}.</p>
       <AlertSection className="mb-4" type="success">
         <h2 data-testid="shipped-canada-post" className="h2 mt-0">

diff --git a/src/components/check-status-responses/CheckStatusShippingFedex.tsx b/src/components/check-status-responses/CheckStatusShippingFedex.tsx
@@ -14,10 +14,10 @@ export const CheckStatusShippingFedex = ({
   const { t } = useTranslation(['status', 'common'])
   return (
     <>
+      <AlertBlock page="status-shipped-fedex" />
       <h1 data-testid="shipped-fedex" className="h1" tabIndex={-1}>
         {t('shipped-fedex.header')}
       </h1>
-      <AlertBlock page="status-shipped-fedex" />
       <p>{t('shipped-fedex.header')}.</p>
       <AlertSection type="success">
         <h2 data-testid="shipped-fedex-mailing" className="h2 mt-0">

diff --git a/src/pages/email.tsx b/src/pages/email.tsx
@@ -148,10 +148,10 @@ const Email = () => {
 
       {isEmailEsrfSuccess ? (
         <div id="response-result">
+          <AlertBlock page="email" />
           <h1 className="h1" tabIndex={-1}>
             {t('email-confirmation-msg.request-received.header')}
           </h1>
-          <AlertBlock page="email" />
           <div className="max-w-prose">
             <p>
               <Trans
@@ -211,10 +211,10 @@ const Email = () => {
         </div>
       ) : (
         <div>
+          <AlertBlock page="email" />
           <h1 className="h1" tabIndex={-1}>
             {t('header')}
           </h1>
-          <AlertBlock page="email" />
           <form onSubmit={handleFormikSubmit} id="form-email-esrf">
             <p className="max-w-prose">
               <Trans i18nKey="header-messages.matches" ns="email" />

diff --git a/src/pages/expectations.tsx b/src/pages/expectations.tsx
@@ -34,8 +34,8 @@ const Expectations = () => {
         additionalMetaTags={[getDCTermsTitle(t('header'))]}
       />
       <Layout>
-        <h1 className="h1">{t('header')}</h1>
         <AlertBlock page="expectations" />
+        <h1 className="h1">{t('header')}</h1>
         <div className="max-w-prose">
           <p>
             <Trans i18nKey="thank-you" ns="expectations" />

diff --git a/src/pages/landing.tsx b/src/pages/landing.tsx
@@ -20,8 +20,8 @@ const Landing = () => {
         title={t('header')}
         additionalMetaTags={[getDCTermsTitle(t('header'))]}
       />
-      <h1 className="h1">{t('header')}</h1>
       <AlertBlock page="landing" />
+      <h1 className="h1">{t('header')}</h1>
       <div className="max-w-prose">
         <p>
           <strong>{t('do-you-have.question')}</strong>
@@ -178,7 +178,7 @@ const Landing = () => {
               <li>{t('receipt-3-next-steps.list.item-4')}</li>
             </ul>
           </div>
-        </Collapse>  
+        </Collapse>
         <h3 className="h3 mb-2 mt-8">{t('if-lost.header')}</h3>
         <p>
           <Trans

diff --git a/src/pages/status.tsx b/src/pages/status.tsx
@@ -188,10 +188,10 @@ const Status = () => {
         />
       ) : (
         <>
+          <AlertBlock page="status" />
           <h1 className="h1" tabIndex={-1}>
             {t('header')}
           </h1>
-          <AlertBlock page="status" />
           <form onSubmit={handleFormikSubmit} id="form-get-status">
             <p className="max-w-prose">
               <Trans i18nKey="header-messages.matches" ns="status" />