Merge pull request #908 from WestpacGEL/fix/style-fixes

Fix/style fixes
WestpacGEL · Oct 16, 2024 · a4750a9 · a4750a9
2 parents b07a2b8 + 17e78d6
commit a4750a9
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 29 deletions.
diff --git a/apps/protoform/src/app/credit-cards/review-and-submit/page.tsx b/apps/protoform/src/app/credit-cards/review-and-submit/page.tsx
@@ -86,7 +86,7 @@ export default function Address() {
         Review and submit
       </CustomHeading>
       <ReviewSection baseEditRoute="/credit-cards" sections={SECTION_ITEMS} />
-      <div className="border-t-[1px] border-t-border pt-5">
+      <div className="border-t border-t-border pt-5">
         <PhoneIcon color="primary" size="large" className="mb-5" />
         <h3 className="typography-body-8 pb-5 font-bold text-heading">Help protect your application</h3>
         <p>Before continuing we’ll send you a one-time passcode to your mobile for added security.</p>

diff --git a/apps/protoform/src/app/layout.tsx b/apps/protoform/src/app/layout.tsx
@@ -8,7 +8,7 @@ import { SidebarContextProvider } from '@/components/sidebar/context';
 import { Sidebar } from '@/components/sidebar/sidebar';
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
+  title: 'Protoform',
   description: 'Generated by create next app',
 };
 
