Refacto table

pull/2077/head
Jérémy Rialland 2022-03-29 13:26:23 +02:00 committed by Johan Girod
parent 5c5f0d0df8
commit b777997351
3 changed files with 31 additions and 19 deletions

View File

@ -74,7 +74,7 @@ export default function Popover(
<Underlay {...underlayProps} $offsetTop={offsetTop}>
<Container>
<Grid container justifyContent="center">
<Grid item sm={small ? 10 : 12} md={small ? 8 : 12}>
<Grid item sm={small ? 10 : 12} md={small ? 8 : 12} zeroMinWidth>
<PopoverContainer
{...dialogProps}
{...modalProps}

View File

@ -9,6 +9,7 @@ type ButtonHelpProps = {
title: string
children: React.ReactNode
light?: boolean
small?: boolean
}
export default function ButtonHelp({
@ -16,6 +17,7 @@ export default function ButtonHelp({
title,
type,
light,
small = true,
}: ButtonHelpProps) {
return (
<PopoverWithTrigger
@ -46,7 +48,7 @@ export default function ButtonHelp({
</StyledButton>
)}
title={title}
small
small={small}
>
{children}
</PopoverWithTrigger>

View File

@ -1,10 +1,33 @@
import ButtonHelp from '@/design-system/buttons/ButtonHelp'
import { Li, Ul } from '@/design-system/typography/list'
import { Body } from '@/design-system/typography/paragraphs'
import { baseParagraphStyle, Body } from '@/design-system/typography/paragraphs'
import styled from 'styled-components'
export const StyledTable = styled.table`
${baseParagraphStyle}
font-size: 0.85em;
text-align: center;
border-collapse: collapse;
display: block;
overflow-y: auto;
tr:nth-child(2n + 3) {
background: var(--lightestColor);
}
td {
padding: 0.5rem;
border: 1px solid ${({ theme }) => theme.colors.extended.grey[500]};
}
`
export function ExplicationsResultatFiscal() {
return (
<ButtonHelp title="Quelles exonérations inclure ?" type="aide">
<ButtonHelp
title="Quelles exonérations inclure ?"
type="aide"
small={false}
>
<Body>
Pour calculer le montant du résultat fiscal avant déduction des
exonérations et des charges sociales à indiquer dans ce simulateur, vous
@ -24,20 +47,7 @@ export function ExplicationsResultatFiscal() {
Ajoutez les exonérations <strong>(2)</strong>
</Li>
</Ul>
<table
css={`
font-size: 0.85em;
text-align: center;
tr:nth-child(2n + 3) {
background: var(--lightestColor);
}
td {
padding: 0.5rem;
}
`}
>
<StyledTable>
<tr>
<td></td>
<td></td>
@ -141,7 +151,7 @@ export function ExplicationsResultatFiscal() {
</td>
<td></td>
</tr>
</table>
</StyledTable>
</ButtonHelp>
)
}