💄(frontend) update feedback button to banner with context

Refactored the feedback alert button into a more discreet and polished banner.
The banner provides additional context about Visio being under construction.
Also updated the link to the feedback form.

src/frontend/src/components/Feedback.tsx

@@ -1,25 +0,0 @@
-import { css } from '@/styled-system/css'
-import { RiExternalLinkLine } from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
-import { LinkButton } from '@/primitives'
-
-export const Feedback = () => {
-  const { t } = useTranslation()
-  return (
-    <LinkButton
-      href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
-      variant="success"
-      target="_blank"
-    >
-      <span className={css({ marginRight: 0.5 })} aria-hidden="true">
-        💡
-      </span>
-      {t('feedbackAlert')}
-      <RiExternalLinkLine
-        size={16}
-        className={css({ marginLeft: 0.5 })}
-        aria-hidden="true"
-      />
-    </LinkButton>
-  )
-}

src/frontend/src/components/FeedbackBanner.tsx

@@ -0,0 +1,46 @@
+import { css } from '@/styled-system/css'
+import { RiErrorWarningLine, RiExternalLinkLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { Text, A } from '@/primitives'
+
+const GRIST_FORM =
+  'https://grist.numerique.gouv.fr/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4'
+
+export const FeedbackBanner = () => {
+  const { t } = useTranslation()
+  return (
+    <div
+      className={css({
+        width: '100%',
+        backgroundColor: '#E8EDFF',
+        color: '#0063CB',
+        display: { base: 'none', sm: 'flex' },
+        justifyContent: 'center',
+        padding: '0.5rem 0',
+      })}
+    >
+      <div
+        className={css({
+          display: 'inline-flex',
+          gap: '0.5rem',
+          alignItems: 'center',
+        })}
+      >
+        <RiErrorWarningLine size={20} />
+        <Text as="p">{t('feedback.context')}</Text>
+        <div
+          className={css({
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.25,
+          })}
+        >
+          <A href={GRIST_FORM} target="_blank">
+            {t('feedback.cta')}
+          </A>
+          <RiExternalLinkLine size={16} aria-hidden="true" />
+        </div>
+      </div>
+    </div>
+  )
+}

src/frontend/src/layout/Header.tsx

@@ -6,7 +6,7 @@ import { Text, Button } from '@/primitives'
 import { SettingsButton } from '@/features/settings'
 import { logoutUrl, useUser } from '@/features/auth'
 import { useMatchesRoute } from '@/navigation/useMatchesRoute'
-import { Feedback } from '@/components/Feedback'
+import { FeedbackBanner } from '@/components/FeedbackBanner.tsx'
 import { Menu } from '@/primitives/Menu'
 import { MenuList } from '@/primitives/MenuList'
 import { ProConnectButton } from '@/components/ProConnectButton'
@@ -20,6 +20,8 @@ export const Header = () => {
   const { user, isLoggedIn } = useUser()
 
   return (
+    <>
+      <FeedbackBanner />
       <div
         className={css({
           paddingY: 1,
@@ -57,7 +59,6 @@ export const Header = () => {
                   {t('app')}
                 </Link>
               </Text>
-            <Feedback />
             </Stack>
           </header>
           <nav>
@@ -92,5 +93,6 @@ export const Header = () => {
           </nav>
         </div>
       </div>
+    </>
   )
 }

src/frontend/src/locales/de/global.json

@@ -6,7 +6,10 @@
   "error": {
     "heading": ""
   },
-  "feedbackAlert": "",
+  "feedback": {
+    "context": "",
+    "cta": ""
+  },
   "forbidden": {
     "heading": ""
   },

src/frontend/src/locales/en/global.json

@@ -6,7 +6,10 @@
   "error": {
     "heading": "An error occurred while loading the page"
   },
-  "feedbackAlert": "Give us feedback",
+  "feedback": {
+    "context": "Visio is still evolving—your input matters!",
+    "cta": "Share your feedback"
+  },
   "forbidden": {
     "heading": "You don't have the permission to view this page"
   },

src/frontend/src/locales/fr/global.json

@@ -6,7 +6,10 @@
   "error": {
     "heading": "Une erreur est survenue lors du chargement de la page"
   },
-  "feedbackAlert": "Donnez-nous votre avis",
+  "feedback": {
+    "context": "Visio est en pleine construction — votre avis compte !",
+    "cta": "Partagez votre avis"
+  },
   "forbidden": {
     "heading": "Accès interdit"
   },