diff --git a/src/frontend/apps/impress/src/components/modal/AlertModal.tsx b/src/frontend/apps/impress/src/components/modal/AlertModal.tsx index 26a2ac802..1f8b79b19 100644 --- a/src/frontend/apps/impress/src/components/modal/AlertModal.tsx +++ b/src/frontend/apps/impress/src/components/modal/AlertModal.tsx @@ -2,7 +2,7 @@ import { Button, ButtonProps, Modal, - ModalProps, + ModalDefaultVariantProps, ModalSize, } from '@gouvfr-lasuite/cunningham-react'; import { ReactNode, useEffect } from 'react'; @@ -20,7 +20,7 @@ export type AlertModalProps = { title: string; cancelLabel?: string; confirmLabel?: string; -} & Partial; +} & Partial; export const AlertModal = ({ cancelLabel, diff --git a/src/frontend/apps/impress/src/components/modal/SideModal.tsx b/src/frontend/apps/impress/src/components/modal/SideModal.tsx index 2900348a7..9e6047c12 100644 --- a/src/frontend/apps/impress/src/components/modal/SideModal.tsx +++ b/src/frontend/apps/impress/src/components/modal/SideModal.tsx @@ -49,7 +49,7 @@ export const SideModal = ({ return ( <> - + {children} diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-style.css b/src/frontend/apps/impress/src/cunningham/cunningham-style.css index 9442cbc05..9c3074223 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-style.css +++ b/src/frontend/apps/impress/src/cunningham/cunningham-style.css @@ -70,6 +70,7 @@ .c__modal__title { padding: 0; + display: block; } .c__modal__footer { diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css index c8c75ff24..7a9b67987 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css +++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css @@ -361,7 +361,7 @@ --c--globals--font--weights--medium: 500; --c--globals--font--weights--bold: 600; --c--globals--font--weights--extrabold: 800; - --c--globals--font--weights--black: 900; + --c--globals--font--weights--black: 800; --c--globals--font--families--base: inter variable, roboto flex variable, sans-serif; --c--globals--font--families--accent: @@ -849,6 +849,18 @@ --c--components--forms-checkbox--font-size: var( --c--globals--font--sizes--sm ); + --c--components--forms-input--border-radius: 4px; + --c--components--forms-input--border-radius--hover: 4px; + --c--components--forms-input--border-radius--focus: 4px; + --c--components--forms-select--border-radius: 4px; + --c--components--forms-select--border-radius--hover: 4px; + --c--components--forms-select--border-radius--focus: 4px; + --c--components--forms-textarea--border-radius: 4px; + --c--components--forms-textarea--border-radius--hover: 4px; + --c--components--forms-textarea--border-radius--focus: 4px; + --c--components--forms-datepicker--border-radius: 4px; + --c--components--forms-datepicker--border-radius--hover: 4px; + --c--components--forms-datepicker--border-radius--focus: 4px; --c--components--badge--font-size: var(--c--globals--font--sizes--xs); --c--components--badge--border-radius: 12px; --c--components--badge--padding-inline: var(--c--globals--spacings--xs); @@ -1731,7 +1743,6 @@ --c--globals--font--sizes--xs-alt: 3rem; --c--globals--font--weights--thin: 100; --c--globals--font--weights--extrabold: 800; - --c--globals--font--weights--black: 900; --c--globals--font--families--accent: marianne, inter variable, roboto flex variable, sans-serif; --c--globals--font--families--base: @@ -2539,6 +2550,18 @@ --c--components--forms-checkbox--font-size: var( --c--globals--font--sizes--sm ); + --c--components--forms-input--border-radius: 4px; + --c--components--forms-input--border-radius--hover: 4px; + --c--components--forms-input--border-radius--focus: 4px; + --c--components--forms-select--border-radius: 4px; + --c--components--forms-select--border-radius--hover: 4px; + --c--components--forms-select--border-radius--focus: 4px; + --c--components--forms-textarea--border-radius: 4px; + --c--components--forms-textarea--border-radius--hover: 4px; + --c--components--forms-textarea--border-radius--focus: 4px; + --c--components--forms-datepicker--border-radius: 4px; + --c--components--forms-datepicker--border-radius--hover: 4px; + --c--components--forms-datepicker--border-radius--focus: 4px; --c--components--badge--font-size: var(--c--globals--font--sizes--xs); --c--components--badge--border-radius: 12px; --c--components--badge--padding-inline: var(--c--globals--spacings--xs); diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts index b31f49c5f..b6c84c50b 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts +++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts @@ -372,7 +372,7 @@ export const tokens = { medium: 500, bold: 600, extrabold: 800, - black: 900, + black: 800, }, families: { base: 'Inter Variable, Roboto Flex Variable, sans-serif', @@ -664,6 +664,26 @@ export const tokens = { 'body--background-color-hover': '#F0F0F3', }, 'forms-checkbox': { 'font-size': '0.875rem' }, + 'forms-input': { + 'border-radius': '4px', + 'border-radius--hover': '4px', + 'border-radius--focus': '4px', + }, + 'forms-select': { + 'border-radius': '4px', + 'border-radius--hover': '4px', + 'border-radius--focus': '4px', + }, + 'forms-textarea': { + 'border-radius': '4px', + 'border-radius--hover': '4px', + 'border-radius--focus': '4px', + }, + 'forms-datepicker': { + 'border-radius': '4px', + 'border-radius--hover': '4px', + 'border-radius--focus': '4px', + }, badge: { 'font-size': '0.75rem', 'border-radius': '12px', @@ -1334,7 +1354,7 @@ export const tokens = { 'sm-alt': '3.5rem', 'xs-alt': '3rem', }, - weights: { thin: 100, extrabold: 800, black: 900 }, + weights: { thin: 100, extrabold: 800 }, families: { accent: 'Marianne, Inter Variable, Roboto Flex Variable, sans-serif', @@ -1948,6 +1968,26 @@ export const tokens = { 'body--background-color-hover': '#F0F0F3', }, 'forms-checkbox': { 'font-size': '0.875rem' }, + 'forms-input': { + 'border-radius': '4px', + 'border-radius--hover': '4px', + 'border-radius--focus': '4px', + }, + 'forms-select': { + 'border-radius': '4px', + 'border-radius--hover': '4px', + 'border-radius--focus': '4px', + }, + 'forms-textarea': { + 'border-radius': '4px', + 'border-radius--hover': '4px', + 'border-radius--focus': '4px', + }, + 'forms-datepicker': { + 'border-radius': '4px', + 'border-radius--hover': '4px', + 'border-radius--focus': '4px', + }, badge: { 'font-size': '0.75rem', 'border-radius': '12px', diff --git a/src/frontend/apps/impress/src/pages/globals.css b/src/frontend/apps/impress/src/pages/globals.css index 54ff40a24..c122ac8ee 100644 --- a/src/frontend/apps/impress/src/pages/globals.css +++ b/src/frontend/apps/impress/src/pages/globals.css @@ -8,12 +8,16 @@ body { margin: 0; padding: 0; + overflow: hidden; } /* stylelint-disable-next-line selector-id-pattern */ body > #__next > .c__app > div:has(> .c__loader) { min-height: 100vh; width: 100vw; + display: flex; + align-items: center; + justify-content: center; } * {