From a269f7453c574032f5fb878323af8421bb80f48f Mon Sep 17 00:00:00 2001 From: nicolinabl Date: Thu, 12 Feb 2026 16:01:16 +0100 Subject: [PATCH 001/120] folder structure --- frontend/src/App.jsx | 2 +- frontend/src/components/Avatar.jsx | 0 frontend/src/components/Button.jsx | 0 frontend/src/components/CreateQuest.jsx | 0 frontend/src/components/Header.jsx | 0 frontend/src/components/LoginForm.jsx | 0 frontend/src/components/Navbar.jsx | 0 frontend/src/components/QuestLibrary.jsx | 0 frontend/src/components/QuestList.jsx | 0 frontend/src/components/SignupForm.jsx | 0 frontend/src/components/StrikeDisplay.jsx | 0 frontend/src/pages/AboutPage.jsx | 0 frontend/src/pages/FriendFeedPage.jsx | 0 frontend/src/pages/HomePage.jsx | 0 frontend/src/pages/QuestPage.jsx | 0 frontend/src/pages/RewardPage.jsx | 0 frontend/src/pages/UserProfilePage.jsx | 0 frontend/src/stores/QuestStore.jsx | 0 frontend/src/styles/GlobalStyles.jsx | 0 19 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 frontend/src/components/Avatar.jsx create mode 100644 frontend/src/components/Button.jsx create mode 100644 frontend/src/components/CreateQuest.jsx create mode 100644 frontend/src/components/Header.jsx create mode 100644 frontend/src/components/LoginForm.jsx create mode 100644 frontend/src/components/Navbar.jsx create mode 100644 frontend/src/components/QuestLibrary.jsx create mode 100644 frontend/src/components/QuestList.jsx create mode 100644 frontend/src/components/SignupForm.jsx create mode 100644 frontend/src/components/StrikeDisplay.jsx create mode 100644 frontend/src/pages/AboutPage.jsx create mode 100644 frontend/src/pages/FriendFeedPage.jsx create mode 100644 frontend/src/pages/HomePage.jsx create mode 100644 frontend/src/pages/QuestPage.jsx create mode 100644 frontend/src/pages/RewardPage.jsx create mode 100644 frontend/src/pages/UserProfilePage.jsx create mode 100644 frontend/src/stores/QuestStore.jsx create mode 100644 frontend/src/styles/GlobalStyles.jsx diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 0a24275e6..dfaeb7ca8 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -2,7 +2,7 @@ export const App = () => { return ( <> -

Welcome to Final Project!

+

Task randomizer

); }; diff --git a/frontend/src/components/Avatar.jsx b/frontend/src/components/Avatar.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/src/components/Button.jsx b/frontend/src/components/Button.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/src/components/CreateQuest.jsx b/frontend/src/components/CreateQuest.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/src/components/LoginForm.jsx b/frontend/src/components/LoginForm.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/src/components/QuestLibrary.jsx b/frontend/src/components/QuestLibrary.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/src/components/QuestList.jsx b/frontend/src/components/QuestList.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/src/components/SignupForm.jsx b/frontend/src/components/SignupForm.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/src/components/StrikeDisplay.jsx b/frontend/src/components/StrikeDisplay.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/src/pages/AboutPage.jsx b/frontend/src/pages/AboutPage.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/src/pages/FriendFeedPage.jsx b/frontend/src/pages/FriendFeedPage.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/src/pages/QuestPage.jsx b/frontend/src/pages/QuestPage.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/src/pages/RewardPage.jsx b/frontend/src/pages/RewardPage.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/src/pages/UserProfilePage.jsx b/frontend/src/pages/UserProfilePage.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/src/stores/QuestStore.jsx b/frontend/src/stores/QuestStore.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/src/styles/GlobalStyles.jsx b/frontend/src/styles/GlobalStyles.jsx new file mode 100644 index 000000000..e69de29bb From 51c9d6aa2c3aa884626e7af2b351104fdd55fd90 Mon Sep 17 00:00:00 2001 From: nicolinabl Date: Thu, 12 Feb 2026 16:29:58 +0100 Subject: [PATCH 002/120] routes --- frontend/package.json | 3 ++- frontend/src/App.jsx | 18 +++++++++++++++++- frontend/src/main.jsx | 5 ++++- frontend/src/pages/AboutPage.jsx | 5 +++++ frontend/src/pages/FriendFeedPage.jsx | 5 +++++ frontend/src/pages/HomePage.jsx | 5 +++++ frontend/src/pages/QuestPage.jsx | 5 +++++ frontend/src/pages/RewardPage.jsx | 5 +++++ frontend/src/pages/UserProfilePage.jsx | 5 +++++ 9 files changed, 53 insertions(+), 3 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 7b2747e94..be1761225 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -11,7 +11,8 @@ }, "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^7.13.0" }, "devDependencies": { "@types/react": "^18.2.15", diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index dfaeb7ca8..fe8d16b1c 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,8 +1,24 @@ +import { Routes, Route, Link } from 'react-router-dom' +import { About } from './pages/AboutPage' +import { FriendFeed } from './pages/FriendFeedPage' +import { Home } from './pages/HomePage' +import { Quests } from './pages/QuestPage' +import { Rewards } from './pages/RewardPage' +import { UserProfile } from './pages/UserProfilePage' + export const App = () => { return ( <> -

Task randomizer

+ {/* Routes */} + + } /> + } /> + } /> + } /> + } /> + } /> + ); }; diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx index 51294f399..cb587b838 100644 --- a/frontend/src/main.jsx +++ b/frontend/src/main.jsx @@ -2,9 +2,12 @@ import React from "react"; import ReactDOM from "react-dom/client"; import { App } from "./App.jsx"; import "./index.css"; +import { BrowserRouter } from "react-router-dom"; ReactDOM.createRoot(document.getElementById("root")).render( - + + + ); diff --git a/frontend/src/pages/AboutPage.jsx b/frontend/src/pages/AboutPage.jsx index e69de29bb..731afe579 100644 --- a/frontend/src/pages/AboutPage.jsx +++ b/frontend/src/pages/AboutPage.jsx @@ -0,0 +1,5 @@ +export const About = () => { + return ( +

About page

+ ) +} \ No newline at end of file diff --git a/frontend/src/pages/FriendFeedPage.jsx b/frontend/src/pages/FriendFeedPage.jsx index e69de29bb..4d8d0db76 100644 --- a/frontend/src/pages/FriendFeedPage.jsx +++ b/frontend/src/pages/FriendFeedPage.jsx @@ -0,0 +1,5 @@ +export const FriendFeed = () => { + return ( +

Friend feed page

+ ) +} \ No newline at end of file diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx index e69de29bb..0a4e378ed 100644 --- a/frontend/src/pages/HomePage.jsx +++ b/frontend/src/pages/HomePage.jsx @@ -0,0 +1,5 @@ +export const Home = () => { + return ( +

Home page

+ ) +} \ No newline at end of file diff --git a/frontend/src/pages/QuestPage.jsx b/frontend/src/pages/QuestPage.jsx index e69de29bb..f83490fb8 100644 --- a/frontend/src/pages/QuestPage.jsx +++ b/frontend/src/pages/QuestPage.jsx @@ -0,0 +1,5 @@ +export const Quests = () => { + return ( +

Quest page

+ ) +} \ No newline at end of file diff --git a/frontend/src/pages/RewardPage.jsx b/frontend/src/pages/RewardPage.jsx index e69de29bb..4ceeb3a8a 100644 --- a/frontend/src/pages/RewardPage.jsx +++ b/frontend/src/pages/RewardPage.jsx @@ -0,0 +1,5 @@ +export const Rewards = () => { + return ( +

Rewards page

+ ) +} \ No newline at end of file diff --git a/frontend/src/pages/UserProfilePage.jsx b/frontend/src/pages/UserProfilePage.jsx index e69de29bb..a4677f1a5 100644 --- a/frontend/src/pages/UserProfilePage.jsx +++ b/frontend/src/pages/UserProfilePage.jsx @@ -0,0 +1,5 @@ +export const UserProfile = () => { + return ( +

User profile page

+ ) +} \ No newline at end of file From 10a377f15262de9b8771fc3d7887fb8b92dd7166 Mon Sep 17 00:00:00 2001 From: nicolinabl Date: Thu, 12 Feb 2026 17:18:48 +0100 Subject: [PATCH 003/120] basic styling home page --- frontend/package.json | 3 ++- frontend/src/App.jsx | 4 ++++ frontend/src/components/CreateQuest.jsx | 20 +++++++++++++++++ frontend/src/components/Header.jsx | 30 +++++++++++++++++++++++++ frontend/src/components/Navbar.jsx | 27 ++++++++++++++++++++++ frontend/src/pages/HomePage.jsx | 24 ++++++++++++++++++-- frontend/src/pages/LoginPage.jsx | 5 +++++ frontend/src/styles/GlobalStyles.jsx | 11 +++++++++ 8 files changed, 121 insertions(+), 3 deletions(-) create mode 100644 frontend/src/pages/LoginPage.jsx diff --git a/frontend/package.json b/frontend/package.json index be1761225..10c1417ce 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -12,7 +12,8 @@ "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^7.13.0" + "react-router-dom": "^7.13.0", + "styled-components": "^6.3.9" }, "devDependencies": { "@types/react": "^18.2.15", diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index fe8d16b1c..3e632e3aa 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -5,11 +5,14 @@ import { Home } from './pages/HomePage' import { Quests } from './pages/QuestPage' import { Rewards } from './pages/RewardPage' import { UserProfile } from './pages/UserProfilePage' +import { Login } from './pages/LoginPage' +import { GlobalStyle } from './styles/GlobalStyles' export const App = () => { return ( <> + {/* Routes */} } /> @@ -18,6 +21,7 @@ export const App = () => { } /> } /> } /> + } /> ); diff --git a/frontend/src/components/CreateQuest.jsx b/frontend/src/components/CreateQuest.jsx index e69de29bb..a45fca427 100644 --- a/frontend/src/components/CreateQuest.jsx +++ b/frontend/src/components/CreateQuest.jsx @@ -0,0 +1,20 @@ +import styled from 'styled-components' + +export const CreateQuest = () => { + return ( +
+
Create new quest + + + + +
+
+ ) +} + +const Form = styled.form` + display: flex; + flex-direction: column; + margin: 5px; +` \ No newline at end of file diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx index e69de29bb..8521301b0 100644 --- a/frontend/src/components/Header.jsx +++ b/frontend/src/components/Header.jsx @@ -0,0 +1,30 @@ +import styled from 'styled-components' + +export const Header = () => { + return ( + <> +
+

Welcome

+
+
+

text here

+
+
+

text here

+
+
+

text here

+
+ + ) +} + +const Div = styled.div` + display: flex; + background-color: var(--secondary-color); + margin: 5px 8px; +` + +const P = styled.p` + margin: 0; +` diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx index e69de29bb..a3e14bd80 100644 --- a/frontend/src/components/Navbar.jsx +++ b/frontend/src/components/Navbar.jsx @@ -0,0 +1,27 @@ +import { Link } from 'react-router-dom' +import styled from 'styled-components' + +export const Navbar = () => { + return ( + <> + + + ) +} + +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 diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx index 0a4e378ed..01a487ade 100644 --- a/frontend/src/pages/HomePage.jsx +++ b/frontend/src/pages/HomePage.jsx @@ -1,5 +1,25 @@ +import { Navbar } from '../components/Navbar' +import { Header } from '../components/Header' +import styled from 'styled-components' + export const Home = () => { return ( -

Home page

+ <> + +
+
+

Motivational things

+
+
+

Motivational things

+
+ ) -} \ No newline at end of file +} + +const Div = styled.div` + display: flex; + background-color: var(--accent-color); + margin: 5px; + justify-content: center; +` \ No newline at end of file diff --git a/frontend/src/pages/LoginPage.jsx b/frontend/src/pages/LoginPage.jsx new file mode 100644 index 000000000..1c538c463 --- /dev/null +++ b/frontend/src/pages/LoginPage.jsx @@ -0,0 +1,5 @@ +export const Login = () => { + return ( +

Log in page

+ ) +} \ No newline at end of file diff --git a/frontend/src/styles/GlobalStyles.jsx b/frontend/src/styles/GlobalStyles.jsx index e69de29bb..a634e9999 100644 --- a/frontend/src/styles/GlobalStyles.jsx +++ b/frontend/src/styles/GlobalStyles.jsx @@ -0,0 +1,11 @@ +import { createGlobalStyle } from 'styled-components' + +export const GlobalStyle = createGlobalStyle` + :root { + --main-bg-color: #FFFFFF; + --main-text-color: #000000; + --primary-color: #D9D9D9; + --secondary-color: #ECECEC; + --accent-color: #F7F7F7; + } +` \ No newline at end of file From 68814252a36915964c5f2bf644a8ebc547751e3d Mon Sep 17 00:00:00 2001 From: nicolinabl Date: Sun, 15 Feb 2026 15:30:08 +0100 Subject: [PATCH 004/120] CreateQuest form added to home page --- frontend/src/App.jsx | 1 - frontend/src/pages/HomePage.jsx | 2 ++ 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 3e632e3aa..e5d28ff4f 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -13,7 +13,6 @@ export const App = () => { return ( <> - {/* Routes */} } /> } /> diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx index 01a487ade..1fa44b384 100644 --- a/frontend/src/pages/HomePage.jsx +++ b/frontend/src/pages/HomePage.jsx @@ -1,6 +1,7 @@ import { Navbar } from '../components/Navbar' import { Header } from '../components/Header' import styled from 'styled-components' +import { CreateQuest } from '../components/CreateQuest' export const Home = () => { return ( @@ -10,6 +11,7 @@ export const Home = () => {

Motivational things

+

Motivational things

From 0dbbf3bd3ac9f7015a7f98728ce123b448efe939 Mon Sep 17 00:00:00 2001 From: nicolinabl Date: Sun, 15 Feb 2026 17:06:05 +0100 Subject: [PATCH 005/120] 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 e5d28ff4f..84ed8b3d7 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 a45fca427..e7d598a16 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 a3e14bd80..74a80128e 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 e69de29bb..7ff954f40 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 000000000..da8e3033f --- /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 731afe579..89895fc40 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 4d8d0db76..71b6540bc 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 1fa44b384..9d12f0aae 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 1c538c463..2620efad7 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 000000000..21afc144a --- /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 a634e9999..0a834abf0 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 7df29877498a74805bd561d47c2f171220654e92 Mon Sep 17 00:00:00 2001 From: Julia Demianetc Date: Sun, 15 Feb 2026 18:11:07 +0100 Subject: [PATCH 006/120] list of endpoints --- .vscode/settings.json | 22 +++++ backend/package.json | 22 +++-- backend/server.js | 194 +++++++++++++++++++++++++++++++++++++++++- frontend/api.js | 0 4 files changed, 228 insertions(+), 10 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 frontend/api.js diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..641ca762e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,22 @@ +{ + "workbench.colorCustomizations": { + "activityBar.activeBackground": "#65c89b", + "activityBar.background": "#65c89b", + "activityBar.foreground": "#15202b", + "activityBar.inactiveForeground": "#15202b99", + "activityBarBadge.background": "#945bc4", + "activityBarBadge.foreground": "#e7e7e7", + "commandCenter.border": "#15202b99", + "sash.hoverBorder": "#65c89b", + "statusBar.background": "#42b883", + "statusBar.foreground": "#15202b", + "statusBarItem.hoverBackground": "#359268", + "statusBarItem.remoteBackground": "#42b883", + "statusBarItem.remoteForeground": "#15202b", + "titleBar.activeBackground": "#42b883", + "titleBar.activeForeground": "#15202b", + "titleBar.inactiveBackground": "#42b88399", + "titleBar.inactiveForeground": "#15202b99" + }, + "peacock.color": "#42b883" +} diff --git a/backend/package.json b/backend/package.json index 08f29f244..ce6e00b85 100644 --- a/backend/package.json +++ b/backend/package.json @@ -3,18 +3,22 @@ "version": "1.0.0", "description": "Server part of final project", "scripts": { - "start": "babel-node server.js", - "dev": "nodemon server.js --exec babel-node" + "start": "nodemon server.js --exec babel-node", + "dev": "nodemon server.js --exec babel-node", + "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { - "@babel/core": "^7.17.9", - "@babel/node": "^7.16.8", - "@babel/preset-env": "^7.16.11", + "@babel/core": "^7.29.0", + "@babel/node": "^7.29.0", + "@babel/preset-env": "^7.29.0", "cors": "^2.8.5", - "express": "^4.17.3", - "mongoose": "^8.4.0", - "nodemon": "^3.0.1" + "express": "^4.22.1", + "express-list-endpoints": "^7.1.1", + "mongodb": "^7.1.0", + "mongoose": "^8.23.0", + "nodemon": "^3.1.11", + "test": "^3.3.0" } -} \ No newline at end of file +} diff --git a/backend/server.js b/backend/server.js index 070c87518..761de3185 100644 --- a/backend/server.js +++ b/backend/server.js @@ -1,6 +1,7 @@ import express from "express"; import cors from "cors"; import mongoose from "mongoose"; +import listEndpoints from "express-list-endpoints"; const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/final-project"; mongoose.connect(mongoUrl); @@ -12,8 +13,199 @@ const app = express(); app.use(cors()); app.use(express.json()); +// TODO ---- AUTHORISATION MIDDLEWARE + +// DONE ---- All ENDPOINTS, temporarily ---- + app.get("/", (req, res) => { - res.send("Hello Technigo!"); + const endpoints = listEndpoints(app); + console.log({ endpoints: endpoints }); + res.json(endpoints); // FIXME delete res.json for production +}); + +// TODO ---- POST ENDPOINTS ---- + +// ---- USER ---- + +// FIXME MUST ---- Register new user +app.post("/register", (req, res) => { + console.log("register"); +}); + +// FIXME MUST ---- Login with existing user +app.post("/login", (req, res) => { + console.log("login"); +}); + +// ---- QUESTS ---- + +// FIXME MUST --- Create a quest >>>>> only for auth users +app.post("/quests", (res, req) => { + console.log("create a quest at main page"); +}); + +// FIXME MUST ---- Quests randomization, (filter tasks =< time available today; re-try rule; randomization session with sessionId), >>>>> only for auth users +app.post("/quests/random", (req, res) => { + console.log("randomize quest and select by time"); +}); + +// FIXME MUST ---- Re-try to get a new quest >>>>> only for auth users +app.post("quests/random/:sessionId/retry", (req, res) => { + console.log("re-try"); +}); + +// FIXME ---- Complete task >>>>> only for auth users +app.post("quests/:questid/complete", (req, res) => { + console.log("Task is done"); +}); + +//FIXME NICE+ ---- User completes task too fast confirmation >>>>> only for auth users +app.post("quests/:questid/confirm-complete", (req, res) => { + console.log("Do not cheat, ok?"); +}); + +// FIXME EXTRA ---- Add actual time >>>>> only for auth users +app.post("quests/:questid/add-time", (req, res) => { + console.log("Add actual time"); +}); + +// FIXME NICE+ ---- Skip a day of quests >>>>> only for auth users +app.post("/quests/skip"); + +// FIXME NICE+ ---- Repetitive quests >>>>> only for auth users +app.post("/quests/:questid/repeat"); + +// ---- FRIENDS ---- +// FIXME MUST --- Give kudos >>>>> only for auth users +app.post("/friends/:postid/kudos", (req, res) => { + console.log("Give kudos"); +}); + +// ---- PUNISHMENTS ---- +// EXTRA ---- Send an embarrassing message to smbdy >>>>> only for auth users +app.post("/punishment/embarrass-me", (req, res) => { + console.log("Welp it didn't go well"); +}); + +// EXTRA ---- Lock instagram or tiktok for an hour >>>>> only for auth users +app.post("/punishment/lock", (req, res) => { + console.log("def too much"); +}); + +// TODO ---- GET ENDPOINTS ---- + +// ---- MAIN PAGES ---- + +// FIXME MUST ---- Home page=main page=welcome page +app.get("/home", (res, req) => { + console.log("Main=welcome=home page"); +}); + +// FIXME MUST ---- About app page +app.get("/about", (req, res) => { + console.log("about page"); +}); + +// FIXME Nice+ ---- User page (shows: current strike, settings, log out, delete user, bonus points, profile picture state, user library) >>>>> only for auth users +app.get("/profile/:userid", (req, res) => { + console.log("user info page"); +}); + +// ---- USER ---- +// FIXME ---- Smiley state of mood ---- >>>> only for auth users, returns sad/happy/delighted avatars +app.get("/user/:id/state", (req, res) => { + console.log("this is your mode"); +}); + +// ---- FRIENDS ---- + +// FIXME MUST ---- Friends Feed page (alt: any other users feed?) >>>>> only for auth users( if it's a friends page, otherwise for everybody?) +app.get("/friends", (res, req) => { + console.log("Friends feed page"); +}); + +// FIXME NICE+ ---- Find a friend bi ID page +app.get("friends/:friendid", (res, req) => { + console.log("friend by id"); +}); + +// FIXME NICE+ ---- Find a friend by :name page +app.get("/friends/:name", (req, res) => { + console.log("friend by name"); +}); + +// ---- QUESTS ---- + +// FIXME MUST ---- Quests default library (returns default tasks, categories, est time) +app.get("/quests/library", (req, res) => { + console.log("Default quest library"); +}); + +// FIXME MUST --- User created quests (returns defaut tasks user added, user created tasks, categories, est time) >>>>> only for auth users +app.get("quests/user/:userid/", (req, res) => { + console.log("User's quests full list"); +}); + +// FIXME MUST ---- Users one quest >>>>> only for auth users +app.get("/user/:id/quests/:id", (req, res) => { + console.log("My one quest of the day"); +}); + +// FIXME MUST ---- Rewards >>>>> only for auth users +app.get("/rewards", (req, res) => { + console.log("Your reward is here"); +}); + +// FIXME MUST ---- Streaks >>>>> only for auth users +app.get("/streaks", (req, res) => { + console.log("Your streak"); +}); + +// FIXME NICE+ ---- Quests history >>>>>> only for auth users +app.get("/quests/history", (req, res) => { + console.log("Shows how much user have done before"); +}); + +// TODO ---- DELETE ENDPOINTS ---- + +// ---- USER ---- + +// FIXME MUST ---- Delete user >>>> only for auth user +app.delete("/user/:id", (req, res) => { + console.log("auth by id and delete user"); +}); + +// ---- QUESTS ---- + +// FIXME MUST ---- Delete one quest >>>>> only for authorised users for their list +app.delete("/user/:id/quests/:id", (req, res) => { + console.log("delete test"); +}); + +// FIXME EXTRA ---- DELETE more than 1 quest at a time >>>>> only for authorised users for their list +app.delete("/user/:id/quests/", (req, res) => { + console.log("Delete user's quests"); +}); + +// ---- FRIENDS ---- + +// FIXME NICE+ ---- Delete a friend >>>>> only for authorised users for their feed +app.delete("/friends/:id", (req, res) => { + console.log("delete friend"); +}); + +// TODO ---- PUT ENDPOINTS ---- + +// TODO ---- PATCH ENDPOINTS ---- + +// FIXME EXTRA ---- Edit profile >>>>> only for authorised users for their own profiles(toggle easy/hard mode, change password?) +app.patch("/profile/:id/settings", (req, res) => { + console.log("edit profile"); +}); + +// FIXME NICE+ ---- Edit one quest >>>>> only for authorised users for their list +app.patch("/user/:id/quests/:id", (req, res) => { + console.log("delete test"); }); // Start the server diff --git a/frontend/api.js b/frontend/api.js new file mode 100644 index 000000000..e69de29bb From 9df6ed7ffb75a8219973f2d7c345c53a1839c18f Mon Sep 17 00:00:00 2001 From: Julia Demianetc Date: Sun, 15 Feb 2026 22:21:09 +0100 Subject: [PATCH 007/120] added quest and user schemas --- backend/schemas.js | 93 ++++++++++++++++++++++++++++++++++++++++++++++ backend/server.js | 70 ++++++++++++++++++---------------- 2 files changed, 131 insertions(+), 32 deletions(-) create mode 100644 backend/schemas.js diff --git a/backend/schemas.js b/backend/schemas.js new file mode 100644 index 000000000..3db86c908 --- /dev/null +++ b/backend/schemas.js @@ -0,0 +1,93 @@ +import mongoose from "mongoose"; + +const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/final-project"; +mongoose.connect(mongoUrl); +mongoose.Promise = Promise; + +// FIXME MUST ---- Quest ---- + +const questSchema = new mongoose.Schema( + { + message: { + type: String, + required: true, + minLength: 2, + }, + + timeNeeded: { + type: Number, + require: true, + }, + + category: { + type: String, + }, + + deadline: { + type: Date, + require: false, + }, + + done: { + type: Boolean, + default: false, + }, + }, + + { timestamps: true }, +); + +export const Quest = mongoose.model("Quest", questSchema); + +// FIXME MUST ---- User ---- + +const userSchema = new mongoose.Schema( + { + name: { + type: String, + unique: true, + required: true, + minLength: 3, + maxLength: 24, + }, + + email: { + type: String, + required: true, + unique: true, + }, + + password: { + type: String, + required: true, + minLength: 8, + }, + + registerDate: { + type: Date, + default: () => new Date(), + }, + + streak: { + type: Number, + default: 0, + }, + + todayTaskCompleted: { + type: Boolean, + default: false, + }, + + lastTaskCompleted: { + type: Date, + }, + + moodUrl: String, + }, + + { timestamps: true }, +); + +export const User = mongoose.model("User", userSchema); + +// FIXME ???NICE+ ---- Friend ----- diff --git a/backend/server.js b/backend/server.js index 761de3185..e35443cb0 100644 --- a/backend/server.js +++ b/backend/server.js @@ -2,6 +2,8 @@ import express from "express"; import cors from "cors"; import mongoose from "mongoose"; import listEndpoints from "express-list-endpoints"; +import { Quest } from "./schemas"; +import { User } from "./schemas"; const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/final-project"; mongoose.connect(mongoUrl); @@ -25,7 +27,7 @@ app.get("/", (req, res) => { // TODO ---- POST ENDPOINTS ---- -// ---- USER ---- +// TODO ---- USER ---- // FIXME MUST ---- Register new user app.post("/register", (req, res) => { @@ -37,11 +39,11 @@ app.post("/login", (req, res) => { console.log("login"); }); -// ---- QUESTS ---- +// TODO ---- QUESTS ---- // FIXME MUST --- Create a quest >>>>> only for auth users -app.post("/quests", (res, req) => { - console.log("create a quest at main page"); +app.post("/quests", (req, res) => { + res.send("Create your quest"); }); // FIXME MUST ---- Quests randomization, (filter tasks =< time available today; re-try rule; randomization session with sessionId), >>>>> only for auth users @@ -81,7 +83,7 @@ app.post("/friends/:postid/kudos", (req, res) => { console.log("Give kudos"); }); -// ---- PUNISHMENTS ---- +// TODO ---- PUNISHMENTS ---- // EXTRA ---- Send an embarrassing message to smbdy >>>>> only for auth users app.post("/punishment/embarrass-me", (req, res) => { console.log("Welp it didn't go well"); @@ -94,38 +96,42 @@ app.post("/punishment/lock", (req, res) => { // TODO ---- GET ENDPOINTS ---- -// ---- MAIN PAGES ---- - -// FIXME MUST ---- Home page=main page=welcome page -app.get("/home", (res, req) => { - console.log("Main=welcome=home page"); -}); - -// FIXME MUST ---- About app page -app.get("/about", (req, res) => { - console.log("about page"); +// TODO ---- MAIN PAGES ---- +// ---- USER ---- +// FIXME ---- Smiley state of mood ---- >>>> only for auth users, returns sad/happy/delighted avatars +app.get("/user/:id/state", (req, res) => { + /* console.log("this is your mode"); */ + res.send("User mood"); }); // FIXME Nice+ ---- User page (shows: current strike, settings, log out, delete user, bonus points, profile picture state, user library) >>>>> only for auth users app.get("/profile/:userid", (req, res) => { - console.log("user info page"); + /* console.log("user info page"); */ + res.send("User profle"); }); -// ---- USER ---- -// FIXME ---- Smiley state of mood ---- >>>> only for auth users, returns sad/happy/delighted avatars -app.get("/user/:id/state", (req, res) => { - console.log("this is your mode"); -}); - -// ---- FRIENDS ---- +// TODO ---- FRIENDS ---- // FIXME MUST ---- Friends Feed page (alt: any other users feed?) >>>>> only for auth users( if it's a friends page, otherwise for everybody?) -app.get("/friends", (res, req) => { - console.log("Friends feed page"); +app.get("/friends", (req, res) => { + res.json([ + { + name: "Jane", + quest: "Dust your books", + kudos: "5", + doneAt: "2026-02-15", + }, + { + name: "John", + quest: "Clean the kitchen", + kudos: "38", + doneAt: "2026-02-15", + }, + ]); }); // FIXME NICE+ ---- Find a friend bi ID page -app.get("friends/:friendid", (res, req) => { +app.get("/friends/:friendid", (req, res) => { console.log("friend by id"); }); @@ -134,7 +140,7 @@ app.get("/friends/:name", (req, res) => { console.log("friend by name"); }); -// ---- QUESTS ---- +// TODO ---- QUESTS ---- // FIXME MUST ---- Quests default library (returns default tasks, categories, est time) app.get("/quests/library", (req, res) => { @@ -142,8 +148,8 @@ app.get("/quests/library", (req, res) => { }); // FIXME MUST --- User created quests (returns defaut tasks user added, user created tasks, categories, est time) >>>>> only for auth users -app.get("quests/user/:userid/", (req, res) => { - console.log("User's quests full list"); +app.get("/quests", (req, res) => { + res.send("This is a list of your quests"); }); // FIXME MUST ---- Users one quest >>>>> only for auth users @@ -168,14 +174,14 @@ app.get("/quests/history", (req, res) => { // TODO ---- DELETE ENDPOINTS ---- -// ---- USER ---- +// TODO ---- USER ---- // FIXME MUST ---- Delete user >>>> only for auth user app.delete("/user/:id", (req, res) => { console.log("auth by id and delete user"); }); -// ---- QUESTS ---- +// TODO ---- QUESTS ---- // FIXME MUST ---- Delete one quest >>>>> only for authorised users for their list app.delete("/user/:id/quests/:id", (req, res) => { @@ -187,7 +193,7 @@ app.delete("/user/:id/quests/", (req, res) => { console.log("Delete user's quests"); }); -// ---- FRIENDS ---- +// TODO ---- FRIENDS ---- // FIXME NICE+ ---- Delete a friend >>>>> only for authorised users for their feed app.delete("/friends/:id", (req, res) => { From 85080a6450b409083a934d9ad3d7989a4d643880 Mon Sep 17 00:00:00 2001 From: nicolinabl Date: Mon, 16 Feb 2026 12:54:13 +0100 Subject: [PATCH 008/120] 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 84ed8b3d7..4ba1e6831 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 74a80128e..fbd24533e 100644 --- a/frontend/src/components/Navbar.jsx +++ b/frontend/src/components/Navbar.jsx @@ -6,6 +6,7 @@ export const Navbar = () => { <> ); }; const Nav = styled.nav` - /* display: flex; - background-color: var(--primary-color); - justify-content: space-between; - padding: 5px; */ background-color: var(--primary-color); padding: 8px 20px; height: 56px; @@ -63,8 +62,14 @@ const Nav = styled.nav` flex-direction: row; align-items: center; justify-content: space-between; - /* position: fixed; - z-index: 10; */ + //position: fixed; + left: 0; + right: 0; + z-index: 100; + + border-radius: 0 0 12px 12px; + /* Basic shadow */ + box-shadow: 1px 2px 2px 0 #dbdbdb; `; const HamburgerWrapper = styled.div` margin-left: auto; @@ -72,16 +77,15 @@ const HamburgerWrapper = styled.div` `; const NavMenu = styled.div` - background-color: aliceblue; + background-color: var(--medium-pink); display: ${({ isOpen }) => (isOpen ? "flex" : "none")}; - //transition: transform 0.3s ease-in-out; flex-direction: column; position: fixed; top: 0; left: 0; right: 0; - width: 100vw; - height: 100vh; + width: 100%; + height: 100%; align-items: center; justify-content: center; padding: 0; @@ -91,5 +95,51 @@ const NavMenu = styled.div` const StyledLink = styled(Link)` text-decoration: none; + font-family: "Roboto", sans-serif; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: normal; + color: var(--main-text-color); + + &:hover { + font-weight: 500; + color: var(--dark-purple); + transform: 1.2; + transition: ease; + } + + &:active { + color: var(--secondary-button-color); + transform: 0.85; + } +`; + +const LogoutButton = styled.button` + display: inline-flex; + height: 44px; + padding: 4px 12px; + justify-content: center; + align-items: center; + gap: 8px; + border-radius: 12px; + border: 1px solid var(--medium-purple); + font-size: 14px; + font-family: "Roboto", sans-serif; + font-style: normal; + font-weight: 400; + line-height: normal; + background-color: var(--medium-pink); + + &:hover { + font-weight: 500; + color: var(--dark-purple); + transform: scale(1.1); + transition: ease; + } + + &:active { + color: var(--secondary-button-color); + transform: scale(0.85); + } `; -// TODO: change to hamburger on small screens diff --git a/frontend/src/components/StreakDisplay.jsx b/frontend/src/components/StreakDisplay.jsx index 2d4fbda25..8cd9b6b6d 100644 --- a/frontend/src/components/StreakDisplay.jsx +++ b/frontend/src/components/StreakDisplay.jsx @@ -7,7 +7,7 @@ export const Streak = () => { return ( -

Daily strike:

+

Daily streak:

{isStreakLoading ? ( Loading... ) : ( @@ -26,5 +26,12 @@ const StreakWrapper = styled.div` const StreakNumber = styled.span` font-weight: 700; - font-size: 18px; + font-size: 20px; + font-family: "Roboto", sans-serif; + font-style: normal; + line-height: normal; + color: var(--dark-purple); + background-color: var(--light-pink); + padding: 2px 8px; + border-radius: 4px; `; diff --git a/frontend/src/components/cards/QuestCard.jsx b/frontend/src/components/cards/QuestCard.jsx index 05eca3672..eb933d8f3 100644 --- a/frontend/src/components/cards/QuestCard.jsx +++ b/frontend/src/components/cards/QuestCard.jsx @@ -75,7 +75,7 @@ const ChipContainer = styled.div` align-items: center; border-radius: 4px; - background: var(--light-purple); + background: var(--light-pink); `; const TimeP = styled.p` diff --git a/frontend/src/styles/GlobalStyles.jsx b/frontend/src/styles/GlobalStyles.jsx index f6d611fac..fd5ada2aa 100644 --- a/frontend/src/styles/GlobalStyles.jsx +++ b/frontend/src/styles/GlobalStyles.jsx @@ -18,12 +18,14 @@ export const GlobalStyle = createGlobalStyle` --secondary-button-color: #E9628C; --accent-color: #F497B4; + --accent-purple: #B594FF; --medium-pink: #FFD2EC; --medium-purple: #7C58FD; --light-yellow: #FFF4CA; --light-pink: #FFE2F3; --light-purple: #E5DEF8; + --dark-purple: #2D0FA3; } From 01f9ca2f83ff44d2ea2386009528d72e89711613 Mon Sep 17 00:00:00 2001 From: nicolinabl Date: Thu, 5 Mar 2026 11:46:52 +0100 Subject: [PATCH 097/120] styling forms --- frontend/src/components/LoginForm.jsx | 66 ++++++++++++++++++++---- frontend/src/components/SignupForm.jsx | 70 +++++++++++++++++++++----- 2 files changed, 112 insertions(+), 24 deletions(-) diff --git a/frontend/src/components/LoginForm.jsx b/frontend/src/components/LoginForm.jsx index 082242bb2..aef7258cf 100644 --- a/frontend/src/components/LoginForm.jsx +++ b/frontend/src/components/LoginForm.jsx @@ -90,31 +90,75 @@ export const LoginForm = () => { return ( <>
-

Welcome Back! Log in now:

+

Welcome Back! Log in now:

{/* */} - {error &&

{error}

} - - Not a user? Sign up + + Not a user? Click here to sign up
) } const Form = styled.form` + margin: 10px; + padding: 16px; + border-radius: 12px; + border: 2px solid #B594FF; + background: #FFF; + box-shadow: 2px 4px 4px 0 #DBDBDB; + text-align: center; +` +const Label = styled.label` display: flex; flex-direction: column; - background-color: var(--primary-color); - margin: 10px; +` + +const Input = styled.input` + border: none; border-radius: 12px; + padding: 15px 16px 14px 16px; + background: #F4F0FF; + margin: 16px 0; + width: 100%; + font-size: 16px; +` + +const Button = styled.button` + display: flex; + height: 54px; + width: 100%; + padding: 8px 16px; + justify-content: center; + align-items: center; + gap: 10px; + border-radius: 12px; + border: 1px solid #1D30CE; + background: #866DEB; + box-shadow: 2px 4px 4px 0 rgba(139, 139, 139, 0.30); + color: white; + font-family: "Pixelify Sans", sans-serif; + font-size: 16px; +` + +const StyledLink = styled(Link)` + text-decoration: none; + color: black; + margin: 20px; + display: block; + + &:hover{ + transform: scale(1.1) + } ` \ No newline at end of file diff --git a/frontend/src/components/SignupForm.jsx b/frontend/src/components/SignupForm.jsx index e34f99e2b..f53cfaea3 100644 --- a/frontend/src/components/SignupForm.jsx +++ b/frontend/src/components/SignupForm.jsx @@ -105,31 +105,75 @@ export const SignupForm = () => { return (

Sign up here

- {error &&

{error}

} - - I already have an account + + I already have an account
) } const Form = styled.form` + margin: 10px; + padding: 16px; + border-radius: 12px; + border: 2px solid #B594FF; + background: #FFF; + box-shadow: 2px 4px 4px 0 #DBDBDB; + text-align: center; +` +const Label = styled.label` display: flex; flex-direction: column; - background-color: var(--primary-color); - margin: 10px; +` + +const Input = styled.input` + border: none; + border-radius: 12px; + padding: 15px 16px 14px 16px; + background: #F4F0FF; + margin: 16px 0; + width: 100%; + font-size: 16px; +` + +const Button = styled.button` + display: flex; + height: 54px; + width: 100%; + padding: 8px 16px; + justify-content: center; + align-items: center; + gap: 10px; border-radius: 12px; + border: 1px solid #1D30CE; + background: #866DEB; + box-shadow: 2px 4px 4px 0 rgba(139, 139, 139, 0.30); + color: white; + font-family: "Pixelify Sans", sans-serif; + font-size: 16px; +` + +const StyledLink = styled(Link)` + text-decoration: none; + color: black; + margin: 20px; + display: block; + + &:hover{ + transform: scale(1.1) + } ` // TODO: This is only basic form and step 1/2. Add step 2 (add code sent to email to verify) From a3f79f7f50fd589e74bd50540fa614c9004f9bf5 Mon Sep 17 00:00:00 2001 From: nicolinabl Date: Thu, 5 Mar 2026 12:18:42 +0100 Subject: [PATCH 098/120] moved quest list and form, moved user to header --- frontend/src/components/CompletedQuests.jsx | 2 +- frontend/src/components/CreateQuest.jsx | 2 +- frontend/src/components/Header.jsx | 5 ++++- frontend/src/components/QuestLibrary.jsx | 2 +- frontend/src/components/QuestList.jsx | 2 +- frontend/src/pages/UserProfilePage.jsx | 4 +--- 6 files changed, 9 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/CompletedQuests.jsx b/frontend/src/components/CompletedQuests.jsx index eacaef1cc..73c16fe5e 100644 --- a/frontend/src/components/CompletedQuests.jsx +++ b/frontend/src/components/CompletedQuests.jsx @@ -15,7 +15,7 @@ export const CompletedQuests = () => { -

Completed:

+

My completed quests:

diff --git a/frontend/src/components/CreateQuest.jsx b/frontend/src/components/CreateQuest.jsx index b5006ec9d..0c067f2be 100644 --- a/frontend/src/components/CreateQuest.jsx +++ b/frontend/src/components/CreateQuest.jsx @@ -43,7 +43,7 @@ export const CreateQuest = () => { return (
-

Create new quest

+

Add quest to list