From ad5bd27adc9c6f7de317fe62b5140eecb06d0209 Mon Sep 17 00:00:00 2001
From: Iga Antonik <igaantonik@student.agh.edu.pl>
Date: Fri, 13 Jun 2025 11:58:23 +0200
Subject: [PATCH] feat: onboarding page ui updated

---
 .../components/onboarding/EnterNameForm.tsx   | 91 ++++++++++---------
 frontend/app/src/components/shared/Navbar.tsx |  1 -
 frontend/app/src/screens/OnboardingPage.tsx   | 66 ++++++++++++--
 3 files changed, 110 insertions(+), 48 deletions(-)

diff --git a/frontend/app/src/components/onboarding/EnterNameForm.tsx b/frontend/app/src/components/onboarding/EnterNameForm.tsx
index b45dcaa..d619ace 100644
--- a/frontend/app/src/components/onboarding/EnterNameForm.tsx
+++ b/frontend/app/src/components/onboarding/EnterNameForm.tsx
@@ -3,44 +3,54 @@ import styled from 'styled-components';
 import useUserStore from '../../store/useUserStore';
 
 const Form = styled.form`
-    margin-top: 20px;
-    width: 400px;
+    width: 100%;
     display: flex;
     flex-direction: column;
+    gap: 12px;
+`;
 
-    & > div {
-        width: 100%;
-        height: 50px;
-        display: flex;
-    }
+const Input = styled.input`
+    width: 100%;
+    padding: 12px;
+    border-radius: 8px;
+    border: 1px solid #ced4da;
+    font-size: 1rem;
+    font-family: 'Inter', sans-serif;
+    box-sizing: border-box;
 
-    & > div > input[type='text'],
-    & > div > input[type='text']:focus {
-        border-radius: 10px 0px 0px 10px;
-        flex: 1;
-        border: 1px solid #808080;
-        padding-left: 10px;
-        font-size: 20px;
+    &:focus {
         outline: none;
+        border-color: #ca0013;
+        box-shadow: 0 0 0 2px rgba(202, 0, 19, 0.2);
     }
+`;
+
+const ErrorText = styled.p`
+    color: #ca0013;
+    font-size: 0.875rem;
+    margin: 0;
+    min-height: 1em;
+`;
+
+const SubmitButton = styled.button`
+    padding: 12px;
+    background-color: #ca0013;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-weight: bold;
+    font-size: 1rem;
+    font-family: 'Paytone One', sans-serif;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
 
-    & > div > input[type='submit'] {
-        border-radius: 0px 10px 10px 0px;
-        background-color: rgb(55, 97, 226);
-        color: #fff;
-        font-weight: bold;
-        padding: 0px 20px;
-        border: 1px solid #808080;
-        border-left-width: 0px;
-        cursor: pointer;
+    &:hover {
+        background-color: #a00010;
     }
 
-    & > p {
-        color: red;
-        margin-top: 10px;
-        font-size: 15px;
-        margin-left: 10px;
-        height: 20px;
+    &:disabled {
+        background-color: #ccc;
+        cursor: not-allowed;
     }
 `;
 
@@ -51,26 +61,25 @@ function EnterNameForm() {
 
     const formSubmitHandler = (e: FormEvent<HTMLFormElement>) => {
         e.preventDefault();
-        if (value === '') {
+        if (value.trim() === '') {
             setError('Nickname cannot be empty!');
             return;
         }
-        setUsername(value);
+        setError(null);
+        setUsername(value.trim());
         setIsOnboarded(true);
     };
 
     return (
         <Form onSubmit={formSubmitHandler}>
-            <div>
-                <input
-                    type="text"
-                    placeholder="your nickname"
-                    onChange={(e) => setValue(e.target.value)}
-                    value={value}
-                />
-                <input type="submit" value="Proceed" />
-            </div>
-            <p>{error}</p>
+            <Input
+                type="text"
+                placeholder="Your nickname"
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+            />
+            <SubmitButton type="submit">Proceed</SubmitButton>
+            <ErrorText>{error}</ErrorText>
         </Form>
     );
 }
diff --git a/frontend/app/src/components/shared/Navbar.tsx b/frontend/app/src/components/shared/Navbar.tsx
index cbab8ed..88909ef 100644
--- a/frontend/app/src/components/shared/Navbar.tsx
+++ b/frontend/app/src/components/shared/Navbar.tsx
@@ -99,7 +99,6 @@ const JoinGroupButton = styled.button`
 `;
 
 const LogoutButton = styled.button`
-margin-left: 100px;
   padding: 8px 16px;
   background-color: #ca0013;
   color: white;
diff --git a/frontend/app/src/screens/OnboardingPage.tsx b/frontend/app/src/screens/OnboardingPage.tsx
index b553520..d4f87e1 100644
--- a/frontend/app/src/screens/OnboardingPage.tsx
+++ b/frontend/app/src/screens/OnboardingPage.tsx
@@ -1,13 +1,67 @@
+import styled from 'styled-components';
 import PageContainer from '../components/shared/PageContainer';
 import EnterNameForm from '../components/onboarding/EnterNameForm';
+import logo from '../assets/logo2.png';
+
+const Heading = styled.h1`
+  font-family: 'Paytone One', sans-serif;
+  font-size: 1.5rem;
+  color: black;
+  margin-bottom: 24px;
+  text-align: center;
+`;
+
+const CenteredWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+const AppHeader = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+
+  img {
+    height: 120px;
+    margin-bottom: 12px;
+  }
+
+  h1 {
+    font-family: 'Paytone One', sans-serif;
+    font-size: 2rem;
+    color: #ca0013;
+    margin: 0;
+  }
+`;
+
+const OnboardingBox = styled.div`
+  max-width: 400px;
+  width: 100%;
+  padding: 32px;
+  border: 2px solid #ca001360;
+  border-radius: 12px;
+  background-color: #fff;
+  box-shadow: 0 4px 12px rgba(202, 0, 19, 0.08);
+`;
 
 function OnboardingPage() {
-    return (
-        <PageContainer centered>
-            <h1>Enter Your Nickname</h1>
-            <EnterNameForm />
-        </PageContainer>
-    );
+  return (
+    <PageContainer>
+      <CenteredWrapper>
+        <AppHeader>
+          <img src={logo} alt="Bug Hunter Logo" />
+          <h1>Bug Hunter</h1>
+        </AppHeader>
+
+        <OnboardingBox>
+          <Heading>Enter Your Nickname</Heading>
+          <EnterNameForm />
+        </OnboardingBox>
+      </CenteredWrapper>
+    </PageContainer>
+  );
 }
 
 export default OnboardingPage;