Basic styling

frontend/src/App.jsx

@@ -7,6 +7,7 @@ import { Rewards } from './pages/RewardPage'
 import { UserProfile } from './pages/UserProfilePage'
 import { Login } from './pages/LoginPage'
 import { GlobalStyle } from './styles/GlobalStyles'
+import { Signup } from './pages/SignupPage'
 
 export const App = () => {
 
@@ -21,7 +22,9 @@ export const App = () => {
         <Route path="/rewards" element={<Rewards />} />
         <Route path="/profile" element={<UserProfile />} />
         <Route path="/login" element={<Login />} />
+        <Route path="/signup" element={<Signup />} />
       </Routes>
     </>
   );
 };
+

frontend/src/components/Avatar.jsx

@@ -0,0 +1,7 @@
+export const Avatar = () => {
+  return (
+    <>
+      🤩
+    </>
+  )
+}

frontend/src/components/CreateQuest.jsx

@@ -3,18 +3,30 @@ import styled from 'styled-components'
 export const CreateQuest = () => {
   return (
     <Form>
-      <fieldset>Create new quest
-        <input type="text" />
-        <input type="text" />
-        <input type="text" />
+      <Label>
+        Create new quest
+        <input type="text" placeholder='Text input' />
+
+        <select name="category" id="QuestCategory" >
+          <option value="">Select a category</option>
+        </select>
+
+        <select name="time" id="QuestTime" >
+          <option value="">Time needed</option>
+        </select>
+
         <button type="submit">Add a quest</button>
-      </fieldset>
+      </Label>
     </Form>
   )
 }
 
 const Form = styled.form`
+  margin: 10px;
+  background-color: var(--accent-color)
+`
+
+const Label = styled.label`
   display: flex;
   flex-direction: column;
-  margin: 5px;
 `

frontend/src/components/Header.jsx

@@ -22,7 +22,7 @@ export const Header = () => {
 const Div = styled.div`
   display: flex;
   background-color: var(--secondary-color);
-  margin: 5px 8px;
+  margin: 5px 10px;
 `
 
 const P = styled.p`

frontend/src/components/LoginForm.jsx

@@ -0,0 +1,24 @@
+import styled from 'styled-components'
+import { Link } from 'react-router-dom'
+
+export const LoginForm = () => {
+  return (
+    <>
+      <Form>
+          <h4>Welcome Back! Log in now:</h4>
+          <input type="email" placeholder="email" />
+          <input type="password" placeholder="password" />
+          <button type="submit">Log in</button>
+          <Link to="/signup">Not a user? Sign up</Link>
+      </Form>
+    </>
+  )
+}
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  background-color: var(--primary-color);
+  margin: 10px;
+  border-radius: 12px;
+`

frontend/src/components/Navbar.jsx

@@ -6,9 +6,11 @@ export const Navbar = () => {
     <>
       <Nav>
         <StyledLink to='/'>Home</StyledLink>
+        <StyledLink to='/profile'>Profile</StyledLink>
         <StyledLink to='/feed'>Friends</StyledLink>
         <StyledLink to='/about'>About</StyledLink>
         <StyledLink to='/login'>Log in</StyledLink>
+        <button>Log out</button>
       </Nav>
     </>
   )
@@ -18,10 +20,10 @@ const Nav = styled.nav`
   display: flex;
   background-color: var(--primary-color);
   justify-content: space-between;
-  max-width: 500px;
   padding: 5px;
 `
 
 const StyledLink = styled(Link)`
   text-decoration: none;
-`
+`
+// TODO: decide: Should navbar be hamburger menu on phone size?

frontend/src/components/QuestLibrary.jsx

@@ -0,0 +1,17 @@
+export const QuestLibrary = () => {
+  return (
+    <>
+      <h2>Quest library</h2>
+      <ul>
+        <li>Weekly shopping</li>
+        <li>Laundry</li>
+        <li>Clean out fridge</li>
+        <li>Dust</li>
+        <li>Mop</li>
+        <li>Organize</li>
+      </ul>
+    </>
+  )
+}
+
+// TODO  Decide: QuestLibrary hardcoded as list at the moment. Keep that way? Or create Library task card and map over?

frontend/src/components/SignupForm.jsx

@@ -0,0 +1,25 @@
+import styled from 'styled-components'
+import { Link } from 'react-router-dom'
+
+export const SignupForm = () => {
+  return (
+      <Form>
+          <h4>Register new user</h4>
+          <input type="text" placeholder="Username" />
+          <input type="email" placeholder="email" />
+          <input type="password" placeholder="password" />
+          <button type="submit">Register</button>
+          <Link to="/login">I already have an account</Link>
+      </Form>
+  )
+}
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  background-color: var(--primary-color);
+  margin: 10px;
+  border-radius: 12px;
+`
+
+// TODO: This is only basic form and step 1/2. Add step 2 (add code sent to email to verify)

frontend/src/components/StrikeDisplay.jsx

@@ -0,0 +1,7 @@
+export const Strike = () => {
+  return (
+    <>
+      <p>Daily strike:</p>
+    </>
+  )
+}

frontend/src/components/cards/QuestCard.jsx

@@ -0,0 +1,24 @@
+import styled from 'styled-components'
+
+export const QuestCard = () => {
+  return (
+    <Div>
+      <div>
+        <h4>Name</h4>
+      </div>
+      <div>
+        <p>Task:</p>
+        <p>Time spent:</p>
+        <p>Kudos: 🙌</p>
+      </div>
+    </Div>
+  )
+}
+
+const Div = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: var(--primary-color);
+  margin: 10px;
+  border-radius: 12px;
+`

frontend/src/pages/AboutPage.jsx

@@ -1,5 +1,11 @@
+import { Navbar } from '../components/Navbar'
+
 export const About = () => {
   return (
-    <h1>About page</h1>
+    <>
+      <Navbar />
+      <p>What does the app do</p>
+      <p>How to get started</p>
+    </>
   )
 }

frontend/src/pages/FriendFeedPage.jsx

@@ -1,5 +1,18 @@
+import { QuestCard } from '../components/cards/QuestCard'
+import { Navbar } from '../components/Navbar'
+
 export const FriendFeed = () => {
   return (
-    <h1>Friend feed page</h1>
+    <>
+      <Navbar />
+      <h2>My friends finished quests</h2>
+      <form>
+        <label>
+          Add friend:
+          <input type="search" placeholder="Search 🔎"/>
+        </label>
+      </form>
+      <QuestCard />
+    </>
   )
 }

frontend/src/pages/HomePage.jsx

@@ -2,6 +2,7 @@ import { Navbar } from '../components/Navbar'
 import { Header } from '../components/Header'
 import styled from 'styled-components'
 import { CreateQuest } from '../components/CreateQuest'
+import { QuestLibrary } from '../components/QuestLibrary'
 
 export const Home = () => {
   return (
@@ -15,13 +16,16 @@ export const Home = () => {
       <Div>
         <p>Motivational things</p>
       </Div>
+      <QuestLibrary />
     </>
   )
 }
 
 const Div = styled.div`
   display: flex;
   background-color: var(--accent-color);
-  margin: 5px;
+  margin: 10px;
   justify-content: center;
-`
+`
+
+// TODO: This is home page for logged out user. Decide what to keep there. Simplify? 

frontend/src/pages/LoginPage.jsx

@@ -1,5 +1,13 @@
+import { Navbar } from '../components/Navbar'
+import { LoginForm } from '../components/LoginForm'
+
 export const Login = () => {
   return (
-    <h1>Log in page</h1>
+    <>
+      <Navbar />
+      <LoginForm />
+    </>
   )
-}
+}
+
+// TODO: Decide, for now login and signup are pages. Do we want it to be modals?

