Merge pull request #249 from hackforla/lucashomer

#10 updating styles and ui cleanup for FAQ page
hackforla · Feb 7, 2020 · dec6667 · dec6667
2 parents c5e5c2c + 28377d7
commit dec6667
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 33 deletions.
diff --git a/client/src/components/Faq.js b/client/src/components/Faq.js
@@ -6,9 +6,25 @@ import { AddButton, EditButton } from "./Buttons";
 
 import FaqList from "./FaqList";
 import Container from "@material-ui/core/Container";
+import Typography from "@material-ui/core/Typography";
 import { Link } from "react-router-dom";
+import { makeStyles } from "@material-ui/core";
+
+const useStyles = makeStyles(() => ({
+  title: {
+    margin: "2rem",
+  },
+  buttonsContainer: {
+    display: "flex",
+    justifyContent: "space-between",
+  },
+  link: {
+    textDecoration: "none",
+  },
+}));
 
 const Faq = () => {
+  const classes = useStyles();
   const [faqs, setFaqs] = useState([]);
   const { t, i18n } = useTranslation("faq");
   const [message, setMessage] = useState("FAQs are loading...");
@@ -25,15 +41,15 @@ const Faq = () => {
       try {
         let twoLetterLanguage = i18n.language.slice(0, 2);
         const fetchedFaqs = await faqService.getAllByLanguage({
-          language: twoLetterLanguage
+          language: twoLetterLanguage,
         });
         if (fetchedFaqs.length > 0) {
           let sorted = fetchedFaqs;
           if (fetchedFaqs[0].identifier.includes(":")) {
             sorted = fetchedFaqs.sort(
               (a, b) =>
                 a.identifier.slice(0, a.identifier.indexOf(":")) -
-                b.identifier.slice(0, b.identifier.indexOf(":"))
+                b.identifier.slice(0, b.identifier.indexOf(":")),
             );
           }
           setFaqs(sorted);
@@ -73,17 +89,17 @@ const Faq = () => {
           1 +
           firstIdentifier.slice(
             firstIdentifier.indexOf(":"),
-            firstIdentifier.length
-          )
+            firstIdentifier.length,
+          ),
       };
       atSecondIndex = {
         ...currentFaqs[order - 2],
         identifier:
           Number(order) +
           secondIdentifier.slice(
             secondIdentifier.indexOf(":"),
-            secondIdentifier.length
-          )
+            secondIdentifier.length,
+          ),
       };
       currentFaqs[order - 1] = atSecondIndex;
       currentFaqs[order - 2] = atFirstIndex;
@@ -98,17 +114,17 @@ const Faq = () => {
           1 +
           firstIdentifier.slice(
             firstIdentifier.indexOf(":"),
-            firstIdentifier.length
-          )
+            firstIdentifier.length,
+          ),
       };
       atSecondIndex = {
         ...currentFaqs[order],
         identifier:
           Number(order) +
           secondIdentifier.slice(
             secondIdentifier.indexOf(":"),
-            secondIdentifier.length
-          )
+            secondIdentifier.length,
+          ),
       };
       currentFaqs[order - 1] = atSecondIndex;
       currentFaqs[order] = atFirstIndex;
