Nicolinabl · Nicolinabl · Mar 5, 2026 · Mar 5, 2026
diff --git a/frontend/src/components/CompletedQuests.jsx b/frontend/src/components/CompletedQuests.jsx
@@ -87,4 +87,12 @@ const Button = styled.button`
 
   /* Small shadow */
   box-shadow: 0 1px 1px 0 #dbdbdb;
+
+  &:hover {
+    background: var(--light-purple)
+  }
+
+  &:active {
+    background: var(--accent-purple)
+  }
 `;
diff --git a/frontend/src/components/CreateQuest.jsx b/frontend/src/components/CreateQuest.jsx
@@ -117,10 +117,19 @@ const Button = styled.button`
   gap: 10px;
   border-radius: 12px;
   border: 1px solid #1D30CE;
-  background: #866DEB;
+  background: var(--medium-purple);
   box-shadow: 2px 4px 4px 0 rgba(139, 139, 139, 0.30);
   color: white;
   font-family: "Pixelify Sans", sans-serif;
+  font-size: 20px;
+
+  &:hover {
+    background: var(--dark-purple);
+  }
+
+  &:active {
+    background: var(--accent-purple)
+  }
 `
 
 // TODO: Add authentication check - redirect to login if no accessToken
diff --git a/frontend/src/components/LoginForm.jsx b/frontend/src/components/LoginForm.jsx
@@ -88,7 +88,7 @@ export const LoginForm = () => {
     }
 
   return (
-    <>
+    <main>
       <Form onSubmit={handleSubmit}>
         <h2>Welcome Back! Log in now:</h2>
         {/* <label>
@@ -107,7 +107,7 @@ export const LoginForm = () => {
         <Button type="submit">Log in</Button>
         <StyledLink to="/signup">Not a user? Click here to sign up</StyledLink>
       </Form>
-    </>
+    </main>
   )
 }
 
@@ -145,11 +145,21 @@ const Button = styled.button`
   gap: 10px;
   border-radius: 12px;
   border: 1px solid #1D30CE;
-  background: #866DEB;
+  background: var(--medium-purple);
   box-shadow: 2px 4px 4px 0 rgba(139, 139, 139, 0.30);
   color: white;
   font-family: "Pixelify Sans", sans-serif;
-  font-size: 16px;
+  font-size: 20px;
+  font-weight: 500;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--dark-purple);
+  }
+
+  &:active {
+    background: var(--accent-purple);
+  }
 `
 
 const StyledLink = styled(Link)`

diff --git a/frontend/src/components/QuestLibrary.jsx b/frontend/src/components/QuestLibrary.jsx
@@ -90,4 +90,12 @@ const Button = styled.button`
 
   /* Small shadow */
   box-shadow: 0 1px 1px 0 #dbdbdb;
+
+  &:hover {
+    background: var(--light-purple)
+  }
+
+  &:active {
+    background: var(--accent-purple)
+  }
 `;
diff --git a/frontend/src/components/QuestList.jsx b/frontend/src/components/QuestList.jsx
@@ -99,6 +99,14 @@ const Button = styled.button`
 
   /* Small shadow */
   box-shadow: 0 1px 1px 0 #dbdbdb;
+
+  &:hover {
+    background: var(--light-purple)
+  }
+
+  &:active {
+    background: var(--accent-purple)
+  }
 `;
 
 // const Div = styled.div`

diff --git a/frontend/src/components/SignupForm.jsx b/frontend/src/components/SignupForm.jsx
@@ -103,24 +103,26 @@ export const SignupForm = () => {
   }
 
   return (
-    <Form onSubmit={handleSubmit}>
-      <h2>Sign up here</h2>
-      <Label>
-        Username
-        <Input type="text" placeholder="username" onChange={event => setName(event.target.value)}/>
-      </Label>
-      <Label>
-        email
-        <Input type="email" placeholder="email" onChange={event => setEmail(event.target.value)}/>
-      </Label>
-      <Label>
-        Password
-        <Input type="password" placeholder="password" onChange={event => setPassword(event.target.value)}/>
-      </Label>
-      {error && <p>{error}</p>}
-      <Button type="submit">Sign up</Button>
-      <StyledLink to="/login">I already have an account</StyledLink>
-    </Form>
+    <main>
+      <Form onSubmit={handleSubmit}>
+        <h2>Sign up here</h2>
+        <Label>
+          Username
+          <Input type="text" placeholder="username" onChange={event => setName(event.target.value)}/>
+        </Label>
+        <Label>
+          email
+          <Input type="email" placeholder="email" onChange={event => setEmail(event.target.value)}/>
+        </Label>
+        <Label>
+          Password
+          <Input type="password" placeholder="password" onChange={event => setPassword(event.target.value)}/>
+        </Label>
+        {error && <p>{error}</p>}
+        <Button type="submit">Sign up</Button>
+        <StyledLink to="/login">I already have an account</StyledLink>
+      </Form>
+    </main>
   )
 }
 
@@ -158,11 +160,19 @@ const Button = styled.button`
   gap: 10px;
   border-radius: 12px;
   border: 1px solid #1D30CE;
-  background: #866DEB;
+  background: var(--medium-purple);
   box-shadow: 2px 4px 4px 0 rgba(139, 139, 139, 0.30);
   color: white;
   font-family: "Pixelify Sans", sans-serif;
-  font-size: 16px;
+  font-size: 20px;
+
+  &:hover {
+    background: var(--dark-purple);
+  }
+
+  &:active {
+    background: var(--accent-purple);
+  }
 `
 
 const StyledLink = styled(Link)`

diff --git a/frontend/src/components/cards/FriendQuestCard.jsx b/frontend/src/components/cards/FriendQuestCard.jsx
@@ -177,6 +177,14 @@ const Button = styled.button`
 
   /* Small shadow */
   box-shadow: 0 1px 1px 0 #dbdbdb;
+
+  &:hover {
+    background: var(--secondary-button-color);
+  }
+
+  &:active {
+    background: #E48187;
+  }
 `;
 
 const TopInfo = styled.div`

diff --git a/frontend/src/components/cards/InfoCard.jsx b/frontend/src/components/cards/InfoCard.jsx
@@ -5,8 +5,8 @@ export const InfoCard = ({ title, description, icon }) => {
     <Div>
       {icon}
       <div>
-        <H3>{title}</H3>
-        <P>{description}</P>
+        <H2>{title}</H2>
+        <p>{description}</p>
       </div>
     </Div>
   )
@@ -26,15 +26,11 @@ const Div = styled.div`
 
 // TODO add #FFFFFF to root colors in globalstyles
 
-const H3 = styled.h3`
+const H2 = styled.h2`
   font-family: "Pixelify Sans", sans-serif;
-  font-size: 15px;
+  font-size: 18px;
   font-style: normal;
-  font-weight: 400;
+  font-weight: 500;
   line-height: normal;
   margin: 0;
 `
-
-const P = styled.p`
-  color: #8C737B;
-`
diff --git a/frontend/src/components/cards/LibraryQuestCard.jsx b/frontend/src/components/cards/LibraryQuestCard.jsx
@@ -91,6 +91,14 @@ const ButtonAdd = styled.button`
 
   /* Small shadow */
   box-shadow: 0 2px 2px 0 #dbdbdb;
+
+  &:hover {
+    background: var(--accent-color)
+  }
+
+  &:active {
+    background: #E48187;
+  }
 `;
 
 const Div = styled.div`

diff --git a/frontend/src/components/cards/QuestCard.jsx b/frontend/src/components/cards/QuestCard.jsx
@@ -106,6 +106,14 @@ const ButtonDelete = styled.button`
 
   /* Small shadow */
   box-shadow: 0 1px 1px 0 #dbdbdb;
+
+  &:hover {
+    background: var(--light-purple)
+  }
+
+  &:active {
+    background: var(--accent-purple)
+  }
 `;
 
 // TODO hide/show list of tasks

diff --git a/frontend/src/pages/FriendFeedPage.jsx b/frontend/src/pages/FriendFeedPage.jsx
@@ -86,7 +86,7 @@ export const FriendFeed = () => {
 
 //Styles
 
-const PageWrapper = styled.div`
+const PageWrapper = styled.main`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -99,6 +99,7 @@ const H1 = styled.h1`
 `
 
 
+
     // //add error handling
     // setLoading(true);
     // fetch(apiUrl + "/friends", {

diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx
@@ -11,9 +11,9 @@ import { Link } from 'react-router-dom'
 
 export const Home = () => {
   return (
-    <Section>
+    <Main>
       <Div>
-        <h1>Welcome to AppName</h1>
+        <h1>Welcome to APPNAME</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>
         <ButtonDiv>
           <StyledLink to={'/login'}><Button>Start your quest</Button></StyledLink>
@@ -23,33 +23,27 @@ export const Home = () => {
 
       <h2>How it works</h2>
 
-      <InfoCard
-        icon={<Star />}
-        title="1. Let us do your mental labour"
-        description="Stop overthinking your to-do. We organize and choose your quests so you can just… do." 
-      />
-
       <InfoCard
         icon={<Heart />}
-        title="2. Add your own quests"
+        title="1. Add your own quests"
         description="Got something specific in mind? Add your own custom quests and how long they take to complete." 
       />
 
       <InfoCard
         icon={<Library />}
-        title="3. Don't know what to add?"
+        title="2. Don't know what to add?"
         description="Browse our quest library! Plenty of ideas for self-care, fitness, creativity, and productivity." 
       />
 
       <InfoCard
         icon={<Dice />}
-        title="4. Get a random daily quest from your list"
+        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!" 
       />
 
       <InfoCard
         icon={<Friends />}
-        title="5. Keep keep streaks & share"
+        title="4. Keep keep streaks & share"
         description="Keep your avatar happy with daily streaks. Challenge friends and share your progress!" 
       />
 
@@ -77,7 +71,7 @@ export const Home = () => {
           </LinksDiv>
         </NameDiv>
       </CreatorDiv>
-    </Section>
+    </Main>
   );
 };
 
@@ -91,15 +85,19 @@ export const Button = styled.button`
   flex-shrink: 0;
   align-self: stretch;
   border-radius: 12px;
-  border: 2px solid #E9628C;
-  background: #F497B4;
+  border: 2px solid var(--secondary-button-color);
+  background: var(--accent-color);
   box-shadow: 2px 4px 4px 0 rgba(139, 139, 139, 0.30);
   margin: 20px 0;
   cursor: pointer;
   font-family: "Pixelify Sans", sans-serif;
 
   &:hover {
-    transform: scale(1.1);
+    background: var(--secondary-button-color);
+  }
+
+  &:active {
+    background: #E48187;
   }
 `
 
@@ -108,7 +106,7 @@ const ButtonDiv = styled.div`
   gap: 10px;
 `
 
-const Section = styled.section`
+const Main = styled.main`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -141,6 +139,7 @@ const H3 = styled.h3`
 
 const StyledLink = styled(Link)`
   text-decoration: none;
+  display: contents;
 `
 
 

diff --git a/frontend/src/pages/UserProfilePage.jsx b/frontend/src/pages/UserProfilePage.jsx
@@ -36,7 +36,7 @@ export const UserProfile = () => {
   );
 };
 
-const PageWrapper = styled.div`
+const PageWrapper = styled.main`
   display: flex;
   flex-direction: column;
   justify-content: center;

diff --git a/frontend/src/styles/GlobalStyles.jsx b/frontend/src/styles/GlobalStyles.jsx
@@ -21,7 +21,7 @@ export const GlobalStyle = createGlobalStyle`
     --accent-purple: #B594FF;
 
     --medium-pink: #FFD2EC;
-    --medium-purple: #7C58FD;
+    --medium-purple: #7954fd;
     --light-yellow: #FFF4CA;
     --light-pink: #FFE2F3;
     --light-purple: #E5DEF8;
@@ -56,6 +56,7 @@ export const GlobalStyle = createGlobalStyle`
     font-style: normal;
     font-weight: 500;
     line-height: normal;
+    margin: 10px 0;
   }
 
   h3 {
@@ -75,4 +76,5 @@ export const GlobalStyle = createGlobalStyle`
     text-wrap: pretty;
   }
 
+
 `;