From 0dbbf3bd3ac9f7015a7f98728ce123b448efe939 Mon Sep 17 00:00:00 2001 From: nicolinabl Date: Sun, 15 Feb 2026 17:06:05 +0100 Subject: [PATCH 1/3] basic styling login, signup, about, friend feed, home, quest library --- frontend/src/App.jsx | 6 +++++ frontend/src/components/CreateQuest.jsx | 24 ++++++++++++----- frontend/src/components/Navbar.jsx | 5 ++-- frontend/src/components/QuestLibrary.jsx | 17 ++++++++++++ frontend/src/components/cards/QuestCard.jsx | 24 +++++++++++++++++ frontend/src/pages/AboutPage.jsx | 8 +++++- frontend/src/pages/FriendFeedPage.jsx | 15 ++++++++++- frontend/src/pages/HomePage.jsx | 6 ++++- frontend/src/pages/LoginPage.jsx | 28 ++++++++++++++++++-- frontend/src/pages/SignupPage.jsx | 29 +++++++++++++++++++++ frontend/src/styles/GlobalStyles.jsx | 18 ++++++++++++- 11 files changed, 166 insertions(+), 14 deletions(-) create mode 100644 frontend/src/components/cards/QuestCard.jsx create mode 100644 frontend/src/pages/SignupPage.jsx diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index e5d28ff4f1..84ed8b3d79 100644 --- a/frontend/src/App.jsx +++ b/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,12 @@ export const App = () => { } /> } /> } /> + } /> ); }; + +// TODO: create page + route for logged in user (=profile?) + +// TODO: create page + route for getting quest of the day diff --git a/frontend/src/components/CreateQuest.jsx b/frontend/src/components/CreateQuest.jsx index a45fca4275..e7d598a162 100644 --- a/frontend/src/components/CreateQuest.jsx +++ b/frontend/src/components/CreateQuest.jsx @@ -3,18 +3,30 @@ import styled from 'styled-components' export const CreateQuest = () => { return (
-
Create new quest - - - +
+
) } const Form = styled.form` + margin: 5px; + background-color: var(--accent-color) +` + +const Label = styled.label` display: flex; flex-direction: column; - margin: 5px; ` \ No newline at end of file diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx index a3e14bd809..74a80128ed 100644 --- a/frontend/src/components/Navbar.jsx +++ b/frontend/src/components/Navbar.jsx @@ -9,6 +9,7 @@ export const Navbar = () => { Friends About Log in + ) @@ -18,10 +19,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; -` \ No newline at end of file +` +// TODO: decide: Should navbar be hamburger menu on phone size? \ No newline at end of file diff --git a/frontend/src/components/QuestLibrary.jsx b/frontend/src/components/QuestLibrary.jsx index e69de29bb2..7ff954f408 100644 --- a/frontend/src/components/QuestLibrary.jsx +++ b/frontend/src/components/QuestLibrary.jsx @@ -0,0 +1,17 @@ +export const QuestLibrary = () => { + return ( + <> +

Quest library

+
    +
  • Weekly shopping
    • +
  • Laundry
    • +
  • Clean out fridge
    • +
  • Dust
    • +
  • Mop
    • +
  • Organize
    • +
+ + ) +} + +// TODO Decide: QuestLibrary hardcoded as list at the moment. Keep that way? Or create Library task card and map over? \ No newline at end of file diff --git a/frontend/src/components/cards/QuestCard.jsx b/frontend/src/components/cards/QuestCard.jsx new file mode 100644 index 0000000000..da8e3033f4 --- /dev/null +++ b/frontend/src/components/cards/QuestCard.jsx @@ -0,0 +1,24 @@ +import styled from 'styled-components' + +export const QuestCard = () => { + return ( +
+
+

Name

+
+
+

Task:

+

Time spent:

+

Kudos: 🙌

