Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | 1x 520x 1x 1x 1x 1x 80x 1x 83x 1x 1x 46x 1x 1x 11x 1x 951x 1x 951x 1x 1x | import styled, { css } from "styled-components";
import { ErrorMessage } from "client/components/ErrorMessage";
import { TertiaryButton } from "client/components/TertiaryButton";
// Message components in the compact My Program lists share this margin
export const myProgramMessageMargin = css`
margin: 4px 0 8px 0;
`;
// Bottom margin of whatever element ends a program item card
export const programItemCardEndMargin = "8px";
// Non-paragraph content in a program item card (e.g. button rows) uses this
// margin; the 16px top matches the default paragraph margins of the
// surrounding card text
export const programItemContentMargin = css`
margin: 16px 0 ${programItemCardEndMargin} 0;
`;
export const MyProgramListItem = styled.li`
align-items: center;
justify-content: left;
margin-bottom: 8px;
list-style: none;
`;
export const MyProgramList = styled.ul`
margin-left: 16px;
li:first-child {
margin-top: -12px;
}
`;
export const MyProgramTime = styled.h2`
margin: 20px 0 0 0;
font-size: ${(props) => props.theme.fontSizeNormal};
`;
export const MyProgramGameTitle = styled.h3`
font-size: ${(props) => props.theme.fontSizeNormal};
font-weight: normal;
margin-top: 24px;
margin-bottom: 4px;
`;
export const MyProgramButtonContainer = styled.div`
display: flex;
gap: 12px;
flex-wrap: wrap;
`;
export const MyProgramButtonContainerMobile = styled(MyProgramButtonContainer)`
@media (max-width: ${(props) => props.theme.breakpointPhone}) {
flex-direction: column;
align-items: flex-start;
}
`;
export const MyProgramErrorMessage = styled(ErrorMessage)`
${myProgramMessageMargin};
`;
export const MyProgramCancelSignupFormContainer = styled.div`
display: flex;
@media (max-width: ${(props) => props.theme.breakpointPhone}) {
flex-direction: column;
margin-left: -16px;
}
`;
export const MyProgramHeader = styled.h1`
margin: 0 0 -8px 0;
font-size: ${(props) => props.theme.fontSizeLarge};
`;
export const MyProgramSecondaryText = styled.p`
color: ${(props) => props.theme.textSecondary};
margin-bottom: 0;
`;
export const ShowAllButton = styled(TertiaryButton)`
width: max-content;
`;
export const EmptyContentContainer = styled.div`
display: flex;
flex-direction: column;
row-gap: 8px;
`;
|