diff --git a/public/src/components/channelManagement/bannerDesigns/BannerDesignForm.tsx b/public/src/components/channelManagement/bannerDesigns/BannerDesignForm.tsx index d9cc9ac0..02ce93ff 100644 --- a/public/src/components/channelManagement/bannerDesigns/BannerDesignForm.tsx +++ b/public/src/components/channelManagement/bannerDesigns/BannerDesignForm.tsx @@ -18,6 +18,7 @@ import { BannerDesignUsage } from './BannerDesignUsage'; import { TickerDesignEditor } from './TickerDesignEditor'; import { BannerVisualEditor } from './BannerVisualEditor'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import { InfoOutlined } from '@material-ui/icons'; type Props = { design: BannerDesign; @@ -59,6 +60,14 @@ export const useStyles = makeStyles(({ spacing, palette }: Theme) => ({ fontWeight: 500, color: palette.grey[700], }, + info: { + display: 'flex', + marginBottom: spacing(1), + alignItems: 'center', + '& > * + *': { + marginLeft: spacing(1), + }, + }, })); const BannerDesignForm: React.FC = ({ @@ -134,6 +143,13 @@ const BannerDesignForm: React.FC = ({ return (
+
+ + + Create accessible designs that always meet WCAG Grading of AAA or AA. Check for colour + contrast at whocanuse.com + +
}> Usage