fix banner

SocialGouv · Mar 20, 2024 · 68474ab · 68474ab
1 parent fbaf626
commit 68474ab
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 20 deletions.
diff --git a/frontend-next/src/app/layout.tsx b/frontend-next/src/app/layout.tsx
@@ -3,6 +3,7 @@ import { type Metadata } from 'next';
 import { marianneFont } from '@/assets/fonts';
 import { Matomo } from '@/components/matomo';
 import { CookieBanner } from '@/components/cookie-banner/cookie-banner';
+import { Suspense } from 'react';
 
 export const metadata: Metadata = {
   openGraph: {
@@ -39,7 +40,9 @@ export default function RootLayout({
     >
       <Matomo />
       <body className='flex h-full flex-col font-app font-medium'>
-        <CookieBanner />
+        <Suspense>
+          <CookieBanner />
+        </Suspense>
         <div className='flex min-h-full flex-col'>{children}</div>
       </body>
     </html>

diff --git a/frontend-next/src/components/cookie-banner/cookie-banner.tsx b/frontend-next/src/components/cookie-banner/cookie-banner.tsx
@@ -68,20 +68,23 @@ export function CookieBanner() {
         <XMarkIcon className='w-6 h-6 cursor-pointer' onClick={closeBanner} />
       </div>
       <div className='mb-4 '>
-        Les cookies nous permettent de vous offrir des fonctionnalités utiles et
-        de mesurer les performances afin d’améliorer votre expérience. Veuillez
-        consulter notre politique de confidentialité pour en savoir plus.
-        <Link
-          className='underline ml-1 font-bold '
-          href='/donnees-personnelles'
-          target='_blank'
-        >
-          Données personnelles
-        </Link>
-        <br />
+        <p>
+          Les cookies nous permettent de vous offrir des fonctionnalités utiles
+          et de mesurer les performances afin d’améliorer votre expérience.
+          Veuillez consulter notre politique de confidentialité pour en savoir
+          plus:{' '}
+          <Link
+            className='underline  mt-2 '
+            href='/donnees-personnelles'
+            target='_blank'
+          >
+            Données personnelles
+          </Link>
+        </p>
+
         <p
           onClick={handleChangePreference}
-          className='underline cursor-pointer'
+          className='underline cursor-pointer mt-2'
         >
           Voir la sélection
         </p>
@@ -98,7 +101,7 @@ export function CookieBanner() {
           </label>
         </div>
       ) : null}
-      <div>
+      <div className='grid md:grid-cols-3 md:gap-2 space-y-1 md:space-y-0'>
         <Button
           className='rounded-none'
           variant='outline'
@@ -107,17 +110,13 @@ export function CookieBanner() {
           Accepter tous les cookies
         </Button>
         <Button
-          className=' ml-4 rounded-none'
+          className='rounded-none'
           variant='outline'
           onClick={acceptSelection}
         >
           Accepter la sélection
         </Button>
-        <Button
-          className=' ml-4 rounded-none'
-          variant='outline'
-          onClick={hideBanner}
-        >
+        <Button className='rounded-none' variant='outline' onClick={hideBanner}>
           Refuser tous les cookies
         </Button>
       </div>