Styling2

chore-no-more/.eslintrc.js

@@ -22,6 +22,9 @@ module.exports = {
     "rules": {
         "react/prop-types": "warn",
         "react/jsx-key": "warn",
+        "no-unused-vars": "warn",
+        "react/react-in-jsx-scope": "warn",
+        "react/no-unknown-property": "warn",
         "lcom/lcom4": "warn",
         "complexity": ["warn", 10]
     }

chore-no-more/src/App.css

@@ -4,41 +4,17 @@
 }
 
 
-.App-header {
-  background-color: #383e49;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: rgb(224, 11, 11);
-}
-
-.App-link {
-  color: #02141a;
-}
-
 
 
 .page-break {
   position: absolute;
   background-color: tan;
   width: 2px;
   top: 200px;
-  bottom: 200px;
+  bottom: 70px;
   left: 50%;
 }
 
-.welcome {
-  color: black;
-}
-
-.header {
-  background-color: tan;
-  font-weight: bold;
-}
-
 .create-account {
   background-color: tan;
 
@@ -48,7 +24,7 @@
 
   border-radius: 25px;
   border: 1px solid black; /*sets border thickness to 1 pixel, solid line, red*/
-  height: 150px; /* height of box model is taller */
+  height: 300px; /* height of box model is taller */
   width: 300px; /* width is 300 pixels instead of spanning the entire line*/
   padding: 20px; /*adds spacing between content and border*/
   margin: 20px; /*adds space outside the border*/
@@ -64,51 +40,213 @@
 
   border-radius: 25px;
   border: 1px solid black; /*sets border thickness to 1 pixel, solid line, red*/
-  height: 150px; /* height of box model is taller */
+  height: 300px; /* height of box model is taller */
   width: 300px; /* width is 300 pixels instead of spanning the entire line*/
   padding: 20px; /*adds spacing between content and border*/
   margin: 20px; /*adds space outside the border*/
 }
 
 #create-account-button {
   position: absolute;
-  top: 360px;
+  top: 500px;
   left: 270px;
 }
 
 #sign-in-button {
   position: absolute;
-  top: 360px;
+  top: 500px;
   right: 290px;
 }
 
-.button1 {
+.gsign-in {
   background-color: lightgrey;
   position: absolute;
+  top: 80px;
+  right: 35px;
+}
+
+#sign-out {
+  background-color: #333 !important;
+  color: white;
+  position: relative;
+  top: 20px;
+}
+
+.chores-display {
+  position: relative;
+  left: 300px;
   top: 50px;
-  right: 20px;
+
+  display: flex;
+
+
+  overflow-x: auto;
+  overflow: hidden;
+  border: 5px solid black; /*sets border thickness to 1 pixel, solid line, red*/
+  height: 500px; /* height of box model is taller */
+  width: 410px; /* width is 300 pixels instead of spanning the entire line*/
+  padding: 0; /*adds spacing between content and border*/
+  margin: 20px; /*adds space outside the border*/
 }
 
-#todo {
+.users-display {
+  position: relative;
+  right: 300px;
+  bottom: 470px;
+  display: flexbox;
+  overflow: scroll;
+  border: 5px solid black; /*sets border thickness to 1 pixel, solid line, red*/
+  height: 300px; /* height of box model is taller */
+  width: 500px; /* width is 300 pixels instead of spanning the entire line*/
+  padding: 0; /*adds spacing between content and border*/
+  margin: 20px; /*adds space outside the border*/
+}
+
+.header {
+  flex-shrink: 0;
+  margin: 0;
+  width: 100%;
+  font-size: 50;
+  font-weight: bold;
+  justify-content: center;
   position: absolute;
-  top: 100px;
-  left: 130px;
+  top: 0px;
+  border-bottom: 2px solid black;
+  z-index: 2;
+  padding-top: 10px;
+  padding-bottom: 10px;
 
 }
 
-#list1 {
+.body {
+  padding: 10px;
+  margin-top: 40px;
+  display: grid;
   position: absolute;
-  top: 200px;
-  left: 140px;
+  align-self: center;
+  width: 100%;
+  top: 10px;
+  bottom: 9%;
+  grid-template-columns: 1fr 1fr;
+  gap: 15px;
+  overflow: scroll;
+
+
 }
-#list2 {
+
+.body2 {
+  padding-top: 40px;
+  margin-top: 40px;
+  display: list-item;
   position: absolute;
-  top: 470px;
-  left: 140px;
-}
+  width: 100%;
+  top: 10px;
+  bottom: 10%;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  overflow: auto;
+
+
 
