Merge pull request #366 from cornell-dti/fix-faq-pr-merge-issues

[Minor Fix] Removed inner styling useStyles and unused style names in FAQPage and CollapsibleQuestion.

Author: ggsawatyanon

frontend/src/components/FAQ/CollapsibleQuestion.tsx

@@ -15,87 +15,48 @@ type Props = {
   readonly answer: string;
 };
 
-const useStyles = makeStyles(
-  () => ({
-    questionTitle: {
-      fontSize: '20px',
-      fontWeight: 600,
-      lineHeight: '32px',
-      color: colors.red1,
-    },
-    answerBlurb: {
-      fontSize: '16px',
-      fontWeight: 400,
-      lineHeight: '24px',
-      color: colors.black,
-      padding: 0,
-    },
-    questionContainer: {
-      borderRadius: '8px',
-      border: '1px solid' + colors.gray5,
-      background: colors.white,
-      marginBottom: '16px!important' as '16px',
-      padding: '2px',
-    },
-    summary: {
-      padding: '5px 16px',
+const useStyles = makeStyles(() => ({
+  questionTitle: {
+    fontSize: '20px',
+    fontWeight: 600,
+    lineHeight: '32px',
+    color: colors.red1,
+  },
+  answerBlurb: {
+    fontSize: '16px',
+    fontWeight: 400,
+    lineHeight: '24px',
+    color: colors.black,
+    padding: 0,
+  },
+  questionContainer: {
+    borderRadius: '8px',
+    border: '1px solid' + colors.gray5,
+    background: colors.white,
+    marginBottom: '16px!important' as '16px',
+    padding: '2px',
+  },
+  summary: {
+    padding: '5px 16px',
+    minHeight: 15,
+    '&.Mui-expanded': {
       minHeight: 15,
-      '&.Mui-expanded': {
-        minHeight: 15,
-      },
-      '& .MuiAccordionSummary-content': {
-        padding: '0 0',
-        '&.Mui-expanded': {
-          margin: '12px 0',
-        },
-      },
-      '& .MuiButtonBase-root': {
-        padding: '0 12px',
-      },
-    },
-    details: {
-      display: 'flex',
-      padding: '0px 16px 16px 16px',
     },
-    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,
+    '& .MuiAccordionSummary-content': {
+      padding: '0 0',
       '&.Mui-expanded': {
-        minHeight: 15,
-      },
-      '& .MuiAccordionSummary-content': {
-        padding: '0 0',
-        '&.Mui-expanded': {
-          margin: '12px 0',
-        },
-      },
-      '& .MuiButtonBase-root': {
-        padding: '0 12px',
+        margin: '12px 0',
       },
     },
-  }),
-  {}
-);
+    '& .MuiButtonBase-root': {
+      padding: '0 12px',
+    },
+  },
+  details: {
+    display: 'flex',
+    padding: '0px 16px 16px 16px',
+  },
+}));
 
 /**
  * CollapsableQuestion Component
@@ -117,17 +78,7 @@ export default function CollapsableQuestion({ answer, question }: Props): ReactE
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
-  const {
-    questionTitle,
-    answerBlurb,
-    questionContainer,
-    summary,
-    details,
-    questionTitleMobile,
-    answerBlurbMobile,
-    questionContainerMobile,
-    summaryMobile,
-  } = useStyles(isMobile);
+  const { questionTitle, answerBlurb, questionContainer, summary, details } = useStyles(isMobile);
   return (
     <Grid item>
       <Accordion

frontend/src/pages/FAQPage.tsx

@@ -70,63 +70,6 @@ const useStyles = makeStyles(() => ({
     lineHeight: '25px',
     paddingBottom: '18px',
   },
-  pageBackgroundMobile: {
-    backgroundColor: colors.gray3,
-    padding: '24px 34px 0',
-    minHeight: 'calc(120vh - 96px)',
-  },
-  titleMobile: {
-    color: colors.black,
-    fontSize: '18px',
-    fontWeight: 600,
-    lineHeight: '28px',
-    marginBottom: '1px',
-  },
-  subtitleMobile: {
-    color: colors.black,
-    fontSize: '12px',
-    fontWeight: 400,
-    lineHeight: '16px',
-    marginBottom: '24px',
-  },
-  squareButtonMobile: {
-    backgroundColor: colors.red1,
-    color: 'white',
-    '&:hover': {
-      backgroundColor: colors.red7, // dark-red color on Figma
-    },
-    padding: '8px 12px',
-    fontFamily: 'Work Sans, sans-serif',
-    fontWeight: 600,
-    fontSize: '12px',
-    borderRadius: '10px',
-    lineHeight: '16px',
-  },
-  sideBarMobile: {
-    backgroundColor: colors.white,
-    padding: '20px',
-    borderRadius: '8px',
-    width: 'auto',
-    height: '200px',
-    marginLeft: '0',
-    '@media only screen and (max-width: 960px)': {
-      marginLeft: '0',
-    },
-    border: '1px solid' + colors.gray5,
-    marginTop: '16px',
-  },
-  sideBarTitleMobile: {
-    fontSize: '10px',
-    fontWeight: 600,
-    lineHeight: '14px',
-    paddingBottom: '6px',
-  },
-  sideBarBlurbMobile: {
-    fontSize: '10px',
-    fontWeight: 400,
-    lineHeight: '14px',
-    paddingBottom: '18px',
-  },
 }));
 
 /**
@@ -143,64 +86,6 @@ const FAQPage = (): ReactElement => {
   const [data, setData] = useState<FAQ[]>([]);
   const [isMobile, setIsMobile] = useState<boolean>(false);
   const { openModal } = useModal();
-  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();