diff --git a/packages/app/src/components/collapsible/collapsible-section.tsx b/packages/app/src/components/collapsible/collapsible-section.tsx index c7d6ee461b..b9205e65ec 100644 --- a/packages/app/src/components/collapsible/collapsible-section.tsx +++ b/packages/app/src/components/collapsible/collapsible-section.tsx @@ -6,20 +6,18 @@ import { isAtBottomOfPage } from '~/utils/is-at-bottom-of-page'; import { isElementAtTopOfViewport } from '~/utils/is-element-at-top-of-viewport'; import { useCollapsible } from '~/utils/use-collapsible'; import { Anchor } from '../typography'; +import { colors } from '@corona-dashboard/common'; interface CollapsibleSectionProps extends BoxProps { summary: string; children: ReactNode; id?: string; hideBorder?: boolean; + textColor?: string; + borderColor?: string; } -export const CollapsibleSection = ({ - summary, - children, - id, - hideBorder, -}: CollapsibleSectionProps) => { +export const CollapsibleSection = ({ summary, children, id, hideBorder, textColor = colors.blue8, borderColor = colors.gray2 }: CollapsibleSectionProps) => { const section = useRef(null); const collapsible = useCollapsible(); @@ -53,24 +51,13 @@ export const CollapsibleSection = ({ }, [toggle, id]); return ( - + {collapsible.button( - + {summary} {id && ( -