fix styles

SocialGouv · May 21, 2024 · 26ffd8a · 26ffd8a
1 parent ba6c924
commit 26ffd8a
Show file tree

Hide file tree

Showing 7 changed files with 11,710 additions and 31 deletions.
diff --git a/app/fb-redirection/layout.tsx b/app/fb-redirection/layout.tsx
@@ -1,6 +1,43 @@
 import { DsfrProvider } from "@codegouvfr/react-dsfr/next-appdir/DsfrProvider"
+import Head from "next/head"
+import { StartDsfr } from "~/app/StartDsfr"
+import { DsfrHead } from "@codegouvfr/react-dsfr/next-appdir/DsfrHead"
+import Link from "next/link"
 
+/*
+Note: normally we can't use <Head> with next 14
+but here we don't want to use react dsfr in our whole appn because it's breaking all the styles
+so we use it only in this nested layout
+
+this breaks the pattern for which it was designed so we need to
+- use <Head>
+- patch package @codegouvfr/react-dsfr
+
+
+*/
 export default function Layout({ children }) {
   const lang = "fr"
-  return <DsfrProvider lang={lang}>{children}</DsfrProvider>
+  return (
+    <>
+      <Head>
+        <StartDsfr />
+        <DsfrHead
+          Link={Link}
+          preloadFonts={[
+            //"Marianne-Light",
+            //"Marianne-Light_Italic",
+            "Marianne-Regular",
+            //"Marianne-Regular_Italic",
+            "Marianne-Medium",
+            //"Marianne-Medium_Italic",
+            "Marianne-Bold",
+            //"Marianne-Bold_Italic",
+            //"Spectral-Regular",
+            //"Spectral-ExtraBold"
+          ]}
+        />
+      </Head>
+      <DsfrProvider lang={lang}>{children}</DsfrProvider>
+    </>
+  )
 }
diff --git a/app/fb-redirection/page.tsx b/app/fb-redirection/page.tsx
@@ -297,11 +297,11 @@ export default function Page() {
                 iconId="ri-download-2-fill"
                 priority="secondary"
               >
-                Me renseigner sur les risques liés à la grossesse
+                Me renseigner sur les aides pour diminuer
               </Button>
             }
             size="medium"
-            title="Je suis enceinte"
+            title="Je suis en recherche d’aide pour diminuer"
             titleAs="h3"
           />
           <Card
@@ -317,7 +317,7 @@ export default function Page() {
               </Button>
             }
             size="medium"
-            title="Je souffre de troubles physiques et ou psychologique"
+            title="Je souhaite me sevrer complètement (abstinence à l’alcool)"
             titleAs="h3"
           />
           <Card

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,11 +2,8 @@ import Matomo from "~/components/Matomo"
 import "~/style/default.css"
 import { ANDROID_APP_ID, IOS_APP_ID, ROOT_URL } from "~/constants"
 import type { Metadata } from "next"
-import { DsfrHead } from "@codegouvfr/react-dsfr/next-appdir/DsfrHead"
 import { getHtmlAttributes } from "@codegouvfr/react-dsfr/next-appdir/getHtmlAttributes"
-import { StartDsfr } from "./StartDsfr"
 import { defaultColorScheme } from "./defaultColorScheme"
-import Link from "next/link"
 
 export const metadata: Metadata = {
   title: "Oz Ensemble",
@@ -46,24 +43,6 @@ export default function RootLayout({ children }) {
   const lang = "fr"
   return (
     <html {...getHtmlAttributes({ defaultColorScheme, lang })}>
-      <head>
-        <StartDsfr />
-        <DsfrHead
-          Link={Link}
-          preloadFonts={[
-            //"Marianne-Light",
-            //"Marianne-Light_Italic",
-            "Marianne-Regular",
-            //"Marianne-Regular_Italic",
-            "Marianne-Medium",
-            //"Marianne-Medium_Italic",
-            "Marianne-Bold",
-            //"Marianne-Bold_Italic",
-            //"Spectral-Regular",
-            //"Spectral-ExtraBold"
-          ]}
-        />
-      </head>
       <body>
         {children}
         <Matomo />

diff --git a/app/page.tsx b/app/page.tsx
@@ -8,7 +8,7 @@ export default function Index() {
     <>
       <header className="oz-header-gradient">
         <Navigation />
-        <div className="md:flex pt-20 pb-8 md:pb-32 auto-cols-fr md:w-5/6 xl:w-[1100px] mx-[10%] md:m-auto">
+        <div className="mt-[70px] md:flex pt-20 pb-8 md:pb-32 auto-cols-fr md:w-5/6 xl:w-[1100px] mx-[10%] md:m-auto">
           <div className="w-full md:w-1/2 text-center md:text-left flex items-center">
             <div>
               <h1 className="mb-2 text-3xl font-bold lg:text-6xl text-oz-blue">
@@ -18,7 +18,12 @@ export default function Index() {
                 L'application mobile pour maitriser sa consommation d'alcool
               </p>
               <div className="grid grid-flow-col gap-3 sm:gap-6 max-w-sm mb-7 mx-auto md:mx-0">
-                <a href={ANDROID_URL} target="_blank" rel="noopener noreferrer">
+                <a
+                  className="!after:hidden"
+                  href={ANDROID_URL}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
                   <img
                     className="object-contain w-full"
                     src="images/other/google-play-fr.png"

diff --git a/package.json b/package.json
@@ -33,14 +33,16 @@
     "lint": "eslint .",
     "k8s": "yarn --silent --cwd .k8s",
     "predev": "only-include-used-icons",
-    "prebuild": "only-include-used-icons"
+    "prebuild": "only-include-used-icons",
+    "postinstall": "patch-package"
   },
   "devDependencies": {
     "@socialgouv/eslint-config-react": "^1.89.0",
     "@socialgouv/sre-secrets": "^1.4.0",
     "autoprefixer": "^10.4.13",
     "eslint": "^7.32.0",
     "jest": "^26.6.3",
+    "patch-package": "^8.0.0",
     "postcss": "^8.4.21",
     "prettier": "^2.4.1",
     "sass": "^1.77.2",