diff --git a/public/fonts/NersansOne.woff b/public/fonts/NersansOne.woff new file mode 100644 index 0000000..b030e6f Binary files /dev/null and b/public/fonts/NersansOne.woff differ diff --git a/public/fonts/NersansOne.woff2 b/public/fonts/NersansOne.woff2 new file mode 100644 index 0000000..f2d4bb8 Binary files /dev/null and b/public/fonts/NersansOne.woff2 differ diff --git a/src/components/site/SiteCard.tsx b/src/components/site/SiteCard.tsx index 3a50b71..df2e1b3 100644 --- a/src/components/site/SiteCard.tsx +++ b/src/components/site/SiteCard.tsx @@ -18,24 +18,20 @@ export function SiteCard({ const getBackground = (): string => { if (imagePath) return `url(${imagePath}) center/cover`; - if (isSituation) return "rgba(255, 255, 255, 0.42)"; - if (disabled) return "#b8b8b8"; - if (selected) return "#d9d9d9"; - return "#e8e8e8"; + if (disabled) return "rgba(255, 255, 255, 0.42)"; + return "#b8b8b8"; }; const getBorder = (): string => { if (selected) return "3px solid #a8d5a2"; if (isSituation) return "3px solid rgba(255, 255, 255, 0.55)"; - if (disabled) return "none"; - return "2px solid #ffffff"; + if (disabled) return "3px solid rgba(255, 255, 255, 0.55)"; + return "3px solid rgba(255, 255, 255, 0.55)"; }; const getTextColor = (): string => { - if (isSituation && disabled) return "rgba(77, 77, 77, 0.72)"; - if (isSituation) return "#4d4d4d"; - if (disabled) return "#888888"; - return "#666666"; + if (disabled) return "rgba(77, 77, 77, 0.72)"; + return "#4d4d4d"; }; return ( diff --git a/src/components/site/SiteNamingScreen.tsx b/src/components/site/SiteNamingScreen.tsx index 5afe1d6..1e77712 100644 --- a/src/components/site/SiteNamingScreen.tsx +++ b/src/components/site/SiteNamingScreen.tsx @@ -38,16 +38,12 @@ export function SiteNamingScreen(): React.JSX.Element { inputRef.current?.focus(); }, []); - const handleKeyDown = useCallback( - (e: React.KeyboardEvent): void => { - e.preventDefault(); - - // Only process if not complete and it's a letter key - if (!isComplete && e.key.length === 1 && /[a-zA-Z]/.test(e.key)) { - setCharIndex((prev) => Math.min(prev + 1, forcedName.length)); - } + const handleNameChange = useCallback( + (event: React.ChangeEvent): void => { + const nextLength = Math.min(event.target.value.length, forcedName.length); + setCharIndex(nextLength); }, - [isComplete, forcedName.length], + [forcedName.length], ); const handleConfirm = (): void => { @@ -99,8 +95,7 @@ export function SiteNamingScreen(): React.JSX.Element { ref={inputRef} type="text" value={displayValue} - onKeyDown={handleKeyDown} - readOnly + onChange={handleNameChange} placeholder="Écrivez votre prénom ici" style={{ display: "flex", @@ -114,7 +109,7 @@ export function SiteNamingScreen(): React.JSX.Element { background: "#D9D9D9", outline: "none", color: "#333", - caretColor: "transparent", + caretColor: "#333", fontFamily: "Inter, system-ui, sans-serif", fontSize: "clamp(16px, 2.5vw, 20px)", textAlign: "left", diff --git a/src/data/site/siteConfig.ts b/src/data/site/siteConfig.ts index 6f4d36c..b00dc02 100644 --- a/src/data/site/siteConfig.ts +++ b/src/data/site/siteConfig.ts @@ -24,11 +24,11 @@ export const EXPERIENCE_CARDS: readonly SiteCardConfig[] = [ * Cards for screen 2: "Quelle est votre situation ?" */ export const SITUATION_CARDS: readonly SiteCardConfig[] = [ - { id: "sit-refugie-climat", label: "Réfugié.e climatique", disabled: true }, + { id: "sit-refugie-climat", label: "Sans domicile fixe", disabled: true }, { id: "sit-refugie-guerre", label: "Réfugié.e de guerre", disabled: true }, { id: "sit-sans-domicile", - label: "Sans domicile fixe", + label: "Réfugié.e climatique", disabled: false, }, { id: "sit-autre", label: "Autre", disabled: true }, diff --git a/src/index.css b/src/index.css index bed3353..0b0e4ea 100644 --- a/src/index.css +++ b/src/index.css @@ -1,5 +1,15 @@ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); +@font-face { + font-family: "Nersans One"; + src: + url("/fonts/NersansOne.woff2") format("woff2"), + url("/fonts/NersansOne.woff") format("woff"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + /* Base document reset */ :root { color-scheme: dark;