Adjust FAQ page code for improved efficiency and code conventions

frontend/src/colors.js

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

frontend/src/components/FAQ/CollapsibleQuestion.tsx

@@ -133,23 +133,30 @@ export default function CollapsableQuestion({ answer, question }: Props): ReactE
  <Accordion
  variant="outlined"
  square
- className={isMobile ? questionContainerMobile : questionContainer}
+ className={questionContainer}
+ style={isMobile ? { marginBottom: '8px!important' as '8px', padding: '0' } : {}}
  >
  <AccordionSummary
  expandIcon={
  <ExpandMoreIcon fontSize={isMobile ? 'small' : 'medium'} htmlColor={colors.red1} />
  }
- className={isMobile ? summaryMobile : summary}
+ className={summary}
+ style={isMobile ? { padding: '0 10px' } : {}}
  >
- <Typography variant="body1" className={isMobile ? questionTitleMobile : questionTitle}>
+ <Typography
+ variant="body1"
+ className={questionTitle}
+ style={isMobile ? { fontSize: '10px', lineHeight: '14px' } : {}}
+ >
  {question}
  </Typography>
  </AccordionSummary>
  <AccordionDetails className={details}>
  <Typography
  gutterBottom
  variant="body2"
- className={isMobile ? answerBlurbMobile : answerBlurb}
+ className={answerBlurb}
+ style={isMobile ? { fontSize: '10px', lineHeight: '14px' } : {}}
  >
  {answer}
  </Typography>

frontend/src/pages/FAQPage.tsx

@@ -141,23 +141,66 @@ const useStyles = makeStyles(() => ({
 const FAQPage = (): ReactElement => {
  const [data, setData] = useState<FAQ[]>([]);
  const [isMobile, setIsMobile] = useState<boolean>(false);
-
- const {
- squareButton,
- sideBar,
- pageBackground,
- title,
- subtitle,
- sideBarTitle,
- sideBarBlurb,
- squareButtonMobile,
- sideBarMobile,
- pageBackgroundMobile,
- titleMobile,
- subtitleMobile,
- sideBarTitleMobile,
- sideBarBlurbMobile,
- } = useStyles();
+ const useStyles = makeStyles(() => ({
+ pageBackground: {
+ backgroundColor: colors.gray3,
+ padding: '96px 135px 0',
+ minHeight: 'calc(120vh - 96px)',
+ },
+ title: {
+ color: colors.black,
+ fontSize: '42px',
+ fontWeight: 600,
+ lineHeight: '60px',
+ marginBottom: '20px',
+ },
+ subtitle: {
+ color: colors.black,
+ fontSize: '20px',
+ fontWeight: 400,
+ lineHeight: '28px',
+ marginBottom: '32px',
+ },
+ squareButton: {
+ backgroundColor: colors.red1,
+ color: 'white',
+ '&:hover': {
+ backgroundColor: colors.red7, //dark-red on figma
+ },
+ padding: '8px 18px',
+ fontWeight: 600,
+ fontSize: '16px',
+ borderRadius: '10px',
+ lineHeight: '26px',
+ },
+ sideBar: {
+ backgroundColor: colors.white,
+ padding: '20px',
+ borderRadius: '8px',
+ width: '275px',
+ height: 'fit-content',
+ marginLeft: '48px',
+ '@media only screen and (max-width: 960px)': {
+ marginLeft: '0',
+ },
+ border: '1px solid' + colors.gray5,
+ marginTop: '0',
+ },
+ sideBarTitle: {
+ fontSize: '20px',
+ fontWeight: 600,
+ lineHeight: '26px',
+ paddingBottom: '6px',
+ },
+ sideBarBlurb: {
+ fontSize: '16px',
+ fontWeight: 400,
+ lineHeight: '25px',
+ paddingBottom: '18px',
+ },
+ }));
+ const { squareButton, sideBar, pageBackground, title, subtitle, sideBarTitle, sideBarBlurb } =
+ useStyles();
 
  useTitle('FAQ');
 
@@ -175,17 +218,25 @@ const FAQPage = (): ReactElement => {
  }, []);
 
  return (
- <div className={isMobile ? pageBackgroundMobile : pageBackground}>
+ <div className={pageBackground} style={isMobile ? { padding: '24px 34px 0' } : {}}>
  <Grid container direction="column" alignItems="stretch">
  {/* Title */}
  <Grid item xs={12}>
- <Typography variant="h1" className={isMobile ? titleMobile : title}>
+ <Typography
+ variant="h1"
+ className={title}
+ style={isMobile ? { fontSize: '18px', lineHeight: '28px', marginBottom: '1px' } : {}}
+ >
  Frequently Asked Questions
  </Typography>
  </Grid>
  {/* Subtitle */}
  <Grid item xs={12} md={8}>
- <Typography variant="subtitle1" className={isMobile ? subtitleMobile : subtitle}>
+ <Typography
+ variant="subtitle1"
+ className={subtitle}
+ style={isMobile ? { fontSize: '12px', lineHeight: '16px', marginBottom: '24px' } : {}}
+ >
  Finding off-campus housing can be a daunting process. To assist you in your search,
  we've compiled answers to some of our most frequently asked questions.
  </Typography>
@@ -214,14 +265,31 @@ const FAQPage = (): ReactElement => {
  </Grid>
  </Grid>
  {isMobile && (
- <Grid item xs={12} className={sideBarMobile}>
- <Typography variant="h1" className={sideBarTitleMobile}>
+ <Grid
+ item
+ xs={12}
+ className={sideBar}
+ style={{ width: 'auto', height: '200px', marginLeft: '0', marginTop: '16px' }}
+ >
+ <Typography
+ variant="h1"
+ className={sideBarTitle}
+ style={{ fontSize: '10px', lineHeight: '14px' }}
+ >
  Still have questions?
  </Typography>
- <Typography variant="body1" className={sideBarBlurbMobile}>
+ <Typography
+ variant="body1"
+ className={sideBarBlurb}
+ style={{ fontSize: '10px', lineHeight: '14px' }}
+ >
  Can't find the answer you're looking for? Feel free to reach out to our team.
  </Typography>
- <Button href="mailto:[email protected]" className={squareButtonMobile}>
+ <Button
+ href="mailto:[email protected]"
+ className={squareButton}
+ style={{ padding: '8px 12px', fontSize: '12px', lineHeight: '16px' }}
+ >
  Get In Touch
  </Button>
  </Grid>