fixed css to avoid having overlapping content

jhcoll · Nov 30, 2021 · ebcdac0 · ebcdac0
1 parent 28b1e47
commit ebcdac0
Show file tree

Hide file tree

Showing 21 changed files with 213 additions and 278 deletions.
diff --git a/src/App.test.js b/src/App.test.js
@@ -1,7 +1,7 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import { render, screen } from "@testing-library/react";
+import App from "./App";
 
-test('renders learn react link', () => {
+test("renders learn react link", () => {
   render(<App />);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();

diff --git a/src/components/UI/Backdrop.js b/src/components/UI/Backdrop.js
@@ -1,7 +1,13 @@
 import classes from "./Backdrop.module.css";
 
-function Backdrop({ onClick, zIndex}) {
-  return <div className={classes.backdrop} onClick={onClick} style={{ zIndex: zIndex}}/>;
+function Backdrop({ onClick, zIndex }) {
+  return (
+    <div
+      className={classes.backdrop}
+      onClick={onClick}
+      style={{ zIndex: zIndex }}
+    />
+  );
 }
 
 export default Backdrop;
diff --git a/src/components/UI/ErrorModal.js b/src/components/UI/ErrorModal.js
@@ -1,12 +1,13 @@
 import Post from "./Post";
 import classes from "./ErrorModal.module.css";
+import action from "../posts/buttons/Button.module.css";
 
 function ErrorModal({ onClick, text }) {
   return (
     <Post>
       <div className={classes.error}>
         <div className={classes.text}>{text}</div>
-        <div className={classes.actions}>
+        <div className={action.actions}>
           <button onClick={onClick}>ok</button>
         </div>
       </div>

diff --git a/src/components/UI/ErrorModal.module.css b/src/components/UI/ErrorModal.module.css
@@ -1,33 +1,17 @@
 .error {
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-    border-radius: 6px;
-    background-color: white;
-    padding: 1rem;
-    text-align: center;
-    width: 30rem;
-    z-index: 15;
-    position: fixed;
-    top: 20vh;
-    left: calc(50% - 15rem);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  background-color: white;
+  padding: 1rem;
+  text-align: center;
+  width: 30rem;
+  z-index: 15;
+  position: fixed;
+  top: 20vh;
+  left: calc(50% - 15rem);
 }
 
 .text {
-    font-weight: bolder;
-    padding: 20px;
+  font-weight: bolder;
+  padding: 20px;
 }
-
-.actions button {
-    font: inherit;
-    cursor: pointer;
-    color: #77002e;
-    border: 1px solid #77002e;
-    background-color: transparent;
-    padding: 0.5rem 1.5rem;
-    margin: 3px;
-    border-radius: 4px;
-  }
-
-  .actions button:hover,
-  .actions button:active {
-    background-color: #ffe2ed;
-  }
diff --git a/src/components/UI/Post.module.css b/src/components/UI/Post.module.css
@@ -1,5 +1,5 @@
 .card {
-  background-color: white;
+  background-color: #ffffff;
   border-radius: 10px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
diff --git a/src/components/layout/MainNavigation.js b/src/components/layout/MainNavigation.js
@@ -1,7 +1,6 @@
 import { useState } from "react";
 import NewPostPage from "../../pages/NewPost";
 import classes from "./MainNavigation.module.css";
-import Post from "../UI/Post";
 import Backdrop from "../UI/Backdrop";
 import ErrorModal from "../UI/ErrorModal";
 
@@ -35,25 +34,21 @@ function MainNavigation({ setRefreshPost }) {
       </header>
       {showForm ? (
         <>
-          <div className={classes.NewPostPage}>
-            <Post>
-              <NewPostPage
-                onCancel={cancelForm}
-                setRefreshPost={setRefreshPost}
-                setErrorText={setErrorText}
-                setShowError={setShowError}
-              />
-            </Post>
-          </div>
+          <NewPostPage
+            onCancel={cancelForm}
+            setRefreshPost={setRefreshPost}
+            setErrorText={setErrorText}
+            setShowError={setShowError}
+          />
           <Backdrop onClick={cancelForm} />
         </>
       ) : (
         ""
       )}
       {showError ? (
         <>
-          <ErrorModal onClick={errorHandler} text={errorText}/>
-          <Backdrop onClick={errorHandler} zIndex={14}/>
+          <ErrorModal onClick={errorHandler} text={errorText} />
+          <Backdrop onClick={errorHandler} zIndex={14} />
         </>
       ) : (
         ""

diff --git a/src/components/layout/MainNavigation.module.css b/src/components/layout/MainNavigation.module.css
@@ -4,15 +4,18 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: blue;
-  padding: 0 2%;
+  background-color: #3b5998;
+  padding: 0 3%;
+  position: fixed;
+  top: 0;
+  left: 0;
 }
 
 .title {
   font-size: 2rem;
   color: white;
   font-weight: bold;
-  padding-left: 30%;
+  padding-left:10%;
 }
 
 .header ul {
@@ -48,38 +51,5 @@
 .header label:hover,
 .header label:active,
 .header label.active {
-  color: #fcb8d2;
-}
-
-.badge {
-  background-color: #cc2062;
-  color: white;
-  border-radius: 12px;
-  padding: 0 1rem;
-  margin-left: 0.5rem;
-}
-
-.NewPostPage {
-  position: fixed;
-  z-index: 2;
-  margin-left: 25%;
-  margin-top: 5%;
-  width: 50%;
-}
-
-.cancel {
-  float: right;
-  font: inherit;
-  cursor: pointer;
-  color: black;
-  padding: 0.5rem 1.5rem;
-  border: 1px solid #77002e;
-  border-radius: 4px;
-  font-weight: bold;
-}
-
-.cancel:hover,
-.cancel:active {
-  background-color: darkblue;
-  border-color: #a50e48;
+  color: #8b9dc3;
 }
diff --git a/src/components/posts/AddPostForm.js b/src/components/posts/AddPostForm.js
@@ -1,7 +1,9 @@
 import { useRef } from "react";
+import Post from "../UI/Post";
 import classes from "./AddPostForm.module.css";
+import action from "./buttons/Button.module.css";
 
-function AddPostForm({onCancel, onAddPost, setErrorText, setShowError}) {
+function AddPostForm({ onCancel, onAddPost, setErrorText, setShowError }) {
   const authorInputRef = useRef();
   const avatarInputRef = useRef();
   const contentInputRef = useRef();
@@ -13,61 +15,71 @@ function AddPostForm({onCancel, onAddPost, setErrorText, setShowError}) {
     const enteredAvatar = avatarInputRef.current.value;
     const enteredContent = contentInputRef.current.value;
 
-    if(validation(enteredAuthor, enteredContent)){
+    if (validation(enteredAuthor, enteredContent)) {
       authorInputRef.current.value = "";
       avatarInputRef.current.value = "#000000";
       contentInputRef.current.value = "";
-  
+
       const postData = {
         author: enteredAuthor,
         avatar: enteredAvatar,
         date: enteredDate,
         content: enteredContent,
         likes: 0,
       };
-  
+
       onAddPost(postData);
     } else {
-
     }
   }
 
-  function validation(Author, Content){
+  function validation(Author, Content) {
     const inputRegex = /(^[A-z0-9À-ž.,'!?&$%()\s]+$)/;
-    if(!inputRegex.test(Author)){
-      setErrorText("Invalid Author Entry")
+    if (!inputRegex.test(Author)) {
+      setErrorText("Invalid Author Entry");
       setShowError(true);
       return false;
-    } else if(!inputRegex.test(Content)){
-      setErrorText("Invalid Content Entry")
+    } else if (!inputRegex.test(Content)) {
+      setErrorText("Invalid Content Entry");
       setShowError(true);
       return false;
-    }else {
+    } else {
       return true;
     }
   }
 
   return (
-    <form className={classes.form} onSubmit={submitHandler}>
-      <div className={classes.control}>
-        <label htmlFor="author">Author: </label>
-        <input type="text" required id="author" ref={authorInputRef} />
-      </div>
-      <div className={classes.control}>
-        <label htmlFor="avatarColour">Avatar Colour: </label>
-        <input type="color" required id="avatarColour" ref={avatarInputRef} />
-      </div>
-      <div className={classes.control}>
-        <label htmlFor="content">Content: </label>
-        <textarea id="content" required rows="5" ref={contentInputRef} />
-      </div>
-      <div className={classes.actions}>
-        <button onClick={onCancel}>Cancel</button>
-        <div className={classes.submit}>
-          <button>Post</button>
-        </div>
-      </div>
-    </form>
+    <div className={classes.formPost}>
+      <Post>
+        <form className={classes.form} onSubmit={submitHandler}>
+          <div className={classes.control}>
+            <label htmlFor="author">Author: </label>
+            <input type="text" required id="author" ref={authorInputRef} />
+          </div>
+          <div className={classes.control}>
+            <label htmlFor="avatarColour">Avatar Colour: </label>
+            <input
+              type="color"
+              required
+              id="avatarColour"
+              ref={avatarInputRef}
+            />
+          </div>
+          <div className={classes.control}>
+            <label htmlFor="content">Content: </label>
+            <textarea id="content" required rows="5" ref={contentInputRef} />
+          </div>
+          <div className={action.actions}>
+            <div className={classes.options}>
+              <button onClick={onCancel}>Cancel</button>
+              <div className={classes.submit}>
+                <button>Post</button>
+              </div>
+            </div>
+          </div>
+        </form>
+      </Post>
+    </div>
   );
 }
 

diff --git a/src/components/posts/AddPostForm.module.css b/src/components/posts/AddPostForm.module.css
@@ -1,5 +1,14 @@
+.formPost {
+  position: fixed;
+  z-index: 2;
+  align-items: center;
+  margin-left: 35%;
+  margin-top: 5%;
+  width: 30%;
+}
+
 .form {
-  padding: 10% 10% 10% 10%;
+  padding: 5% 5% 5% 5%;
 }
 
 .control {
@@ -22,28 +31,12 @@
   width: 100%;
 }
 
-.actions {
+.options {
   margin-top: 1rem;
-  text-align: right;
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
 }
 
-.actions button {
-  font: inherit;
-  cursor: pointer;
-  background-color: transparent;
-  color: #77002e;
-  border: 1px solid #77002e;
-  padding: 0.5rem 1.5rem;
-  margin: 3px;
-  border-radius: 4px;
-}
 .submit {
   font-weight: bold;
 }
-
-.actions button:hover,
-.actions button:active {
-  background-color: #ffe2ed;
-}