Adjusted FAQ page code to improve page efficiency and code conventions.

frontend/src/colors.js

@@ -6,7 +6,7 @@ export const colors = {
  red4: '#FFCFC7',
  red5: '#FFF6F6',
  red6: '#FFF2F2',
- darkred: '#9C3B29',
+ red7: '#9C3B29',
  black: '#000000',
  gray1: '#5D5D5D',
  gray2: '#898989',

frontend/src/components/FAQ/CollapsibleQuestion.tsx

@@ -14,49 +14,31 @@
  readonly question: string;
  readonly answer: string;
 };
-/**
- * CollapsableQuestion Component
- *
- * Displays a question and answer in a collapsable format. Formatted for the FAQ page.
- *
- * @param answer - the answer to the question
- * @param question - the question to be displayed
- * @returns ReactElement
- *
- */
-export default function CollapsableQuestion({ answer, question }: Props): ReactElement {
- const [isMobile, setIsMobile] = useState<boolean>(false);
 
- useEffect(() => {
- const handleResize = () => setIsMobile(window.innerWidth <= 600);
- handleResize();
- window.addEventListener('resize', handleResize);
- return () => window.removeEventListener('resize', handleResize);
- }, []);
-
- const useStyles = makeStyles(() => ({
+const useStyles = makeStyles(
+ () => ({
  questionTitle: {
- fontSize: isMobile ? '10px' : '20px',
+ fontSize: '20px',
  fontWeight: 600,
- lineHeight: isMobile ? '14px' : '32px',
+ lineHeight: '32px',
  color: colors.red1,
  },
  answerBlurb: {
- fontSize: isMobile ? '10px' : '16px',
+ fontSize: '16px',
  fontWeight: 400,
- lineHeight: isMobile ? '14px' : '24px',
+ lineHeight: '24px',
  color: colors.black,
  padding: 0,
  },
  questionContainer: {
  borderRadius: '8px',
  border: '1px solid' + colors.gray5,
  background: colors.white,
- marginBottom: isMobile ? ('8px!important' as '8px') : ('16px!important' as '16px'),
- padding: isMobile ? '0px' : '2px',
+ marginBottom: '16px!important' as '16px',
+ padding: '2px',
  },
  summary: {
- padding: isMobile ? '0px 10px' : '5px 16px',
+ padding: '5px 16px',
  minHeight: 15,
  '&.Mui-expanded': {
  minHeight: 15,
@@ -75,23 +57,107 @@
  display: 'flex',
  padding: '0px 16px 16px 16px',
  },
- }));
- const { questionTitle, answerBlurb, questionContainer, summary, details } = useStyles();
+ questionTitleMobile: {
+ fontSize: '10px',
+ fontWeight: 600,
+ lineHeight: '14px',
+ color: colors.red1,
+ },
+ answerBlurbMobile: {
+ fontSize: '10px',
+ fontWeight: 400,
+ lineHeight: '14px',
+ color: colors.black,
+ padding: 0,
+ },
+ questionContainerMobile: {
+ borderRadius: '8px',
+ border: '1px solid' + colors.gray5,
+ background: colors.white,
+ marginBottom: '8px!important' as '8px',
+ padding: '0px',
+ },
+ summaryMobile: {
+ padding: '0px 10px',
+ minHeight: 15,
+ '&.Mui-expanded': {
+ minHeight: 15,
+ },
+ '& .MuiAccordionSummary-content': {
+ padding: '0 0',
+ '&.Mui-expanded': {
+ margin: '12px 0',
+ },
+ },
+ '& .MuiButtonBase-root': {
+ padding: '0 12px',
+ },
+ },
+ }),
+ {}
+);
+
+/**
+ * CollapsableQuestion Component
+ *
+ * Displays a question and answer in a collapsable format. Formatted for the FAQ page.
+ *
+ * @param answer - the answer to the question
+ * @param question - the question to be displayed
+ * @returns ReactElement
+ *
+ */
+export default function CollapsableQuestion({ answer, question }: Props): ReactElement {
+ const [isMobile, setIsMobile] = useState<boolean>(false);
+
+ useEffect(() => {
+ const handleResize = () => setIsMobile(window.innerWidth <= 600);
+ handleResize();
+ window.addEventListener('resize', handleResize);
+ return () => window.removeEventListener('resize', handleResize);
+ }, []);
+
+ const {
+ questionTitle,
+ answerBlurb,
+ questionContainer,
+ summary,
+ details,
+ questionTitleMobile,
+ answerBlurbMobile,
+ questionContainerMobile,
+ summaryMobile,
+ } = useStyles(isMobile);
  return (
  <Grid item>
- <Accordion variant="outlined" square className={questionContainer}>
+ <Accordion
+ variant="outlined"
+ square
+ className={questionContainer}
+ style={isMobile ? { marginBottom: '8px!important' as '8px', padding: '0' } : {}}
+ >
  <AccordionSummary
  expandIcon={
  <ExpandMoreIcon fontSize={isMobile ? 'small' : 'medium'} htmlColor={colors.red1} />
  }
  className={summary}
+ style={isMobile ? { padding: '0 10px' } : {}}
  >
- <Typography variant="body1" className={questionTitle}>
+ <Typography
+ variant="body1"
+ className={questionTitle}
+ style={isMobile ? { fontSize: '10px', lineHeight: '14px' } : {}}
+ >
  {question}
  </Typography>
  </AccordionSummary>
  <AccordionDetails className={details}>
- <Typography gutterBottom variant="body2" className={answerBlurb}>
+ <Typography
+ gutterBottom
+ variant="body2"
+ className={answerBlurb}
+ style={isMobile ? { fontSize: '10px', lineHeight: '14px' } : {}}
+ >
  {answer}
  </Typography>
  </AccordionDetails>