Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

misc: migrate some shared style to FC components using tailwind #1954

Merged
merged 3 commits into from
Dec 30, 2024
Merged

misc: migrate some shared style to FC components using tailwind #1954

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4a8558b
misc: migrate some shared auth style to FC components using tailwind
ansmonjol Dec 30, 2024
b079c65
misc: remove useless shared component and use TW on invocation and fi…
ansmonjol Dec 30, 2024
9dfa08b
misc: better shared details component and use TW on invocation
ansmonjol Dec 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
misc: better shared details component and use TW on invocation
  • Loading branch information
@ansmonjol
ansmonjol committed Dec 30, 2024
commit 9dfa08b65333c5e19d5ff7de0e0e01e965e0195c
6 changes: 3 additions & 3 deletions src/components/plans/details/PlanDetailsFixedFeeAccordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { intlFormatNumber } from '~/core/formats/intlFormatNumber'
import { deserializeAmount } from '~/core/serializers/serializeAmount'
import { CurrencyEnum, EditPlanFragment } from '~/generated/graphql'
import { useInternationalization } from '~/hooks/core/useInternationalization'
import { DetailsAccordionWrapper, DetailsInfoGrid } from '~/styles/detailsPage'
import { DetailsInfoGrid } from '~/styles/detailsPage'

import DetailsTableDisplay from '../../details/DetailsTableDisplay'

Expand All @@ -18,7 +18,7 @@ const PlanDetailsFixedFeeAccordion = ({ plan }: { plan?: EditPlanFragment | null
</Typography>
}
>
<DetailsAccordionWrapper>
<div className="flex flex-col gap-6">
<DetailsTableDisplay
header={[translate('text_624453d52e945301380e49b6')]}
body={[
Expand Down Expand Up @@ -60,7 +60,7 @@ const PlanDetailsFixedFeeAccordion = ({ plan }: { plan?: EditPlanFragment | null
},
]}
/>
</DetailsAccordionWrapper>
</div>
</Accordion>
)
}
Expand Down
18 changes: 2 additions & 16 deletions src/styles/detailsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import { FC, PropsWithChildren, ReactNode } from 'react'
import styled from 'styled-components'

import { Typography, TypographyProps } from '~/components/designSystem'
import { theme } from '~/styles'

interface DetailsInfoItemProps {
label: string
Expand Down Expand Up @@ -30,7 +28,7 @@ export const DetailsSectionTitle: FC<PropsWithChildren<TypographyProps>> = ({

export const DetailsInfoGrid = ({ grid }: { grid: Array<DetailsInfoItemProps | false> }) => {
return (
<StyledDetailsInfoGrid>
<div className="grid grid-cols-[repeat(2,minmax(auto,1fr))] gap-[16px_32px]">
{grid.map((item, index) => {
if (item) {
return (
Expand All @@ -42,18 +40,6 @@ export const DetailsInfoGrid = ({ grid }: { grid: Array<DetailsInfoItemProps | f
)
}
})}
</StyledDetailsInfoGrid>
</div>
)
}

const StyledDetailsInfoGrid = styled.div`
display: grid;
grid-template-columns: repeat(2, minmax(auto, 1fr));
gap: ${theme.spacing(4)} ${theme.spacing(8)};
`

export const DetailsAccordionWrapper = styled.div`
display: flex;
flex-direction: column;
gap: ${theme.spacing(6)};
`
Loading