reduce space between exercises in workout, remove edit button from userworkouts

components/List/Element.jsx

@@ -59,7 +59,13 @@ function ElementEditButton({ element, onDelete, type }) {
   return null;
 }
 
-export default function Element({ element, type, onDelete, testAuth }) {
+export default function Element({
+  element,
+  type,
+  onDelete,
+  testAuth,
+  canEdit,
+}) {
   /* Paths of the images of the favourite button */
   const star = '/images/star.png';
   const starFilled = '/images/starFilled.png';
@@ -81,11 +87,11 @@ export default function Element({ element, type, onDelete, testAuth }) {
   const [allowEditing, setAllowEditing] = useState(false);
   useEffect(() => {
     if (currUser) {
-      if (currUser.role === 0) {
+      if (currUser.role === 0 && canEdit) {
         setAllowEditing(true);
       }
     }
-  }, [currUser]);
+  }, [canEdit, currUser]);
 
   useEffect(() => {
     /* Set the state of the favourite button based on the user's favourites */

components/List/List.jsx

@@ -20,6 +20,7 @@ import SelectedElement from './SelectedElement';
  * @param {*} setSelected The function that sets the state of selected
  * @param {*} type Either "exercises", "workouts", or "user" (for user workouts).
  * @param {*} onDelete The callback function to handle an element being deleted from the list.
+ * @param {*} allowEditing Allows for editing (must be an admin to edit).
  * @returns
  */
 export default function List({
@@ -29,6 +30,7 @@ export default function List({
   setSelected,
   type,
   onDelete,
+  allowEditing,
 }) {
   // A function to handle when a new element is selected
   const handleChange = (e) => {
@@ -114,9 +116,15 @@ export default function List({
                     type={type}
                     onDelete={onDelete}
                     onClick={handleChange}
+                    canEdit={allowEditing}
                   />
                 ) : (
-                  <Element element={element} type={type} onDelete={onDelete} />
+                  <Element
+                    element={element}
+                    type={type}
+                    onDelete={onDelete}
+                    canEdit={allowEditing}
+                  />
                 )}
               </ToggleButton>
             ))}

components/List/SelectedElement.jsx

@@ -64,8 +64,9 @@ function ElementEditButton({ element, onDelete, type }) {
  * @param {*} type The type of element, i.e. exercise or workout
  * @param {*} onDelete A function that handles how the exercise or workout is deleted from the database
  * @param {*} onClick A function that handles when the element is clicked
+ * @param {*} canEdit Allows for editing (must be an admin to edit).
  */
-export default function Element({ element, type, onDelete, onClick }) {
+export default function Element({ element, type, onDelete, onClick, canEdit }) {
   /* Paths of the images of the favourite button */
   const star = '/images/star.png';
   const starFilled = '/images/starFilled.png';
@@ -79,11 +80,11 @@ export default function Element({ element, type, onDelete, onClick }) {
   const [allowEditing, setAllowEditing] = useState(false);
   useEffect(() => {
     if (authUser) {
-      if (authUser.role === 0) {
+      if (authUser.role === 0 && canEdit) {
         setAllowEditing(true);
       }
     }
-  }, [authUser]);
+  }, [authUser, canEdit]);
 
   useEffect(() => {
     /* Set the state of the favourite button based on the user's favourites */

pages/exercises/index.jsx

@@ -180,6 +180,7 @@ export default function ExercisesPage({ testData }) {
               setSelected={onClick}
               type="exercises"
               onDelete={onDelete}
+              allowEditing
             />
           </Col>
         </Row>

pages/userworkouts/index.jsx

@@ -115,6 +115,7 @@ export default function WorkoutsPage({ testData }) {
               setSelected={onClick}
               type="user"
               onDelete={onDelete}
+              allowEditing
             />
           </Col>
         </Row>

pages/workouts/index.jsx

@@ -146,6 +146,7 @@ export default function WorkoutsPage({ testData }) {
               setSelected={onClick}
               type="workouts"
               onDelete={onDelete}
+              allowEditing
             />
           </Col>
         </Row>

styles/WorkoutForms/ExerciseElement.module.css

@@ -1,6 +1,6 @@
 .exercise {
   margin: 0;
-  margin-bottom: 20%;
+  margin-bottom: 10px;
   border: 1px solid #ced4da;
   border-radius: 10px;
 }