diff --git a/packages/app/src/domain/topical/components/text-with-chevron.tsx b/packages/app/src/domain/topical/components/text-with-chevron.tsx new file mode 100644 index 0000000000..78258d9992 --- /dev/null +++ b/packages/app/src/domain/topical/components/text-with-chevron.tsx @@ -0,0 +1,44 @@ +import { Box } from '~/components/base'; +import css from '@styled-system/css'; +import styled from 'styled-components'; +import { ChevronRight } from '@corona-dashboard/icons'; +import { colors } from '@corona-dashboard/common'; +import { Text } from '~/components/typography'; + +type TextWithChevronProps = { + label: string; +}; + +export const TextWithChevron = ({ label }: TextWithChevronProps) => { + return ( + + {label} + + + + + ); +} + +const IconSmall = styled.div( + css({ + display: 'inline', + textDecoration: 'inherit', + svg: { + width: 11, + height: 10, + }, + marginLeft: 1, + }) +); diff --git a/packages/app/src/domain/topical/components/topical-tile.tsx b/packages/app/src/domain/topical/components/topical-tile.tsx index 84e59fe226..3908821e28 100644 --- a/packages/app/src/domain/topical/components/topical-tile.tsx +++ b/packages/app/src/domain/topical/components/topical-tile.tsx @@ -3,11 +3,11 @@ import { space } from '~/style/theme'; import css from '@styled-system/css'; import styled from 'styled-components'; import { Heading } from '~/components/typography'; -import { LinkWithIcon } from '~/components/link-with-icon'; +import { TextWithChevron } from './text-with-chevron'; import { asResponsiveArray } from '~/style/utils'; import { colors } from '@corona-dashboard/common'; import DynamicIcon from '~/components/get-icon-by-name'; -import { ChevronRight, Down, Up } from '@corona-dashboard/icons'; +import { Down, Up } from '@corona-dashboard/icons'; import { Markdown } from '~/components/markdown'; import { TopicalIcon } from '@corona-dashboard/common/src/types'; @@ -55,8 +55,6 @@ export function TopicalTile({ css={css({ '&:hover .topical-tile-cta': { bg: colors.blue, - }, - '&:hover .topical-tile-cta a': { textDecoration: 'underline', color: colors.white, }, @@ -113,27 +111,7 @@ export function TopicalTile({ - {cta ? ( - - } - iconPlacement="right" - > - {cta.label} - - - ) : null} + {cta && } );