From fe075abd30cf215fc27565eb83705cca2be4a0a0 Mon Sep 17 00:00:00 2001 From: Dan George Date: Wed, 11 Aug 2021 15:01:10 +0100 Subject: [PATCH] Made syntax changes to styles to work with Explore AI --- src/components/JiscCardRow/index.jsx | 25 +++--- src/components/JiscList/JiscList.stories.js | 2 +- src/components/JiscList/index.jsx | 84 +++++++++++---------- src/components/JiscResultsBox/index.jsx | 41 +++++----- 4 files changed, 82 insertions(+), 70 deletions(-) diff --git a/src/components/JiscCardRow/index.jsx b/src/components/JiscCardRow/index.jsx index bcafb26..0b1d105 100644 --- a/src/components/JiscCardRow/index.jsx +++ b/src/components/JiscCardRow/index.jsx @@ -41,33 +41,32 @@ const useStyles = ({ backgroundImage, backgroundColor }) => { padding: '20px', '& img': { borderRadius: 10 - }, - '& $textContainer': { - paddingTop: 0 } }, - version3: { - '& $imageContainer': { + '@global': { + // Style 2 + '[class*="version2"] [class*="textContainer"]': { + paddingTop: 10 + }, + '[class*="version3"] [class*="imageContainer"]': { maxWidth: '70%', width: '70%', flexBasis: '70%' }, - '& $textContainer': { + '[class*="version3"] [class*="textContainer"]': { maxWidth: '30%', width: '24%', padding: '3%', flexBasis: '30%' - } - }, - version4: { - '& $imageContainer': { + }, + '[class*="version4"] [class*="imageContainer"]': { maxWidth: '70%', width: '70%', position: 'relative', left: '30%', flexBasis: '70%' }, - '& $textContainer': { + '[class*="version4"] [class*="textContainer"]': { maxWidth: '30%', width: '24%', position: 'relative', @@ -75,6 +74,10 @@ const useStyles = ({ backgroundImage, backgroundColor }) => { padding: '3%', flexBasis: '30%' } + }, + version3: { + }, + version4: { } }; }); diff --git a/src/components/JiscList/JiscList.stories.js b/src/components/JiscList/JiscList.stories.js index c08954e..0c11405 100644 --- a/src/components/JiscList/JiscList.stories.js +++ b/src/components/JiscList/JiscList.stories.js @@ -121,7 +121,7 @@ export const ListStyle3 = () => ( ); export const ListStyle4 = () => ( - + List Items diff --git a/src/components/JiscList/index.jsx b/src/components/JiscList/index.jsx index 5b5865d..01801cc 100644 --- a/src/components/JiscList/index.jsx +++ b/src/components/JiscList/index.jsx @@ -13,65 +13,69 @@ const useStyles = ({ headerColor }) => { margin: 'auto', boxShadow: '0px 0px 5px 0px rgba(0,0,0,0.13)', padding: 0, - '& .MuiListSubheader-root': { - backgroundColor: '#37444D', - color: 'white ' - } }, fpurple: { - '& .MuiListItem-root': { - color: 'purple ' - } }, forange: { - '& .MuiListItem-root': { - color: 'orange ' - } }, fgreen: { - '& .MuiListItem-root': { - color: 'green ' - } }, - orange: { - '& .MuiListSubheader-root': { - backgroundColor: 'orange' - } + hpurple: { }, - green: { - '& .MuiListSubheader-root': { - backgroundColor: 'green' - } + horange: { + }, + hgreen: { }, - purple: { - '& .MuiListSubheader-root': { + + '@global': { + // Customer Colour Headers + '[class*="list"] [class*="MuiListSubheader-root"]': { + backgroundColor: '#37444D', + color: 'white ' + }, + '[class*="fpurple"] [class*="MuiListItem-root"]': { + color: 'purple ' + }, + '[class*="forange"] [class*="MuiListItem-root"]': { + color: 'orange ' + }, + '[class*="fgreen"] [class*="MuiListItem-root"]': { + color: 'green ' + }, + // Customer Colour Text + '[class*="horange"] [class*="MuiListSubheader-root"]': { + backgroundColor: 'orange' + }, + '[class*="hgreen"] [class*="MuiListSubheader-root"]': { + backgroundColor: 'green' + }, + '[class*="hpurple"] [class*="MuiListSubheader-root"]': { backgroundColor: 'purple' - } + }, + //Style 2 + '[class*="style2"] [class*="MuiListItem-root"]': { + borderBottomStyle: 'solid', + borderWidth: 1, + borderColor: '#ccc' + }, + //Style 3 + '[class*="style3"] [class*="MuiListItem-root"]:nth-of-type(odd)': { + backgroundColor: '#EBF1F2' + }, + //Style 4 + '[class*="style4"] [class*="MuiListItem-root"]:nth-of-type(odd)': { + backgroundColor: '#EBF1F2' + }, }, listText: { paddingTop: '3px', paddingBottom: '3px' }, style2: { - '& .MuiListItem-root': { - borderBottomStyle: 'solid', - borderWidth: 1, - borderColor: '#ccc' - } }, style3: { - '& .MuiListItem-root': { - '&:nth-of-type(odd)': { - backgroundColor: '#EBF1F2' - } - } }, style4: { - '& .MuiListItem-root': { - '&:nth-of-type(odd)': { - backgroundColor: '#EBF1F2' - } - } } }; }); @@ -95,7 +99,7 @@ const JiscList = ({ classes.list, classes[`${'f' + titleColor}`], classes[`${style}`], - classes[`${headerColor}`] + classes[`${'h' + headerColor}`] ].join(' ')} > {children} diff --git a/src/components/JiscResultsBox/index.jsx b/src/components/JiscResultsBox/index.jsx index fe1e053..263e289 100644 --- a/src/components/JiscResultsBox/index.jsx +++ b/src/components/JiscResultsBox/index.jsx @@ -42,32 +42,37 @@ const useStyles = ({ backgroundImage, backgroundColor }) => { fontWeight: 'bold', fontSize: 15 }, - neutral: { - borderColor: '#3B88FD', - '& $cardAction': { - backgroundColor: '#3B88FD' + '@global': { + // Neutral + '[class*="neutral"] [class*="cardAction"]': { + backgroundColor: '#3B88FD', }, - '& $circle': { + '[class*="neutral"] [class*="circle"]': { backgroundColor: '#3B88FD' - } - }, - positive: { - borderColor: '#1DD688', - '& $cardAction': { + }, + // Positive + '[class*="positive"] [class*="cardAction"]': { backgroundColor: '#1DD688' }, - '& $circle': { + '[class*="positive"] [class*="circle"]': { backgroundColor: '#1DD688' - } - }, - negative: { - borderColor: '#FE0044', - '& $cardAction': { + }, + // Negative + '[class*="negative"] [class*="cardAction"]': { backgroundColor: '#FE0044' }, - '& $circle': { + '[class*="negative"] [class*="circle"]': { backgroundColor: '#FE0044' - } + }, + }, + neutral: { + borderColor: '#3B88FD', + }, + positive: { + borderColor: '#1DD688', + }, + negative: { + borderColor: '#FE0044', }, circle: { backgroundColor: '#1DD688',