-#comp {
+}
+.footer {
+  flex-shrink: 0;
+  margin: 0;
+  width: 100%;
+  font-size: 50;
+  border-top: 2px solid black;
+  padding-top: 10px;
+  padding-bottom: 10px;
   position: absolute;
-  top: 400px;
-  left: 100px;
-}
+  bottom: 0px;
+
+
+}
+
+.divider {
+  width: 15px;
+  height: auto;
+  display: inline-block;
+}
+
+h1,h2,h3 {
+  margin: 0;
+}
+
+
+nav {
+  background: var(--primary);
+  padding: 10px 20px;
+  text-align: center;
+}
+nav a {
+  color: #f2f2f2;
+  margin: 10px;
+  display: inline-block;
+}
+nav h1 {
+  color: #fff;
+}
+.page {
+  max-width: 1200px;
+  margin: 20px auto;
+  padding: 20px;
+}
+
+
+/* smoothie grid */
+.chore-card {
+  width: 100%;
+  padding: 15px;
+  background: #fff;
+  box-sizing: border-box;
+  border-radius: 6px;
+  border: 1px solid black;
+  position: relative;
+}
+
+.chore-card .buttons {
+  text-align: center;
+}
+.chore-card i {
+  color: #bbb;
+  margin-left: 5px;
+  margin-right: 5px;
+  font-size: 1.2em;
+  padding: 5px;
+  background: #eee;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+/* forms */
+/*form {
+  background: #fff;
+  padding: 20px;
+  max-width: 480px;
+  margin: 0 auto;
+  border-radius: 6px;
+}*/
+form input, form textarea {
+  display: block;
+  width: 100%;
+  padding: 6px;
+  box-sizing: border-box;
+  border: 1px solid #ccc;
+  margin: 10px 0 20px 0;
+}/*
+form button {
+  background: var(--primary);
+  color: #fff;
+  border: 0;
+  border-radius: 6px;
+  padding: 6px 8px;
+  font-family: "Poppins";
+  cursor: pointer;
+}
+
+:root {
+  --primary: #12bca2;
+  --secondary: #6d15df;
+}
+*/

chore-no-more/src/App.js

@@ -1,39 +1,21 @@
 import './App.css';
 import React from 'react';
 import { useSession, useSessionContext } from '@supabase/auth-helpers-react';
-import { Groups } from './components/Groups';
-import { SignIn } from './components/SignIn';
-import { Stylesheet } from './components/Stylesheet'
-import Navbar from './Navbar'
-
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
+import Login from './pages/Login';
+import ErrorPage from './pages/ErrorPage';
+import Instructions from './pages/HowToUse';
+import SignUp from './components/SignUp';
 
 function App() {
-  const { isLoading } = useSessionContext();
-  const session = useSession();
-
-  if (isLoading) {
-    return <>Loading...</>
-  }
 
   return (
-    <div className="App">
-      <Navbar />
-      <div style={{ width: "400px", margin: "30px auto" }}>
-        {session ? (
-          <>
-            <Stylesheet />
-
-            <br></br>
-            <Groups />
-          </>
-        ) : (
-          <SignIn />
-        )}
-      </div>
-    </div>
+      <Routes>
+          <Route path='/' element={<Login />} />
+          <Route path='/instructions' element={<Instructions/>} />
+          <Route path='*' element={<ErrorPage />} />
+        </Routes>
   );
 }
-
-
 
-export default App;
+export default App;

chore-no-more/src/Navbar.js

@@ -13,15 +13,11 @@ export default function Navbar () {
             {session ? (
                 <ul>
                     <CustomLink to="/instructions">How To Use</CustomLink>
-                    <CustomLink to="/groups">Groups</CustomLink>
-                    <CustomLink to="/calendar">Calendar</CustomLink>
                     <SignOut />
                 </ul>
             ) : (
                 <ul>
                     <CustomLink to="/instructions">How To Use</CustomLink>
-                    <CustomLink to="/groups">Groups</CustomLink>
-                    <CustomLink to="/calendar">Calendar</CustomLink>
                 </ul>
             )}
         </nav>

chore-no-more/src/components/AddPopup.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import './Popup.css'
+
+function AddPopup(props) {
+  return (props.trigger) ? (
+    <div className='popup'>
+        <div className='popup-inner'>
+            <button className='close-btn' onClick={() => props.setTrigger(false)}>Close</button>
+            { props.children }
+        </div>
+    </div>
+  ) : '';
+}
+
+export default AddPopup

chore-no-more/src/components/ChangePopup.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import './Popup.css'
+
+function ChangePopup(props) {
+  return (props.trigger) ? (
+    <div className='popup'>
+        <div className='popup-inner'>
+            <button className='close-btn' onClick={() => props.setTrigger(false)}>Close</button>
+            { props.children }
+        </div>
+    </div>
+  ) : '';
+}
+
+export default ChangePopup