Refacto table
parent
5c5f0d0df8
commit
b777997351
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue