Reward

backend/schemas.js

@@ -55,10 +55,12 @@ const questSchema = new mongoose.Schema(
       default: 0,
     },
 
-    kudosByUser: {
-      type: mongoose.Schema.Types.ObjectId,
-      ref: "User",
-    },
+    kudosByUser: [
+      {
+        type: mongoose.Schema.Types.ObjectId,
+        ref: "User",
+      },
+    ],
   },
 
   { timestamps: true },

frontend/src/pages/FriendFeedPage.jsx

@@ -3,10 +3,10 @@ import { useState, useEffect } from "react";
 import { Navbar } from "../components/Navbar";
 import { FriendQuestCard } from "../components/cards/FriendQuestCard";
 import { apiUrl } from "../../api";
-import { useUserStore } from '../stores/useUserStore'
+import { useUserStore } from "../stores/useUserStore";
 
 export const FriendFeed = () => {
-  const { user } = useUserStore()  
+  const { user } = useUserStore();
   const [friendsQuests, setFriendsQuests] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -30,27 +30,27 @@ export const FriendFeed = () => {
   useEffect(() => {
     const fetchFeed = async () => {
       try {
-        const response = await fetch(apiUrl + '/feed/quests', {
+        const response = await fetch(apiUrl + "/feed/quests", {
           headers: {
-            'Content-Type': 'application/json',
-            'Authorization': user?.accessToken
-          }
-        })
+            "Content-Type": "application/json",
+            Authorization: user?.accessToken,
+          },
+        });
 
-        if (!response.ok) throw new Error("Couldn't fetch feed")
+        if (!response.ok) throw new Error("Couldn't fetch feed");
 
-        const data = await response.json()
-        setFriendsQuests(data)
+        const data = await response.json();
+        setFriendsQuests(data);
       } catch (err) {
-        setError("Couldn't load quests feed")
-        console.error(err)
+        setError("Couldn't load quests feed");
+        console.error(err);
       } finally {
-        setLoading(false)
+        setLoading(false);
       }
-    }
+    };
 
-    if (user) fetchFeed()
-  }, [user])
+    if (user) fetchFeed();
+  }, [user]);
 
   if (loading) return <div>Loading feed...</div>;
   if (error) return <div>{error}</div>;