+
+
+ ) +} + +const Div = styled.div` + display: flex; + flex-direction: column; + background-color: var(--primary-color); + margin: 5px; + border-radius: 12px; +` \ No newline at end of file diff --git a/frontend/src/pages/AboutPage.jsx b/frontend/src/pages/AboutPage.jsx index 731afe5798..89895fc408 100644 --- a/frontend/src/pages/AboutPage.jsx +++ b/frontend/src/pages/AboutPage.jsx @@ -1,5 +1,11 @@ +import { Navbar } from '../components/Navbar' + export const About = () => { return ( -

About page

+ <> + +

What does the app do

+

How to get started

+ ) } \ No newline at end of file diff --git a/frontend/src/pages/FriendFeedPage.jsx b/frontend/src/pages/FriendFeedPage.jsx index 4d8d0db76c..71b6540bcd 100644 --- a/frontend/src/pages/FriendFeedPage.jsx +++ b/frontend/src/pages/FriendFeedPage.jsx @@ -1,5 +1,18 @@ +import { QuestCard } from '../components/cards/QuestCard' +import { Navbar } from '../components/Navbar' + export const FriendFeed = () => { return ( -

Friend feed page

+ <> + +

My friends finished quests

+
+ +
+ + ) } \ No newline at end of file diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx index 1fa44b3843..9d12f0aaeb 100644 --- a/frontend/src/pages/HomePage.jsx +++ b/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,6 +16,7 @@ export const Home = () => {

Motivational things

+ ) } @@ -24,4 +26,6 @@ const Div = styled.div` background-color: var(--accent-color); margin: 5px; justify-content: center; -` \ No newline at end of file +` + +// TODO: This is home page for logged out user. Decide what to keep there. Simplify? diff --git a/frontend/src/pages/LoginPage.jsx b/frontend/src/pages/LoginPage.jsx index 1c538c463f..2620efad7c 100644 --- a/frontend/src/pages/LoginPage.jsx +++ b/frontend/src/pages/LoginPage.jsx @@ -1,5 +1,29 @@ +import styled from 'styled-components' +import { Link } from 'react-router-dom' +import { Navbar } from '../components/Navbar' + export const Login = () => { return ( -

Log in page

+ <> + +
+

WelcomeBack! Log in now:

+ + + + Not a user? Sign up +
+ ) -} \ No newline at end of file +} + +const Form = styled.form` + display: flex; + flex-direction: column; + background-color: var(--primary-color); + margin: 5px; + border-radius: 12px; + +` + +// TODO: Decide, for now login and signup are pages. Do we want it to be modals? \ No newline at end of file diff --git a/frontend/src/pages/SignupPage.jsx b/frontend/src/pages/SignupPage.jsx new file mode 100644 index 0000000000..21afc144a5 --- /dev/null +++ b/frontend/src/pages/SignupPage.jsx @@ -0,0 +1,29 @@ +import styled from 'styled-components' +import { Link } from 'react-router-dom' +import { Navbar } from '../components/Navbar' + +export const Signup = () => { + return ( + <> + +
+

Register new user

+ + + + + I already have an account +
+ + ) +} + +const Form = styled.form` + display: flex; + flex-direction: column; + background-color: var(--primary-color); + margin: 5px; + border-radius: 12px; +` + +// TODO: This is only basic form and step 1/2. Add step 2 (add code sent to email to verify) \ No newline at end of file diff --git a/frontend/src/styles/GlobalStyles.jsx b/frontend/src/styles/GlobalStyles.jsx index a634e99992..0a834abf02 100644 --- a/frontend/src/styles/GlobalStyles.jsx +++ b/frontend/src/styles/GlobalStyles.jsx @@ -1,6 +1,10 @@ import { createGlobalStyle } from 'styled-components' export const GlobalStyle = createGlobalStyle` + * { + box-sizing: border-box; + } + :root { --main-bg-color: #FFFFFF; --main-text-color: #000000; @@ -8,4 +12,16 @@ export const GlobalStyle = createGlobalStyle` --secondary-color: #ECECEC; --accent-color: #F7F7F7; } -` \ No newline at end of file + + #root { + max-width: 500px; + width: 100%; + } + + body { + margin: 0; + display: flex; + justify-content: center; + } +` + From 85080a6450b409083a934d9ad3d7989a4d643880 Mon Sep 17 00:00:00 2001 From: nicolinabl Date: Mon, 16 Feb 2026 12:54:13 +0100 Subject: [PATCH 2/3] user profile --- frontend/src/App.jsx | 3 --- frontend/src/components/Navbar.jsx | 1 + frontend/src/pages/RewardPage.jsx | 4 +++- frontend/src/pages/UserProfilePage.jsx | 29 ++++++++++++++++++++++++-- frontend/src/stores/QuestStore.jsx | 0 frontend/src/stores/Stores.jsx | 3 +++ 6 files changed, 34 insertions(+), 6 deletions(-) delete mode 100644 frontend/src/stores/QuestStore.jsx create mode 100644 frontend/src/stores/Stores.jsx diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 84ed8b3d79..4ba1e68314 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -28,6 +28,3 @@ export const App = () => { ); }; -// TODO: create page + route for logged in user (=profile?) - -// TODO: create page + route for getting quest of the day diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx index 74a80128ed..fbd24533e2 100644 --- a/frontend/src/components/Navbar.jsx +++ b/frontend/src/components/Navbar.jsx @@ -6,6 +6,7 @@ export const Navbar = () => { <>