made changes to settings pages

frontend/src/Components/Settings/Customizations/CustomizationsEdit.jsx

@@ -12,13 +12,17 @@ import { PencilFill } from "react-bootstrap-icons";
 import "../Settings.scss";
 import { Typeahead } from "react-bootstrap-typeahead";
 import ArrowMarker from "../../ArrowMarker/ArrowMarker";
-export default function CustomizationsEdit({}) {
-  //customization data
-  const [custData, setCustData] = useState({
-    interest_areas: [],
-    article_level: [],
+export default function CustomizationsEdit({
+  customerData = {
+    interest_areas: ["Artificial Intelligence"],
+    article_level: ["Beginner"],
     technologies: [],
-  });
+  },
+}) {
+  const [oldCustData, setOldCustData] = useState(customerData);
+
+  //customization data
+  const [custData, setCustData] = useState(customerData);
 
   //state of options for each data
   const [interestAreasOptions, setInterestAreasOptions] = useState([]);
@@ -45,14 +49,26 @@ export default function CustomizationsEdit({}) {
     technologies: false,
   });
 
+  //resets changes, edit modes, error messages
+  const resetChanges = () => {
+    setCustData(oldCustData);
+    setEditable({
+      interest_areas: false,
+      article_level: false,
+      technologies: false,
+    });
+    setErrorMessages({});
+    setIsDataChanged(false);
+  };
+
   // handle submit
   const handleSubmit = (e) => {
     e.preventDefault();
     console.log(custData);
   };
 
   return (
-    <Container className="my-3">
+    <Container className="my-3 mx-0" fluid>
       <h2 className="settings-header">Customizations</h2>
       <div className="settings-divider"></div>
       <Form noValidate onSubmit={handleSubmit}>
@@ -111,25 +127,23 @@ export default function CustomizationsEdit({}) {
             />
           </Col>
         </Row>
-        {isDataChanged && (
+        {/*Show if any are in edit mode*/}
+        {Object.values(editable).some((ele) => ele) && (
           <Stack
             direction="horizontal"
             gap={3}
             className="mt-3 justify-content-end "
           >
+            {/*only show save if there are actual changes*/}
+            {isDataChanged && (
+              <div>
+                <Button className="settings-confirm-button" type="submit">
+                  Save
+                </Button>
+              </div>
+            )}
             <div>
-              <Button className="settings-confirm-button" type="submit">
-                Save
-              </Button>
-            </div>
-            <div>
-              <Button
-                className="settings-cancel-button"
-                onClick={() => {
-                  setIsDataChanged(false);
-                  window.location.reload();
-                }}
-              >
+              <Button className="settings-cancel-button" onClick={resetChanges}>
                 Cancel
               </Button>
             </div>

frontend/src/Components/Settings/Profile/ProfileEdit.jsx

@@ -14,14 +14,17 @@ import "../Settings.scss";
 import * as auth from "../../auth/auth";
 import PasswordChangeModal from "./PasswordChangeModal";
 import ArrowMarker from "../../ArrowMarker/ArrowMarker";
-export default function ProfileEdit({}) {
-  const [profileData, setProfileData] = useState({
+export default function ProfileEdit({
+  profile = {
     fname: "Joe",
     lname: "",
     email: "[email protected]",
     username: "jsmith10",
     password: "password",
-  });
+  },
+}) {
+  const [profileDataCopy, setProfileDataCopy] = useState(profile);
+  const [profileData, setProfileData] = useState(profile);
 
   // keep track of chnanges
   const [isDataChanged, setIsDataChanged] = useState(false);
@@ -51,6 +54,19 @@ export default function ProfileEdit({}) {
     });
   };
 
+  //resets changes, edit modes, error messages
+  const resetChanges = () => {
+    setProfileData(profileDataCopy);
+    setEditable({
+      fname: false,
+      lname: false,
+      email: false,
+      username: false,
+      password: false,
+    });
+    setErrorMessages({});
+    setIsDataChanged(false);
+  };
   // handle submit
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -75,7 +91,7 @@ export default function ProfileEdit({}) {
   };
 
   return (
-    <Container className="my-3">
+    <Container className="my-3 mx-0" fluid>
       <h2 className="settings-header">Profile</h2>
       <div className="settings-divider"></div>
 
@@ -298,25 +314,23 @@ export default function ProfileEdit({}) {
           </Row>
         </div>
 
-        {isDataChanged && (
+        {/*Show if any are in edit mode*/}
+        {Object.values(editable).some((ele) => ele) && (
           <Stack
             direction="horizontal"
             gap={3}
             className="mt-3 justify-content-end "
           >
+            {/*only show save if there are actual changes*/}
+            {isDataChanged && (
+              <div>
+                <Button className="settings-confirm-button" type="submit">
+                  Save
+                </Button>
+              </div>
+            )}
             <div>
-              <Button className="settings-confirm-button" type="submit">
-                Save
-              </Button>
-            </div>
-            <div>
-              <Button
-                className="settings-cancel-button"
-                onClick={() => {
-                  setIsDataChanged(false);
-                  window.location.reload();
-                }}
-              >
+              <Button className="settings-cancel-button" onClick={resetChanges}>
                 Cancel
               </Button>
             </div>

frontend/src/Components/Settings/SavedArticles/ConfirmDeleteModal.jsx

@@ -8,23 +8,21 @@ export default function ConfirmDeleteModal({
 }) {
   return (
     <Modal show={isOpen} onHide={handleClose} centered>
-      <Modal.Header closeButton className="border-0" />
-      <ModalBody>
+      <Modal.Header
+        closeButton
+        className="settings-articles-bookmark-modal border-0"
+      />
+      <ModalBody className="settings-articles-bookmark-modal">
         <h5 className="text-center">
           Are you sure you want to remove the article(s) you selected?
         </h5>
         <div className="d-flex justify-content-between mt-4">
-          <Button
-            className="border-0 text-dark fw-medium"
-            style={{ backgroundColor: "#B9B2B2" }}
-            onClick={handleClose}
-          >
+          <Button className="settings-cancel-button" onClick={handleClose}>
             Cancel
           </Button>
 
           <Button
-            className="border-0 text-dark fw-medium"
-            style={{ backgroundColor: "#24BEEF" }}
+            className="settings-confirm-button"
             type="submit"
             onClick={() => {
               handleClose();

frontend/src/Components/Settings/SavedArticles/SavedArticles.jsx

@@ -102,7 +102,7 @@ export default function SavedArticles() {
     console.log(searchbarText);
   };
   return (
-    <Container className="my-3 h-100 d-flex flex-column">
+    <Container className="my-3 h-100 d-flex flex-column m-0" fluid>
       <h2 className="settings-header">Saved Articles</h2>
       <div className="settings-divider"></div>
 

frontend/src/Components/Settings/Settings.scss

@@ -48,6 +48,9 @@
 //settings edit button
 .settings-edit-button {
   border-width: 0 !important;
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
   &:hover {
     background-color: $primary !important;
     color: white !important;
@@ -152,6 +155,9 @@
   .settings-divider {
     border-color: $divider-dark;
   }
+  .settings-articles-bookmark-modal {
+    background: $primary-bg-dark;
+  }
 }
 
 @include color-mode(light) {
@@ -174,4 +180,7 @@
   .settings-divider {
     border-color: $divider-light;
   }
+  .settings-articles-bookmark-modal {
+    background: $primary-bg-light;
+  }
 }

frontend/src/pages/Settings/SettingsPage.scss

@@ -17,6 +17,6 @@
 
 .settings-navbar-column {
   @include media-breakpoint-up(lg) {
-    max-width: 300px !important;
+    max-width: 400px !important;
   }
 }