Skip to content
This repository has been archived by the owner on Nov 4, 2024. It is now read-only.

COR-1312 make link optional and remove right side #4670

Merged
Changes from 1 commit
Commits
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
Next Next commit
fix: PR Feedback
Jorrik-Klijnsma-Work committed Feb 24, 2023

Unverified

This user has not yet uploaded their public signing key.
commit e8dc80f168c3833a1e92cbfeaeb169c269732130
85 changes: 44 additions & 41 deletions packages/app/src/components/anchor-tile.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import { colors } from '@corona-dashboard/common';
import { External as ExternalLinkIcon } from '@corona-dashboard/icons';
import css from '@styled-system/css';
import styled from 'styled-components';
import { Anchor, Heading } from '~/components/typography';
import { AnchorProps, Heading } from '~/components/typography';
import { Box } from '~/components/base';
import { asResponsiveArray } from '~/style/utils';
import { Link } from '~/utils/link';
import { ExternalLink } from './external-link';
import { mediaQueries, space, sizes } from '~/style/theme';
@@ -50,12 +48,16 @@ export function AnchorTile({ title, href, label, children, external = false }: A
);
}

export const IconWrapper = styled.span(
css({
marginRight: space[2],
svg: { width: '24px', height: '11px', display: 'block', maxWidth: 'initial' },
})
);
export const IconWrapper = styled.span`
margin-right: ${space[2]};

svg {
width: 24px;
height: 11px;
display: block;
max-width: initial;
}
`;

const Container = styled.article`
border-top: 2px solid ${colors.gray2};
@@ -72,37 +74,38 @@ const Container = styled.article`
}
`;

const Content = styled.div(
css({
flexGrow: 1,
flex: '1 1 70%',
maxWidth: sizes.maxWidthText,
})
);
const Content = styled.div`
flex-grow: 1;
flex: 1 1 70%;
max-width: ${sizes.maxWidthText}px;
`;

const StyledAnchor = styled(Anchor)(
css({
display: 'flex',
})
);
const StyledAnchor = styled.a<AnchorProps>`
display: flex;
`;

const LinkContainer = styled.div(
css({
flexShrink: 1,
flex: '1 1 30%',
display: 'flex',
alignItems: 'center',
justifyContent: asResponsiveArray({ _: 'center', md: undefined }),
border: 0,
borderTop: asResponsiveArray({
_: `1px solid ${colors.gray3}`,
lg: 'none',
}),
borderLeft: asResponsiveArray({ lg: '1px solid' }),
borderLeftColor: asResponsiveArray({ lg: colors.gray3 }),
paddingTop: asResponsiveArray({ _: space[3], lg: '0' }),
paddingLeft: asResponsiveArray({ lg: space[4] }),
marginLeft: asResponsiveArray({ lg: space[4] }),
marginTop: asResponsiveArray({ _: space[3], md: '0' }),
})
);
const LinkContainer = styled.div`
flex-shrink: 1;
flex: 1 1 30%;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-top: 1px solid ${colors.gray3};
margin-top: ${space[3]};
padding-top: ${space[3]};

@media ${mediaQueries.md} {
margin-top: 0;
justify-content: auto;
}

@media ${mediaQueries.lg} {
border-top: none;
border-left: 1px solid;
border-left-color: ${colors.gray3};
padding-top: 0;
padding-left: ${space[4]};
margin-left: ${space[4]};
}
`;