refactor: Authorization Details Style Updates

frontend/e2e/pages/auth.details.ts

@@ -9,10 +9,6 @@ export const authorization_details_page = async (page: Page) => {
   await page.getByLabel('Search Authorizations').fill('12398')
   await page.getByText('View Facility Details').click()
 
-  await expect(page.getByText('Authorization Status')).toBeVisible()
-  await expect(page.getByText('Active')).toBeVisible()
-  await expect(page.getByText('Authorization Number')).toBeVisible()
-  await expect(page.getByText('12398', { exact: true })).toBeVisible()
   await expect(page.getByText('Effective/Issue Date')).toBeVisible()
   await expect(page.getByText('1994-08-02')).toBeVisible()
   await expect(page.getByText('Last Amendment Date')).toBeVisible()

frontend/src/pages/authorizationDetails/ApplicationStatusSection.css

@@ -3,6 +3,7 @@
   flex-direction: column;
   gap: 8px;
   color: black;
+  width: 100%;
 }
 
 .application-status-box {
@@ -13,6 +14,7 @@
   font-size: 16px;
   gap: 8px 24px;
   padding: var(--layout-padding-large) var(--layout-margin-large);
+  width: 100%;
 }
 
 .application-status-label {

frontend/src/pages/authorizationDetails/ApplicationStatusSection.tsx

@@ -1,6 +1,6 @@
 import { NavLink } from 'react-router-dom'
 import { useSelector } from 'react-redux'
-import { Stack, Typography } from '@mui/material'
+import { Box, Stack, Typography } from '@mui/material'
 
 import OmrrData from '@/interfaces/omrr'
 import {
@@ -30,14 +30,26 @@ export function ApplicationStatusSection({ item }: Readonly<Props>) {
 
   return (
     <div className="application-status-section">
-      <Typography fontSize={12} fontWeight="bold">
+      <Typography fontSize={14} fontWeight="bold">
         Application Status
       </Typography>
+      <Typography fontSize={14} fontWeight="normal" fontStyle="italic">
+        <a
+          href="https://www2.gov.bc.ca/gov/content/environment/waste-management/waste-discharge-authorization/change"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn more
+        </a>{' '}
+        about amendments, notifications and authorizations
+      </Typography>
+
       {allApplications.map((appStatus: OmrrApplicationStatus) => {
         const {
           'Authorization Type': authorizationType,
           'Received Date': receivedDate,
           'Job Tracking Number': trackingNumber,
+          'Job Type': jobType,
           Status: status,
         } = appStatus
         return (
@@ -47,34 +59,36 @@ export function ApplicationStatusSection({ item }: Readonly<Props>) {
               xs: 'column',
               md: 'row',
             }}
+            spacing={4}
             className="application-status-box"
             component="section"
             data-testid="application-status-box"
           >
-            <Typography
-              fontWeight="bold"
-              sx={{
-                flex: 1,
-                marginBottom: {
-                  xs: '16px',
-                  md: 0,
-                },
-              }}
-            >
-              {authorizationType}
-            </Typography>
-            <div className="application-status-label application-status-label--light">
-              Received Date
-            </div>
-            <div className="application-status-value">{receivedDate}</div>
-            <div className="application-status-label application-status-label--light">
-              Status
-            </div>
-            <div className="application-status-value">{status}</div>
+            {/* Column 1: Authorization Type - 50% */}
+            <Stack sx={{ flex: '0 0 50%' }}>
+              <Typography fontWeight="bold" sx={{ marginBottom: '8px' }}>
+                {jobType}
+              </Typography>
+            </Stack>
+
+            {/* Column 2: Received Date - 25% */}
+            <Stack direction="row" spacing={2} sx={{ flex: '0 0 25%' }}>
+              <Box className="application-status-label application-status-label--light">
+                Received Date
+              </Box>
+              <Box className="application-status-value">{receivedDate}</Box>
+            </Stack>
+
+            {/* Column 3: Status - 25% */}
+            <Stack direction="row" spacing={2} sx={{ flex: '0 0 25%' }}>
+              <Box className="application-status-label application-status-label--light">
+                Status
+              </Box>
+              <Box className="application-status-value">{status}</Box>
+            </Stack>
           </Stack>
         )
       })}
-
       <div className="application-status-guidance">
         Applies to amendment and new notifications only,{' '}
         <NavLink to="/guidance" className="application-status-guidance-link">

frontend/src/pages/authorizationDetails/AuthorizationDetails.css

@@ -17,6 +17,7 @@
   border: 1px solid var(--surface-color-border-light);
   background-color: var(--surface-color-brand-gray-10);
   gap: 24px;
+  margin-top: 40px;
 }
 
 .details-note {
@@ -61,3 +62,10 @@ div.organic-matter-grid {
   flex: 1;
   padding-right: 24px;
 }
+
+.details-section-divider {
+  border: none;
+  border-top: 1px solid var(--surface-color-border-light);
+  margin: 0;
+  width: 100%;
+}

frontend/src/pages/authorizationDetails/AuthorizationDetails.test.tsx

@@ -66,7 +66,6 @@ describe('Test suite for AuthorizationDetails', () => {
       'Effective/Issue Date': issueDate,
       'Last Amendment Date': lastAmendmentDate,
       'Facility Location': address,
-      'Authorization Type': authorizationType,
       Latitude,
       Longitude,
     } = item
@@ -75,18 +74,13 @@ describe('Test suite for AuthorizationDetails', () => {
     expect(location.pathname).toBe(`/authorization/${number}`)
     await screen.findByText(name)
 
-    screen.getByText('Authorization Status')
-    screen.getByText('Inactive')
-    screen.getByText('Authorization Number')
-    screen.getByText(number)
     screen.getByText('Effective/Issue Date')
     screen.getByText(issueDate)
     screen.getByText('Last Amendment Date')
     if (lastAmendmentDate) {
       screen.getByText(lastAmendmentDate)
     }
 
-    screen.getByText('Location Details')
     screen.getByText('Facility Location')
     screen.getByText(address)
     screen.getByText('Latitude')
@@ -96,7 +90,6 @@ describe('Test suite for AuthorizationDetails', () => {
 
     screen.getByText('Authorization Details')
     screen.getByText('Authorization Type')
-    screen.getByText(authorizationType)
     screen.getByText('Regulation')
     screen.getByRole('link', { name: 'Organic Matter Recycling Regulation' })
     screen.getByText(/^Please note that authorizations issued/)
@@ -110,20 +103,15 @@ describe('Test suite for AuthorizationDetails', () => {
     const item = mockOmrrData.find(
       (item) => item['Authorization Number'] === number,
     ) as OmrrData
-    const { 'Authorization Type': authorizationType } = item
 
     renderComponent(number)
 
     screen.getByText('Application Status')
     const box = screen.getByTestId('application-status-box')
-    getByText(box, authorizationType)
     getByText(box, 'Received Date')
     getByText(box, '2019-09-27')
     getByText(box, 'Status')
     getByText(box, 'In Review')
-
-    screen.getByText(/^Applies to amendment and new notifications only/)
-    // screen.getByRole('link', { name: 'please see our guidance on data we show' })
   })
 
   it('should render AuthorizationDetails with no documents', async () => {

frontend/src/pages/authorizationDetails/AuthorizationDetails.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 import { useNavigate } from 'react-router'
 import { useParams } from 'react-router-dom'
-import { Grid, Stack, Typography } from '@mui/material'
+import { Stack, Typography, Box } from '@mui/material'
 
 import { useFindByAuthorizationNumber } from '@/features/omrr/omrr-slice'
 import { AuthorizationStatusChip } from '@/components/AuthorizationStatusChip'
@@ -38,6 +38,7 @@ export default function AuthorizationDetails() {
     'Regulated Party': name,
     'Effective/Issue Date': effectiveIssueDate,
     'Last Amendment Date': lastAmendmentDate,
+    'Authorization Type': authorizationType,
   } = item
 
   return (
@@ -54,28 +55,100 @@ export default function AuthorizationDetails() {
       <div>
         <DetailsBackButton />
       </div>
-      <Grid container gap="24px 0">
-        <Grid item xs={12}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+        <Box>
           <Typography fontWeight={700} color="#000" fontSize="36px">
             {name}
           </Typography>
-        </Grid>
-        <DetailsGridLabel label="Authorization Status" xs={6}>
-          <AuthorizationStatusChip status={status} size="small" />
-        </DetailsGridLabel>
-        <DetailsGridLabel label="Authorization Number" xs={6}>
-          {number}
-        </DetailsGridLabel>
-        <DetailsGridLabel label="Effective/Issue Date" xs={6}>
-          {effectiveIssueDate}
-        </DetailsGridLabel>
-        <DetailsGridLabel label="Last Amendment Date" xs={6}>
-          {lastAmendmentDate ?? ''}
-        </DetailsGridLabel>
-      </Grid>
+        </Box>
+      </Box>
 
       <ApplicationStatusSection item={item} />
-      <LocationSection item={item} />
+
+      <Stack
+        direction={{
+          xs: 'column',
+          md: 'row',
+        }}
+        spacing={3}
+        className="details-section"
+        sx={{
+          padding: {
+            xs: '24px 16px',
+            md: '40px',
+          },
+        }}
+      >
+        <Stack spacing={3} sx={{ flex: 1 }}>
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <Typography variant="h5" component="span" fontWeight={700}>
+                Authorization
+              </Typography>
+              <Typography variant="h5" component="span" fontWeight={500}>
+                #: {number}
+              </Typography>
+            </Box>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <Typography variant="h5" component="span" fontWeight={400}>
+                Status:
+              </Typography>
+              <AuthorizationStatusChip status={status} size="small" />
+            </Box>
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: { xs: 'column', md: 'row' },
+                gap: 2,
+              }}
+            >
+              <Box sx={{ flex: 1 }}>
+                <DetailsGridLabel label="Effective/Issue Date">
+                  {effectiveIssueDate}
+                </DetailsGridLabel>
+              </Box>
+              <Box sx={{ flex: 1 }}>
+                <DetailsGridLabel label="Last Amendment Date">
+                  {lastAmendmentDate ?? ''}
+                </DetailsGridLabel>
+              </Box>
+            </Box>
+          </Box>
+
+          <hr className="details-section-divider" />
+
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+            <Box sx={{ width: '100%' }}>
+              <DetailsGridLabel label="Facility Location">
+                <Box
+                  sx={{
+                    width: '100%',
+                    wordBreak: 'break-word',
+                    maxWidth: 'none',
+                  }}
+                >
+                  {item['Facility Location']}
+                </Box>
+              </DetailsGridLabel>
+            </Box>
+            <Box sx={{ display: 'flex', gap: 2 }}>
+              <Box sx={{ flex: 1 }}>
+                <DetailsGridLabel label="Latitude">
+                  {item.Latitude}
+                </DetailsGridLabel>
+              </Box>
+              <Box sx={{ flex: 1 }}>
+                <DetailsGridLabel label="Longitude">
+                  {item.Longitude}
+                </DetailsGridLabel>
+              </Box>
+            </Box>
+          </Box>
+        </Stack>
+
+        <LocationSection item={item} />
+      </Stack>
+
       <DetailsSection item={item} />
       <DocumentsSection item={item} />
       <ContactSection authNumber={number.toString()} />