Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
import styled from 'styled-components';
import { macro } from '@synerise/ds-typography';
export const Header = styled.div`
background: #ffffff;
padding: 24px;
display: flex;
justify-content: space-between;
`;
export const SelectionHeader = styled(Header)`
background: ${(props): string => props.theme.palette['blue-600']};
`;
export const Size = styled.div`
${macro.medium};
color: #fff;
b {
${macro.h400};
color: inherit;
}
`;
export const Title = styled.div`
${macro.h400};
`;
export const SubTitle = styled.div`
${macro.small};
border-left: 1px solid ${(props): string => props.theme.palette['grey-200']};
color: ${(props): string => props.theme.palette['grey-800']};
margin-left: 24px;
min-height: 80px;
padding: 24px;
display: flex;
align-items: center;
justify-content: space-between;
align-content: center;
`;
export const PageHeaderContent = styled.div`
> * {
margin-left: 12px;
}
`;
export const BackButton = styled.button`
${macro.medium};
display: flex;
align-items: center;
background: transparent;
border: none;
color: ${(props): string => props.theme.palette['grey-500']};
margin-left: 16px;
border-left: 1px solid ${(props): string => props.theme.palette['grey-300']};
cursor: pointer;
&:hover {
color: ${(props): string => props.theme.palette['grey-600']};
}
`;
export const PageHeaderTitle = styled.div`
${macro.h700};