@@ -20,7 +20,7 @@ export default function RootLayout({
   return (
     <html lang="en" data-theme="wbc">
       <body>
-        <main className="m-auto max-w-[1922px] border border-white">
+        <main className="m-auto max-w-[1923px] border border-border border-y-0 overscroll-y-none">
           <CustomHeader />
           <SidebarContextProvider>
             <Sidebar />

diff --git a/apps/protoform/src/components/content-wrapper/content-wrapper.tsx b/apps/protoform/src/components/content-wrapper/content-wrapper.tsx
@@ -30,7 +30,7 @@ export function ContentWrapper({ children }: { children: ReactNode }) {
   return (
     <section
       className={clsx(
-        'min-h-screen before:pointer-events-none before:sticky before:inset-x-auto before:top-[66px] before:z-10 before:block before:h-1 before:bg-gradient-to-b before:from-black/[.2] before:from-0% before:opacity-0 before:transition-[opacity] before:duration-200 before:will-change-[opacity]',
+        'min-h-[90vh] before:pointer-events-none before:sticky before:inset-x-auto before:top-[66px] before:z-10 before:block before:h-1 before:bg-gradient-to-b before:from-black/[.2] before:from-0% before:opacity-0 before:transition-[opacity] before:duration-200 before:will-change-[opacity]',
         {
           'md:mr-[300px] before:right-[300px]': open,
           'md:before:opacity-100': scrolled,
@@ -42,7 +42,7 @@ export function ContentWrapper({ children }: { children: ReactNode }) {
       <GridContainer>
         <Grid>
           <GridItem span={{ initial: 12, sm: 8, md: 8, lg: 6 }} start={{ initial: 1, sm: 3, md: 3, lg: 4 }}>
-            <div className="md:h-10"></div>
+            <div className="md:h-10 overscroll-x-none"></div>
             {children}
           </GridItem>
         </Grid>

diff --git a/apps/protoform/src/components/custom-footer/custom-footer.tsx b/apps/protoform/src/components/custom-footer/custom-footer.tsx
@@ -11,24 +11,24 @@ export function CustomFooter() {
   return (
     <Footer
       brand="wbc"
-      className={clsx('relative bottom-0 z-[58] w-full border-t-border bg-white pb-0', {
+      className={clsx('relative bottom-0 z-10 w-full border-t-border bg-white pb-0', {
         'md:w-[calc(100%-301px)]': open,
       })}
       hideLogo
     >
-      <div className="flex">
-        <SecurityIcon
-          size={{ initial: 'small', md: 'medium' }}
-          className="float-left shrink-0 max-md:mr-1 md:mr-2"
-          color="borderDark"
-        />
-        <p className="typography-body-10 text-muted">
-          Our site and your transactions are secure. You can read our{' '}
-          <Link href="#" type="inline">
-            security information
-          </Link>
-          . <br /> © 2024 Westpac Banking Corporation ABN 33 007 457 141 AFSL and Australian credit licence 233714.
-        </p>
+      <div className="relative">
+        <div className="float-left flex-none">
+          <SecurityIcon size="small" className="float-left mr-1 shrink-0" color="muted" />
+        </div>
+        <div className="flex">
+          <p className="relative flex-1 typography-body-10 text-muted">
+            Our site and your transactions are secure. You can read our{' '}
+            <Link href="#" type="inline">
+              security information
+            </Link>
+            . <br /> © 2023 Westpac Banking Corporation ABN 33 007 457 141 AFSL and Australian credit licence 233714.
+          </p>
+        </div>
       </div>
     </Footer>
   );

diff --git a/apps/protoform/src/components/custom-header/custom-header.tsx b/apps/protoform/src/components/custom-header/custom-header.tsx
@@ -2,11 +2,12 @@
 
 import { Button, Header } from '@westpac/ui';
 import { BREAKPOINTS } from '@westpac/ui/themes-constants';
-import { useRouter } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
 export function CustomHeader() {
   const router = useRouter();
+  const pathname = usePathname();
   const [isMobile, setIsMobile] = useState(true);
 
   const updateSize = () => {
@@ -22,10 +23,10 @@ export function CustomHeader() {
   return (
     <Header
       brand="wbc"
-      leftIcon={isMobile ? 'arrow' : undefined}
+      leftIcon={'arrow'}
       leftOnClick={() => router.back()}
       logoLink="/"
-      className="z-[100] m-auto max-w-[1922px] md:fixed md:top-0 w-full"
+      className="z-[100] m-auto max-w-[1921px] md:fixed md:top-0 w-full"
     >
       <Button look="faint" size={{ initial: 'small', sm: 'medium' }} soft>
         Sign Out

diff --git a/apps/protoform/src/components/sidebar/sidebar.tsx b/apps/protoform/src/components/sidebar/sidebar.tsx
@@ -1,11 +1,11 @@
 'use client';
-
 import { Button, ProgressRope } from '@westpac/ui';
 import { CloseIcon, MoreVertIcon } from '@westpac/ui/icon';
 import { BREAKPOINTS } from '@westpac/ui/themes-constants';
 import { clsx } from 'clsx';
 import throttle from 'lodash.throttle';
 import { usePathname } from 'next/navigation';
+import React from 'react';
 import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 
 import { useSidebar } from './context';
@@ -84,7 +84,7 @@ export function Sidebar({ children }: { children?: ReactNode }) {
       <>
         <div
           className={clsx(
-            'items-center sticky top-0 z-10 flex h-9 justify-between bg-white px-2 py-3 after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:z-10 after:block after:h-1 after:bg-gradient-to-b after:from-black/[.2] after:from-0% after:opacity-0 after:transition-all after:duration-200 after:will-change-[opacity] xsl:px-4 sm:px-5 md:hidden',
+            'sticky top-0 flex h-9 justify-between bg-white px-2 py-3 after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:z-10 after:block after:h-1 after:bg-gradient-to-b after:from-black/[.2] after:from-0% after:opacity-0 after:transition-all after:duration-200 after:will-change-[opacity] xsl:px-4 sm:px-5 md:hidden',
             { 'after:opacity-100': scrolled },
           )}
         >
@@ -105,7 +105,7 @@ export function Sidebar({ children }: { children?: ReactNode }) {
           <>
             <div
               className={clsx(
-                'fixed inset-y-0 w-[300px] overflow-auto border-l-[1px] border-t-[1px] border-border bg-white transition-transform duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] before:pointer-events-none before:sticky before:inset-x-0 before:top-0 before:z-50 before:block before:h-1 before:bg-gradient-to-b before:from-black/[.2] before:from-0% before:opacity-0 before:transition-all before:duration-200 before:will-change-[opacity] max-md:z-[100] md:mt-11',
+                'fixed inset-y-0 w-[300px] overflow-auto border-l-[1px] border-border bg-white transition-transform duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] before:pointer-events-none before:sticky before:inset-x-0 before:top-0 before:z-50 before:block before:h-1 before:bg-gradient-to-b before:from-black/[.2] before:from-0% before:opacity-0 before:transition-all before:duration-200 before:will-change-[opacity] max-md:z-[100] md:mt-11 overscroll-contain',
                 {
                   'before:opacity-100': sidebarScrolled,
                   'max-md:translate-x-full': !open,

diff --git a/apps/site/src/app/design-system/[brand]/layout.tsx b/apps/site/src/app/design-system/[brand]/layout.tsx
@@ -29,7 +29,7 @@ export default async function DesignSystemLayout({
       <SkipLink href="#content" className="z-[100]">
         Skip to content
       </SkipLink>
-      <div className="text-text active-theme-stg:text-heading flex min-h-screen flex-col">
+      <div className="flex min-h-screen flex-col text-text active-theme-stg:text-heading">
         <SidebarContextProvider>
           <Suspense>
             <Sidebar items={formattedItems} brand={brand} />

diff --git a/packages/ui/src/components/badge/badge.spec.tsx b/packages/ui/src/components/badge/badge.spec.tsx
@@ -12,7 +12,7 @@ describe('Badge', () => {
     const style = styles({ color: 'primary', type: 'pill' });
     // TODO: use some variants for test
     expect(style).toBe(
-      'whitespace-nowrap border text-center border-primary bg-primary text-white typography-body-10 flex h-4 items-center rounded-xl px-[0.4375rem] font-medium leading-none',
+      'whitespace-nowrap border text-center border-primary bg-primary text-white typography-body-10 flex h-4 w-fit items-center rounded-xl px-[0.4375rem] font-medium leading-none',
     );
   });
 });
diff --git a/packages/ui/src/components/badge/badge.styles.ts b/packages/ui/src/components/badge/badge.styles.ts
@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'inline-block whitespace-nowrap border text-center',
+    base: 'inline-block w-fit whitespace-nowrap border text-center',
     variants: {
       color: {
         danger: 'border-danger bg-danger text-white',
@@ -24,7 +24,7 @@ export const styles = tv(
         'warning-inverted': 'border-none bg-white text-warning',
       },
       type: {
-        pill: 'typography-body-10 flex h-4 items-center rounded-xl px-[0.4375rem] font-medium leading-none',
+        pill: 'typography-body-10 flex h-4 w-fit items-center rounded-xl px-[0.4375rem] font-medium leading-none',
         default: 'h-[1.25rem] rounded-sm px-1 text-[0.75rem] leading-[1.125rem]',
       },
       soft: {