From 737bd915ce1140c2cfabf444879620f56c11fc0d Mon Sep 17 00:00:00 2001
From: nicolinabl <nicolina.backlin@telia.com>
Date: Thu, 5 Mar 2026 15:36:23 +0100
Subject: [PATCH] accessibility get quest, display name instead of email

---
 frontend/src/components/Header.jsx |  2 +-
 frontend/src/pages/GiveUpPage.jsx  | 43 ++++++++++++++++++++----------
 frontend/src/pages/QuestPage.jsx   | 25 ++++++++++++++---
 3 files changed, 51 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
index 8ba11266b0..41de44835e 100644
--- a/frontend/src/components/Header.jsx
+++ b/frontend/src/components/Header.jsx
@@ -8,7 +8,7 @@ export const Header = () => {
 
   return (
     <HeaderWrapper>
-      <h1>Welcome {user.email}</h1>
+      <h1>Welcome {user.email?.split('@')[0]}</h1>
       <p>Never spend energy on choosing your chores again</p>
       <Streak />
       <HeartIcon></HeartIcon>
diff --git a/frontend/src/pages/GiveUpPage.jsx b/frontend/src/pages/GiveUpPage.jsx
index e7321f894c..a66aa46da8 100644
--- a/frontend/src/pages/GiveUpPage.jsx
+++ b/frontend/src/pages/GiveUpPage.jsx
@@ -3,24 +3,26 @@ import styled from "styled-components"
 
 export const GiveUp = () => {
   return (
-    <Div>
-      <h2>please dont, you can at least start! 🥲</h2>
-      <StyledLink to="/quests"><Button>Ok, fine... take me back</Button></StyledLink>
-      <Link to="/">Give up</Link>
-    </Div>
+    <PageWrapper>
+      <Div>
+        <h2>please dont, you can at least start! 🥲</h2>
+        <StyledLink to="/quests"><Button>Ok, fine... take me back</Button></StyledLink>
+        <Link to="/">Give up</Link>
+      </Div>
+    </PageWrapper>
   )
 }
 
 const Div = styled.div`
     display: flex;
     flex-direction: column;
-    background-color: var(--primary-color);
+    background-color: var(--main-white);
     max-height: 280px;
     max-width: 350px;
     margin: 10px;
     border-radius: 12px;
     padding: 10px;
-    border: 2px solid var(--accent-color);
+    border: 2px solid #B594FF;
     text-align: center;
     align-items: center;
 `
@@ -32,20 +34,33 @@ const Button = styled.button`
   justify-content: center;
   align-items: center;
   gap: 10px;
-  flex-shrink: 0;
-  align-self: stretch;
   border-radius: 12px;
-  border: 2px solid #E9628C;
-  background: #F497B4;
+  border: 1px solid #1D30CE;
+  background: var(--medium-purple);
   box-shadow: 2px 4px 4px 0 rgba(139, 139, 139, 0.30);
-  margin: 16px 0;
-  cursor: pointer;
+  color: white;
+  font-family: "Pixelify Sans", sans-serif;
+  margin: 15px 0;
+  font-size: 20px;
 
   &:hover {
-    transform: scale(1.1)
+    background: var(--dark-purple)
+  }
+
+  &:active {
+    background: var(--accent-purple)
   }
 `
 
 const StyledLink = styled(Link)`
   text-decoration: none;
+  display: contents;
+`
+
+const PageWrapper = styled.main`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0 20px;
 `
\ No newline at end of file
diff --git a/frontend/src/pages/QuestPage.jsx b/frontend/src/pages/QuestPage.jsx
index c5c9f8f9e1..16ede243f6 100644
--- a/frontend/src/pages/QuestPage.jsx
+++ b/frontend/src/pages/QuestPage.jsx
@@ -95,7 +95,7 @@ const handleComplete = async (id, checked) => {
 
 
   return (
-    <>
+    <PageWrapper>
       {!state.randomQuest && (
         <Form onSubmit={handleSubmit}>
           <h2>Let's do this!!</h2>
@@ -114,7 +114,7 @@ const handleComplete = async (id, checked) => {
       )}
         {state.randomQuest && 
           <Div>
-            <h2>Ok {user.email}, here is your quest of the day: </h2>
+            <h2>Ok {user.email?.split('@')[0]}, here is your quest of the day: </h2>
             <QuestDiv>
               <CompleteDiv> 
                 <Checkbox 
@@ -133,7 +133,7 @@ const handleComplete = async (id, checked) => {
             
           </Div>
         }
-    </>
+    </PageWrapper>
   )
 }
 
@@ -190,11 +190,20 @@ 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;
   margin: 15px 0;
+  font-size: 20px;
+
+  &:hover {
+    background: var(--dark-purple)
+  }
+
+  &:active {
+    background: var(--accent-purple)
+  }
 `
 
 const QuestDiv = styled.div`
@@ -227,4 +236,12 @@ const TextDiv = styled.div`
   align-items: flex-start;
   text-align: left;
 `
+
+const PageWrapper = styled.main`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0 20px;
+`;
 // user does something → dispatch is called → reducer runs and returns new state → component re-renders with new state.
\ No newline at end of file