@@ -59,7 +59,9 @@ export const FriendFeed = () => {
     // pass params from login and register forms to an authentication component to then add authentication after H2
     // smth like {!user ? (<Authentification onAuthSuccess = {handleAuth}>)}
     <PageWrapper>
-      <H1>Friends completed quests</H1>
+      <HeaderWrapper>
+        <H1>Friends completed quests</H1>
+      </HeaderWrapper>
 
       {/* <form>
         <label>
@@ -86,6 +88,10 @@ export const FriendFeed = () => {
 
 //Styles
 
+const HeaderWrapper = styled.div`
+  margin: 16px 0 4px;
+`;
+
 const PageWrapper = styled.main`
   display: flex;
   flex-direction: column;
@@ -96,27 +102,25 @@ const PageWrapper = styled.main`
 
 const H1 = styled.h1`
   margin: 20px 0;
-`
-
-
+`;
 
-    // //add error handling
-    // setLoading(true);
-    // fetch(apiUrl + "/friends", {
-    //   headers: {
-    //     "Content-Type": "application/json",
-    //     ...accessToken(),
-    //   },
-    // })
-    //   .then((res) => {
-    //     if (!res.ok) throw new Error("Couldn't fetch data");
-    //     return res.json();
-    //   })
-    //   .then((data) => {
-    //     setFriendsQuests(data);
-    //   })
-    //   .catch((err) => {
-    //     console.error(err);
-    //     setError("Coulndn't load friends quests");
-    //   })
-    //   .finally(() => setLoading(false));
+// //add error handling
+// setLoading(true);
+// fetch(apiUrl + "/friends", {
+//   headers: {
+//     "Content-Type": "application/json",
+//     ...accessToken(),
+//   },
+// })
+//   .then((res) => {
+//     if (!res.ok) throw new Error("Couldn't fetch data");
+//     return res.json();
+//   })
+//   .then((data) => {
+//     setFriendsQuests(data);
+//   })
+//   .catch((err) => {
+//     console.error(err);
+//     setError("Coulndn't load friends quests");
+//   })
+//   .finally(() => setLoading(false));

frontend/src/pages/HomePage.jsx

@@ -7,17 +7,26 @@ import { Dice } from "../components/icons/Dice";
 import { Friends } from "../components/icons/Friends";
 import { Linkedin } from "../components/icons/Linkedin";
 import { GitHub } from "../components/icons/GitHub";
-import { Link } from 'react-router-dom'
+import { Link } from "react-router-dom";
+import HeartIcon from "../icons/HeartIcon";
 
 export const Home = () => {
   return (
     <Main>
       <Div>
-        <h1>Welcome to Randify</h1>
-        <p>Your to-do list shouldn't feel like a boss battle before you even start. Let us do your mental labour! We'll pick the quest. You just win it. </p>
+        <HeaderWrapper>
+          <h1>Welcome!</h1>
+          <p>Never spend energy on choosing your chores again</p>
+          <HeartIcon></HeartIcon>
+          <icon-svg></icon-svg>
+        </HeaderWrapper>
         <ButtonDiv>
-          <StyledLink to={'/login'}><Button>Start your quest</Button></StyledLink>
-          <StyledLink to={'feed'}><Button>Find your friends</Button></StyledLink>
+          <StyledLink to={"/login"}>
+            <Button>Start your quest</Button>
+          </StyledLink>
+          <StyledLink to={"feed"}>
+            <Button>Find your friends</Button>
+          </StyledLink>
         </ButtonDiv>
       </Div>
 
@@ -26,31 +35,33 @@ export const Home = () => {
       <InfoCard
         icon={<Heart />}
         title="1. Add your own quests"
-        description="Got something specific in mind? Add your own custom quests and how long they take to complete." 
+        description="Got something specific in mind? Add your own custom quests and how long they take to complete."
       />
 
       <InfoCard
         icon={<Library />}
         title="2. Don't know what to add?"
-        description="Browse our quest library! Plenty of ideas for self-care, fitness, creativity, and productivity." 
+        description="Browse our quest library! Plenty of ideas for self-care, fitness, creativity, and productivity."
       />
 
       <InfoCard
         icon={<Dice />}
         title="3. Get a random daily quest from your list"
-        description="Every day we pick a quest from your list. All you have to do is tell us how much time you have. And we'll roll the dice!" 
+        description="Every day we pick a quest from your list. All you have to do is tell us how much time you have. And we'll roll the dice!"
       />
 
       <InfoCard
         icon={<Friends />}
         title="4. Keep keep streaks & share"
-        description="Keep your avatar happy with daily streaks. Challenge friends and share your progress!" 
+        description="Keep your avatar happy with daily streaks. Challenge friends and share your progress!"
       />
 
       <Div>
         <h2>Ready to quest?</h2>
         <p>Your avatar is waiting. Don't leave them hanging!</p>
-        <StyledLink to={'login'}><Button>Let's go!</Button></StyledLink>
+        <StyledLink to={"login"}>
+          <Button>Let's go!</Button>
+        </StyledLink>
       </Div>
 
       <H3>Made by:</H3>
@@ -87,7 +98,7 @@ export const Button = styled.button`
   border-radius: 12px;
   border: 2px solid var(--secondary-button-color);
   background: var(--accent-color);
-  box-shadow: 2px 4px 4px 0 rgba(139, 139, 139, 0.30);
+  box-shadow: 2px 4px 4px 0 rgba(139, 139, 139, 0.3);
   margin: 20px 0;
   cursor: pointer;
   font-family: "Pixelify Sans", sans-serif;
@@ -97,50 +108,76 @@ export const Button = styled.button`
   }
 
   &:active {
-    background: #E48187;
+    background: #e48187;
   }
-`
+`;
 
 const ButtonDiv = styled.div`
   display: flex;
   gap: 10px;
-`
+`;
 
 const Main = styled.main`
   display: flex;
   flex-direction: column;
   align-items: center;
-`
+`;
+
+const HeaderWrapper = styled.div`
+  border: 2px solid var(--accent-purple);
+  border-radius: 12px;
+  background: var(--main-white);
+  box-shadow: 2px 4px 4px 0 #dbdbdb;
+  border: 2px solid #b594ff;
+
+  display: flex;
+  flex-direction: column;
+  // justify-content: center;
+  align-items: center;
+
+  gap: 8px;
+  width: 100%;
+  max-width: 800px;
+
+  margin: 24px auto;
+  padding: 16px 16px;
+
+  box-sizing: border-box;
+
+  @media (min-width: 768px) {
+    margin: 24px auto;
+  }
+`;
 
 const Div = styled.div`
-  display: flex;flex-direction: column;
+  display: flex;
+  flex-direction: column;
   align-items: center;
   text-align: center;
-`
+`;
 
 const CreatorDiv = styled.div`
   display: flex;
   gap: 20px;
-`
+`;
 
 const LinksDiv = styled.div`
   display: flex;
   gap: 5px;
-`
+`;
 
 const NameDiv = styled.div`
   text-align: center;
-`
+`;
 
 const H3 = styled.h3`
   font-family: "Pixelify Sans", sans-serif;
   font-size: 12px;
-`
+`;
 
 const StyledLink = styled(Link)`
   text-decoration: none;
   display: contents;
-`
-
+`;
 
 // TODO: This is home page for logged out user. Decide what to keep there. Simplify?

frontend/src/pages/RewardPage.jsx

@@ -20,7 +20,7 @@ export const Rewards = () => {
   return (
     <PageWrapper>
       <ButtonClose onClick={handleClick}>X</ButtonClose>
-      <h2>You are on fire today</h2>
+      <h2>You are on fire today🔥</h2>
       <p>Keep it up and don't forget to smile!</p>
       <MemeOfTheDay />
       <ButtonReward onClick={handleClick}>Back home</ButtonReward>
@@ -79,6 +79,7 @@ const ButtonReward = styled.button`
 
   border-radius: 12px;
   border: 1px solid var(--medium-purple);
+  margin-bottom: 64px;
 
   /* Small shadow */
   box-shadow: 0 2px 2px 0 #dbdbdb;