💄(proconnect) replace all proconnect buttons when env is off

The home button was already updated but I missed a few places where it
was also used.

src/frontend/src/components/LoginButton.tsx

@@ -1,9 +1,21 @@
 import { LinkButton } from '@/primitives'
 import { authUrl } from '@/features/auth'
 import { useTranslation } from 'react-i18next'
+import { useConfig } from '@/api/useConfig'
+import { ProConnectButton } from './ProConnectButton'
 
-export const LoginButton = () => {
+type LoginButtonProps = {
+  proConnectHint?: boolean // Hide hint in layouts where space doesn't allow it.
+}
+
+export const LoginButton = ({ proConnectHint = true }: LoginButtonProps) => {
   const { t } = useTranslation('global', { keyPrefix: 'login' })
+  const { data } = useConfig()
+
+  if (data?.use_proconnect_button) {
+    return <ProConnectButton hint={proConnectHint} />
+  }
+
   return (
     <LinkButton href={authUrl()} data-attr="login" variant="primary">
       {t('buttonLabel')}

src/frontend/src/components/ProConnectButton.tsx

@@ -1,9 +1,9 @@
-import { Link } from 'react-aria-components'
+import { Link as RALink } from 'react-aria-components'
 import { authUrl } from '@/features/auth'
 import { cva } from '@/styled-system/css'
 import { useTranslation } from 'react-i18next'
 import { VStack } from '@/styled-system/jsx'
-import { Text } from '@/primitives'
+import { Link } from '@/primitives'
 
 // Styles per their documentation https://github.com/numerique-gouv/agentconnect-documentation/blob/main/doc_fs/bouton_proconnect.md
 const proConnectButtonRecipe = cva({
@@ -32,23 +32,22 @@ export const ProConnectButton = ({ hint = true }: ProConnectButtonProps) => {
   const { t } = useTranslation('global', { keyPrefix: 'login' })
   return (
     <VStack alignItems="start">
-      <Link
+      <RALink
         className={proConnectButtonRecipe()}
         aria-label={t('proconnectButtonLabel')}
         href={authUrl()}
         data-attr="login"
       />
       {hint && (
-        <Text margin="sm" variant="note">
-          <Link
-            href="https://agentconnect.gouv.fr/"
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label={t('linkLabel')}
-          >
-            {t('link')}
-          </Link>
-        </Text>
+        <Link
+          to="https://agentconnect.gouv.fr/"
+          target="_blank"
+          rel="noopener noreferrer"
+          color="note"
+          aria-label={t('proconnectLinkLabel')}
+        >
+          {t('proconnectLink')}
+        </Link>
       )}
     </VStack>
   )

src/frontend/src/features/home/routes/Home.tsx

@@ -7,7 +7,6 @@ import { Screen } from '@/layout/Screen'
 import { generateRoomId } from '@/features/rooms'
 import { useUser, UserAware } from '@/features/auth'
 import { JoinMeetingDialog } from '../components/JoinMeetingDialog'
-import { ProConnectButton } from '@/components/ProConnectButton'
 import { useCreateRoom } from '@/features/rooms'
 import { RiAddLine, RiLink } from '@remixicon/react'
 import { LaterMeetingDialog } from '@/features/home/components/LaterMeetingDialog'
@@ -214,10 +213,8 @@ export const Home = () => {
                     </MenuItem>
                   </RACMenu>
                 </Menu>
-              ) : data?.use_proconnect_button ? (
-                <ProConnectButton hint={false} />
               ) : (
-                <LoginButton />
+                <LoginButton proConnectHint={false} />
               )}
               <DialogTrigger>
                 <Button

src/frontend/src/features/settings/components/SettingsDialog.tsx

@@ -2,7 +2,7 @@ import { Trans, useTranslation } from 'react-i18next'
 import { useLanguageLabels } from '@/i18n/useLanguageLabels'
 import { A, Badge, Dialog, type DialogProps, Field, H, P } from '@/primitives'
 import { useUser } from '@/features/auth'
-import { ProConnectButton } from '@/components/ProConnectButton'
+import { LoginButton } from '@/components/LoginButton'
 
 export type SettingsDialogProps = Pick<DialogProps, 'isOpen' | 'onOpenChange'>
 
@@ -29,7 +29,7 @@ export const SettingsDialog = (props: SettingsDialogProps) => {
       ) : (
         <>
           <P>{t('account.youAreNotLoggedIn')}</P>
-          <ProConnectButton />
+          <LoginButton />
         </>
       )}
       <H lvl={2}>{t('language.heading')}</H>

src/frontend/src/features/settings/components/tabs/AccountTab.tsx

@@ -6,7 +6,7 @@ import { css } from '@/styled-system/css'
 import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
 import { HStack } from '@/styled-system/jsx'
 import { useState } from 'react'
-import { ProConnectButton } from '@/components/ProConnectButton'
+import { LoginButton } from '@/components/LoginButton'
 import { usePersistentUserChoices } from '@/features/rooms/livekit/hooks/usePersistentUserChoices'
 
 export type AccountTabProps = Pick<DialogProps, 'onOpenChange'> &
@@ -57,7 +57,7 @@ export const AccountTab = ({ id, onOpenChange }: AccountTabProps) => {
       ) : (
         <>
           <P>{t('account.youAreNotLoggedIn')}</P>
-          <ProConnectButton />
+          <LoginButton />
         </>
       )}
       <HStack

src/frontend/src/layout/Header.tsx

@@ -9,7 +9,7 @@ import { useMatchesRoute } from '@/navigation/useMatchesRoute'
 import { FeedbackBanner } from '@/components/FeedbackBanner'
 import { Menu } from '@/primitives/Menu'
 import { MenuList } from '@/primitives/MenuList'
-import { ProConnectButton } from '@/components/ProConnectButton'
+import { LoginButton } from '@/components/LoginButton'
 
 import LogoAsset from '@/assets/logo.svg'
 import { useLoginHint } from '@/hooks/useLoginHint'
@@ -175,7 +175,7 @@ export const Header = () => {
                 !isAccessibility &&
                 !isTermsOfService && (
                   <>
-                    <ProConnectButton hint={false} />
+                    <LoginButton proConnectHint={false} />
                     <LoginHint />
                   </>
                 )}

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

@@ -16,9 +16,10 @@
   "loading": "Ladevorgang…",
   "loggedInUserTooltip": "Angemeldet als…",
   "login": {
-    "buttonLabel": "Mit ProConnect anmelden",
-    "linkLabel": "Was ist ProConnect? – neues Fenster",
-    "link": "Was ist ProConnect?"
+    "buttonLabel": "Anmelden",
+    "proconnectButtonLabel": "Mit ProConnect anmelden",
+    "proconnectLinkLabel": "Was ist ProConnect? – neues Fenster",
+    "proconnectLink": "Was ist ProConnect?"
   },
   "logout": "Abmelden",
   "notFound": {

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

@@ -16,10 +16,10 @@
   "loading": "Loading…",
   "loggedInUserTooltip": "Logged in as…",
   "login": {
-    "proconnectButtonLabel": "Login with ProConnect",
     "buttonLabel": "Login",
-    "linkLabel": "What is ProConnect? - new tab",
-    "link": "What is ProConnect?"
+    "proconnectButtonLabel": "Login with ProConnect",
+    "proconnectLinkLabel": "What is ProConnect? - new tab",
+    "proconnectLink": "What is ProConnect?"
   },
   "logout": "Logout",
   "notFound": {

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

@@ -16,9 +16,10 @@
   "loading": "Chargement…",
   "loggedInUserTooltip": "Connecté en tant que…",
   "login": {
-    "buttonLabel": "S'identifier avec ProConnect",
-    "linkLabel": "Qu'est-ce que ProConnect ? - nouvelle fenêtre",
-    "link": "Qu'est-ce que ProConnect ?"
+    "buttonLabel": "Se connecter",
+    "proconnectButtonLabel": "S'identifier avec ProConnect",
+    "proconnectLinkLabel": "Qu'est-ce que ProConnect ? - nouvelle fenêtre",
+    "proconnectLink": "Qu'est-ce que ProConnect ?"
   },
   "logout": "Se déconnecter",
   "notFound": {

src/frontend/src/locales/nl/global.json

@@ -16,9 +16,10 @@
   "loading": "Laden ...",
   "loggedInUserTooltip": "Ingelogd als ...",
   "login": {
-    "buttonLabel": "Log in met Proconnect",
-    "linkLabel": "Wat is ProConnect? ",
-    "link": "Wat is ProConnect?"
+    "buttonLabel": "Log in",
+    "proconnectButtonLabel": "Log in met Proconnect",
+    "proconnectLinkLabel": "Wat is ProConnect?",
+    "proconnectLink": "Wat is ProConnect?"
   },
   "logout": "Uitloggen",
   "notFound": {

src/frontend/src/primitives/A.tsx

@@ -55,6 +55,9 @@ const link = cva({
       primary: {
         color: 'blue',
       },
+      note: {
+        color: 'default.subtle-text',
+      },
     },
   },
 })