frontend/src/pages/QuestPage.jsx

@@ -1,5 +1,38 @@
+import { Navbar } from "../components/Navbar"
+import styled from 'styled-components'
+
 export const Quests = () => {
   return (
-    <h1>Quest page</h1>
+    <>
+      <Navbar />
+        <Form>
+          <h3>Get ready for your quest of the day!</h3>
+          <Label>
+            How much time do you have today?
+            <select name="" id="">
+              <option value="10">10 min</option>
+              <option value="20">20 min</option>
+              <option value="30">30 min</option>
+              <option value="60">1 hour</option>
+            </select>
+          </Label>
+          <button type="submit">Get quest</button>
+          <button>Toss coin</button>
+        </Form>
+    </>
   )
-}
+}
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  background-color: var(--primary-color);
+  margin: 10px;
+  border-radius: 12px;
+  padding: 10px;
+`
+
+const Label = styled.label`
+  display: flex;
+  flex-direction: column;
+`

frontend/src/pages/RewardPage.jsx

@@ -2,4 +2,6 @@ export const Rewards = () => {
   return (
     <h1>Rewards page</h1>
   )
-}
+}
+
+// TODO: Put content here + set up route

frontend/src/pages/SignupPage.jsx

@@ -0,0 +1,11 @@
+import { Navbar } from '../components/Navbar'
+import { SignupForm } from '../components/SignupForm'
+
+export const Signup = () => {
+  return (
+    <>
+      <Navbar />
+      <SignupForm />
+    </>
+  )
+}

frontend/src/pages/UserProfilePage.jsx

@@ -1,5 +1,33 @@
+import { Navbar } from '../components/Navbar'
+import { Header } from '../components/Header'
+import styled from 'styled-components'
+import { CreateQuest } from '../components/CreateQuest'
+import { QuestLibrary } from '../components/QuestLibrary'
+import { Avatar } from '../components/Avatar'
+import { Strike } from '../components/StrikeDisplay'
+import { Link } from 'react-router-dom'
+
 export const UserProfile = () => {
   return (
-    <h1>User profile page</h1>
+    <>
+      <Navbar />
+      <Header />
+      <Div>
+        <Strike />
+        <Avatar />
+        <Link to="/quests">Get quest of the day</Link>
+        {/* TODO: modal for getting quest of the day */}
+      </Div>
+      <CreateQuest />
+      <QuestLibrary />
+      {/* NOTE: hide add quest + list of quests by default? Only show when user clicks button?  */}
+    </>
   )
-}
+}
+
+const Div = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`

frontend/src/stores/Stores.jsx

@@ -0,0 +1,3 @@
+// TODO: create stores:
+// 1. useUserStore
+// 2. useQuestStore