@@ -121,14 +137,16 @@ const Faq = () => {
   };
 
   return (
-    <Container maxWidth="md">
-      <h1>{t("title")}</h1>
+    <Container maxWidth="sm">
+      <Typography variant="h4" align="center" className={classes.title}>
+        {t("title")}
+      </Typography>
       <UserContext.Consumer>
         {user =>
           user &&
           user.isAdmin && (
-            <>
-              <Link to="/faqs/add">
+            <div className={classes.buttonsContainer}>
+              <Link className={classes.link} to="/faqs/add">
                 <AddButton label="Add New Faq" />
               </Link>
               <EditButton
@@ -140,7 +158,7 @@ const Faq = () => {
                 onClick={onReorderClick}
                 color={reorder ? "secondary" : "primary"}
               />
-            </>
+            </div>
           )
         }
       </UserContext.Consumer>

diff --git a/client/src/components/FaqItem.js b/client/src/components/FaqItem.js
@@ -3,26 +3,39 @@ import { Link } from "react-router-dom";
 import { makeStyles } from "@material-ui/styles";
 import { UserContext } from "./user-context";
 import { EditButton, MoveUpButton, MoveDownButton } from "./Buttons";
+import { Typography } from "@material-ui/core";
 
 const useStyles = makeStyles({
   edit: {
-    marginBottom: "10px",
+    marginBottom: "2rem",
     border: "10px solid #FAEBD7",
     "& h4, h6, div": {
       fontSize: "1rem",
-      margin: "0.5rem"
-    }
+      margin: "0.5rem",
+    },
+  },
+  readOnly: {
+    marginBottom: "2rem",
   },
   editBar: {
     display: "flex",
     alignItems: "center",
-    justifyContent: "space-around",
-    backgroundColor: "rgb(249, 192, 88)",
-    height: "2.5rem"
+    justifyContent: "space-between",
+    backgroundColor: "rgb(241, 241, 241)",
   },
   hide: {
-    display: "none"
-  }
+    display: "none",
+  },
+  link: {
+    textDecoration: "none",
+  },
+  identifier: {
+    height: "100%",
+    marginLeft: "1rem",
+  },
+  faqText: {
+    padding: "1rem",
+  },
 });
 
 const FaqItem = ({ faq, reorder, reorderFaqs, faqLength }) => {
@@ -31,21 +44,23 @@ const FaqItem = ({ faq, reorder, reorderFaqs, faqLength }) => {
   const identifier = faq.identifier.includes(":")
     ? faq.identifier.slice(
         faq.identifier.indexOf(":") + 1,
-        faq.identifier.length
+        faq.identifier.length,
       )
     : faq.identifier;
   const order =
     faq.identifier.includes(":") &&
     faq.identifier.slice(0, faq.identifier.indexOf(":"));
 
   return (
-    <li className={reorder ? classes.edit : ""}>
+    <li className={reorder ? classes.edit : classes.readOnly}>
       <UserContext.Consumer>
         {user =>
           user &&
           user.isAdmin && (
             <div className={classes.editBar}>
-              <h4>Identifier: {identifier}</h4>
+              <Typography className={classes.identifier} variant="h6">
+                {identifier}
+              </Typography>
               {reorder ? (
                 <>
                   <MoveUpButton
@@ -58,16 +73,21 @@ const FaqItem = ({ faq, reorder, reorderFaqs, faqLength }) => {
                   />
                 </>
               ) : (
-                <Link to={`/faqs/${faq.identifier}`}>
-                  <EditButton label="Edit" />
+                <Link className={classes.link} to={`/faqs/${faq.identifier}`}>
+                  <EditButton label="  Edit  " />
                 </Link>
               )}
             </div>
           )
         }
       </UserContext.Consumer>
-      <h4>{faq.question}</h4>
-      <div dangerouslySetInnerHTML={{ __html: faq.answer }} />
+      <section className={classes.faqText}>
+        <Typography variant="h6">{faq.question}</Typography>
+        <Typography
+          component="p"
+          dangerouslySetInnerHTML={{ __html: faq.answer }}
+        />
+      </section>
     </li>
   );
 };

diff --git a/client/src/components/FaqList.js b/client/src/components/FaqList.js
@@ -4,17 +4,26 @@ import { makeStyles } from "@material-ui/styles";
 import FaqItem from "./FaqItem";
 
 const useStyles = makeStyles({
+  readOnly: {
+    listStyle: "none",
+    padding: "0",
+    display: "flex",
+    flexDirection: "column",
+  },
   edit: {
     listStyle: "none",
-    fontSize: "2rem"
-  }
+    fontSize: "2rem",
+    padding: "0",
+    display: "flex",
+    flexDirection: "column",
+  },
 });
 
 const FaqList = ({ faqs, message, reorder, reorderFaqs }) => {
   const classes = useStyles();
 
   return faqs.length ? (
-    <ul className={reorder ? classes.edit : ""}>
+    <ul className={reorder ? classes.edit : classes.readOnly}>
       {faqs.map(faq => (
         <FaqItem
           faq={faq}