331F22 · DrDisturbance · Dec 1, 2022 · Dec 1, 2022 · Dec 1, 2022 · Dec 1, 2022
diff --git a/Pierre b/Pierre
diff --git a/client/public/BSF_Image.jpg b/client/public/BSF_Image.jpg
diff --git a/client/public/index.html b/client/public/index.html
@@ -11,6 +11,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
+    <img id="BSF_Logo" src="BSF_Image.jpg" alt="BSF Logo">
     <div id="root"></div>
   </body>`
 </html>
diff --git a/client/src/components/App/App.css b/client/src/components/App/App.css
@@ -1,11 +1,33 @@
 body {
   margin:0 10px;
 }
+
+#BSF_Logo{
+  padding: 50px;
+  padding-bottom: 100px;
+  display: flex;
+  width: 50%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .App {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: 'Montserrat',sans-serif;
   max-width:600px;
   margin: auto;
 }
+
+.addEntry{
+  margin-left: auto;
+  margin-right: auto;
+  width: 500px;
+  padding: 40px;
+  background: white;
+  box-sizing: border-box;
+  box-shadow: 0 15px 25px rgba(28, 28, 28, 0.6);
+  border-radius: 10px;
+}
+
 #userInput {
   display: flex;
   flex-direction: column;
@@ -15,13 +37,15 @@ body {
   margin: auto;
 }
 #userInput input{
-  width: 90%;
-  margin: 10px;
-  padding: 10px;
-  font-size: 2rem;
-  border-radius: 5px;
-  color: #333;
-  background-color:rgba(135, 206, 235, 0.3);
+  width: 100%;
+  padding: 10px 0;
+  font-size: 16px;
+  color: black;
+  margin-bottom: 30px;
+  border: none;
+  border-bottom: 1px solid black;
+  outline: none;
+  background: transparent;
 }
 #firstLastName {
   display: grid;
@@ -41,6 +65,20 @@ body {
   padding: 10px;
   width: 50%;
   margin: 10px auto;
+  color: white;
+  background-color:  rgb(175, 20, 20);;
+}
+#editButton{
+  color: white;
+  background-color:  rgb(175, 20, 20);
+}
+.update{
+  color: white;
+  background-color:  rgb(175, 20, 20);
+}
+.delete{
+  color: white;
+  background-color:  rgb(175, 20, 20);
 }
 .editField{
   margin: 20px 0;
@@ -74,10 +112,26 @@ body {
 }
 #doneButton{
   display: none;
+  color: white;
+  background-color:  rgb(175, 20, 20);
 }
 #editPasscodeInput{
   visibility: hidden;
+  width: 50%;
+  padding: 10px 0;
+  font-size: 16px;
+  color: black;
+  margin-bottom: 30px;
+  border: none;
+  border-bottom: 1px solid black;
+  outline: none;
+  background: transparent
 }
 #submitEmailsButton{
   display: none;
+  color: white;
+  background-color:  rgb(175, 20, 20);
+}
+#addEntryLine{
+  padding-bottom: 100px;
 }
diff --git a/client/src/components/App/App.js b/client/src/components/App/App.js
@@ -1,17 +1,17 @@
 import React from 'react';
 import './App.css';
 import AddEntry from '../AddEntry.jsx';
+import BanEntry from '../BanEntry.jsx';
 import CurrentEntries from '../CurrentEntries.jsx';
 import Footer from '../Footer.jsx'
 
 function App() {
 
   return (
     <div className="App">
-      <h1>Entries</h1>
 
       <AddEntry />
-      <hr />
+      <div id ='AddEntryLine'><hr /> </div>
       <CurrentEntries />
       <hr />
       <Footer />

diff --git a/client/src/components/BanEntry.jsx b/client/src/components/BanEntry.jsx
@@ -0,0 +1,62 @@
+import { useState, useRef } from 'react';
+import axios from 'axios'
+
+const BanEntry = () => {
+
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [emailAddress, setEmailAddress] = useState('');
+  const [entryList, setEntryList] = useState([])
+
+  const ref1 = useRef(null);
+  const ref2 = useRef(null);
+  const ref3 = useRef(null);
+
+  // CREATE (POST)
+  function submitEntry() {
+    axios.post(`${process.env.REACT_APP_HOST}/api/create`, { first: firstName, last: lastName, email: emailAddress }).then((response) => {
+      setEntryList([...entryList, { first_name: firstName, last_name: lastName, email_address: emailAddress }]
+      )
+    })
+
+    ref1.current.value = ""
+    setFirstName('')
+    ref2.current.value = ""
+    setLastName('')
+    ref3.current.value = ""
+    setEmailAddress('')
+  }
+
+  function refreshPage() {
+    window.location.reload(false);
+  }
+
+  return (
+    <div className="banEntry">
+      <h2>Ban an Entry</h2>
+      <div id='userInput'>
+        <div>
+          <label htmlFor="firstName">First Name</label>
+          <input ref={ref1} id="firstName" type="text" name="firstName" onChange={(e) => setFirstName(e.target.value)} />
+        </div>
+        <div>
+          <label htmlFor="lastName">Last Name</label>
+          <input ref={ref2} id="lastName" type="text" name="lastName" onChange={(e) => setLastName(e.target.value)} />
+        </div><br />
+        <div className="emailField" >
+          <label htmlFor="email">Email Address</label>
+          <input ref={ref3} id="email" type="email" name="email" onChange={(e) => setEmailAddress(e.target.value)} />
+        </div>
+        <button className="submitBtn"
+          onClick={() => {
+            if (firstName.length > 0 && lastName.length > 0 && emailAddress.length > 0) {
+              submitEntry(); refreshPage();
+            }
+          }}
+        >Ban Entry</button>
+      </div>
+    </div>
+  )
+}
+
+export default BanEntry;