fix: toast placement issue

LetsGetTechnical · Oct 22, 2024 · b6a6e28 · b6a6e28
1 parent b0223ac
commit b6a6e28
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/app/(main)/layout.tsx b/app/(main)/layout.tsx
@@ -51,7 +51,7 @@ const RootLayout = ({
                 </a>
               </div>
             </main>
-            <Toaster position="top-right" containerStyle={{ top: '5rem' }} />
+            <Toaster position="bottom-left" />
           </AuthContextProvider>
         </ErrorBoundary>
       </body>

diff --git a/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx b/app/(main)/league/[leagueId]/entry/[entryId]/week/Week.tsx
@@ -34,6 +34,7 @@ import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import LinkCustom from '@/components/LinkCustom/LinkCustom';
 import { ChevronLeft } from 'lucide-react';
+import Heading from '@/components/Heading/Heading';
 
 /**
  * Renders the weekly picks page.
@@ -43,6 +44,7 @@ import { ChevronLeft } from 'lucide-react';
 // eslint-disable-next-line no-unused-vars
 const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
   const [pickHistory, setPickHistory] = useState<string[]>([]);
+  const [entryName, setEntryName] = useState<string>('');
   const [error, setError] = useState<string | null>(null);
   const [schedule, setSchedule] = useState<ISchedule[]>([]);
   const [selectedLeague, setSelectedLeague] = useState<ILeague | undefined>();
@@ -156,7 +158,8 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
       if (!currentEntry) {
         throw new Error('Entry not found');
       }
-
+
+      setEntryName(currentEntry.name);
       let entryHistory = currentEntry?.selectedTeams || [];
 
       if (currentEntry?.selectedTeams.length > 0) {
@@ -271,10 +274,16 @@ const Week = ({ entry, league, NFLTeams, week }: IWeekProps): JSX.Element => {
             className="flex flex-col items-center w-full pt-8"
             data-testid="weekly-picks"
           >
-            <h1 className="pb-8 text-center text-[2rem] font-bold text-foreground">
-              Week {week} pick
-            </h1>
-
+            <Heading 
+              as='h1'
+              className='pb-8'
+            >{`Week ${week} pick`}
+            </Heading>
+            <Heading
+              as='h2'
+              className='pb-8'
+            >{`Entry ${entryName}`}
+            </Heading>
             {pickHistory.length > 0 && (
               <section
                 className="flex flex-wrap w-[90%] gap-4 overflow-x-scroll justify-center pb-10 items-center"

diff --git a/components/Alert/Alert.tsx b/components/Alert/Alert.tsx
@@ -5,7 +5,7 @@ import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 const alertVariants = cva(
-  'relative w-full max-w-[25rem] rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  'relative w-full md:max-w-[25rem] rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
   {
     variants: {
       variant: {