feat: improve styling, add background, fix primary color and notifica…

…tions issue #66
ricardo-campos-org · Oct 6, 2024 · 9d430b9 · 9d430b9
1 parent d03c963
commit 9d430b9
Show file tree

Hide file tree

Showing 8 changed files with 168 additions and 45 deletions.
diff --git a/client/src/assets/landing-bg.jpg b/client/src/assets/landing-bg.jpg
diff --git a/client/src/components/Footer/index.tsx b/client/src/components/Footer/index.tsx
@@ -3,7 +3,6 @@ import {
   Button, Col, Container, Row
 } from 'react-bootstrap';
 import { useNavigate } from 'react-router-dom';
-import { env } from '../../env';
 import AuthContext from '../../context/AuthContext';
 import './style.css';
 
@@ -19,7 +18,7 @@ import './style.css';
 function Footer(): JSX.Element {
   const { signOut, user } = useContext(AuthContext);
   const navigate = useNavigate();
-  const build = env.VITE_BUILD;
+  const build = import.meta.env.VITE_BUILD;
   const currentYear = new Date().getFullYear();
 
   const goOut = () => {

diff --git a/client/src/styles/custom.scss b/client/src/styles/custom.scss
@@ -1,11 +1,16 @@
-//$theme-colors: (
-//  'info': tomato,
-//  'danger': teal,
-//  'primary': green,
-//);
+$theme-colors: (
+  'info': tomato,
+  'danger': teal,
+  'primary': #61cd8d,
+);
 
 @import '~bootstrap/scss/bootstrap';
 
-.bg-body-secondary {
-  background-color: red;
+$primary-color: #61cd8d;
+$light-bg: #f8f9fa;
+$dark-text: #343a40;
+
+body {
+  background-color: $light-bg;
 }
+
diff --git a/client/src/views/Landing/index.tsx b/client/src/views/Landing/index.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback, useContext, useEffect } from 'react';
 import { Button, Container } from 'react-bootstrap';
-import './styles.scss';
 import { useNavigate } from 'react-router-dom';
 import AuthContext from '../../context/AuthContext';
+import './styles.scss';
 
 /**
  * Landing page component.
@@ -45,10 +45,10 @@ function Landing(): JSX.Element {
   }, []);
 
   return (
-    <Container fluid className="vh-100 d-flex justify-content-center align-items-center">
-      <div className="text-center">
-        <h1 className="display-4 fw-bold">Welcome to TaskNote App</h1>
-        <p className="lead mb-4">
+    <Container fluid className="vh-100 d-flex justify-content-center align-items-center landing-page">
+      <div>
+        <h1 className="display-4">Welcome to TaskNote</h1>
+        <p className="lead">
           Your best friend to keep up with notes and tasks!
         </p>
 
@@ -71,7 +71,6 @@ function Landing(): JSX.Element {
         </Button>
       </div>
     </Container>
-
   );
 }
 

diff --git a/client/src/views/Landing/styles.scss b/client/src/views/Landing/styles.scss
@@ -1,3 +1,62 @@
-body {
-  background-color: #ccc;
+$primary-color: #61cd8d;
+$light-bg: #f8f9fa;
+$dark-text: #343a40;
+
+.landing-page {
+  position: relative;
+  text-align: center;
+  color: $dark-text;
+  background: url('../../assets/landing-bg.jpg') no-repeat center center;
+  background-size: cover; // Ensures the image covers the whole background
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.85); // Slight white overlay for text readability
+    z-index: 1;
+  }
+
+  div {
+    position: relative;
+    z-index: 2; // Ensures the content is above the background and overlay
+  }
+
+  h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: $dark-text;
+  }
+
+  p {
+    font-size: 1.25rem;
+    margin-bottom: 2rem;
+    color: $dark-text;
+  }
+
+  .btn-lg {
+    font-size: 1rem;
+    padding: 0.75rem 1.5rem;
+  }
+
+  .btn-primary {
+    background-color: $primary-color;
+    border-color: $primary-color;
+    &:hover {
+      background-color: darken($primary-color, 10%);
+    }
+  }
+
+  .btn-outline-primary {
+    color: $primary-color;
+    border-color: $primary-color;
+    &:hover {
+      background-color: $primary-color;
+      color: #fff;
+    }
+  }
 }
diff --git a/client/src/views/Login/index.tsx b/client/src/views/Login/index.tsx
@@ -4,8 +4,9 @@ import React, {
 import {
   Alert, Button, Card, Col, Container, Form, Row
 } from 'react-bootstrap';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import AuthContext from '../../context/AuthContext';
+import './styles.scss';
 
 /**
  * Login page component.
@@ -45,6 +46,7 @@ function Login(): JSX.Element {
     const form = event.currentTarget;
     if (form.checkValidity() === false) {
       setFormInvalid(true);
+      setErrorMessage('Please fill in your username and password!');
       return;
     }
 
@@ -65,12 +67,12 @@ function Login(): JSX.Element {
   useEffect(() => {}, [formInvalid]);
 
   return (
-    <Container className="vh-100 d-flex justify-content-center align-items-center">
+    <Container fluid className="login-page">
       <Row className="justify-content-center w-100">
         <Col xs={12} md={6} lg={4}>
           <Card>
             <Card.Body className="p-4">
-              <h2 className="text-center mb-4">Login</h2>
+              <h2 className="text-center">Login</h2>
 
               {formInvalid ? (
                 <Alert variant="danger">
@@ -80,12 +82,12 @@ function Login(): JSX.Element {
 
               <Form noValidate validated={validated} onSubmit={handleSubmit}>
                 <Form.Group className="mb-3" controlId="formBasicEmail">
-                  <Form.Label>Email address</Form.Label>
+                  <Form.Label>Email</Form.Label>
                   <Form.Control
                     required
                     type="email"
                     name="email"
-                    placeholder="Enter email"
+                    placeholder="Type your email here"
                   />
                 </Form.Group>
 
@@ -95,7 +97,7 @@ function Login(): JSX.Element {
                     required
                     type="password"
                     name="password"
-                    placeholder="Password"
+                    placeholder="Type your password here"
                   />
                 </Form.Group>
 
@@ -109,16 +111,16 @@ function Login(): JSX.Element {
               </Form>
 
               <div className="text-center mt-3">
-                Don&apos;t have an account?&nbsp;
-                <a href="/register" className="text-decoration-none">
-                  Register
-                </a>
+                Don&apos;t have an account yet?&nbsp;
+                <Link to={"/register"} className="text-decoration-none">
+                  Register here
+                </Link>
               </div>
 
               <div className="text-center mt-3">
-                <a href="/" className="text-decoration-none">
+                <Link to={"/"} className="text-decoration-none">
                   Back to home
-                </a>
+                </Link>
               </div>
             </Card.Body>
           </Card>

diff --git a/client/src/views/Login/styles.scss b/client/src/views/Login/styles.scss
@@ -0,0 +1,62 @@
+$primary-color: #61cd8d;
+$light-bg: #f8f9fa;
+$dark-text: #343a40;
+
+.login-page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: url('../../assets/landing-bg.jpg') no-repeat center center;
+  background-size: cover;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.85); // White overlay for readability
+    z-index: 1;
+  }
+
+  .card {
+    position: relative;
+    z-index: 2;
+    border: none;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  }
+
+  h2 {
+    font-size: 1.75rem;
+    font-weight: 600;
+    margin-bottom: 1.5rem;
+    color: $dark-text;
+  }
+
+  .form-control {
+    border-radius: 5px;
+  }
+
+  .btn-primary {
+    background-color: $primary-color;
+    border-color: $primary-color;
+    &:hover {
+      background-color: darken($primary-color, 10%);
+    }
+  }
+
+  .text-center a {
+    color: $primary-color;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .alert-danger {
+    background-color: rgba(255, 0, 0, 0.1);
+    border-color: rgba(255, 0, 0, 0.3);
+  }
+}
diff --git a/client/src/views/Register/index.tsx b/client/src/views/Register/index.tsx
@@ -4,7 +4,7 @@ import React, {
 import {
   Alert, Button, Card, Col, Container, Form, Row
 } from 'react-bootstrap';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import AuthContext from '../../context/AuthContext';
 
 /**
@@ -45,6 +45,7 @@ function Register(): JSX.Element {
     const form = event.currentTarget;
     if (form.checkValidity() === false) {
       setFormInvalid(true);
+      setErrorMessage('Please fill in your username and password!');
       return;
     }
 
@@ -65,12 +66,12 @@ function Register(): JSX.Element {
   useEffect(() => {}, [formInvalid]);
 
   return (
-    <Container className="vh-100 d-flex justify-content-center align-items-center">
+    <Container fluid className="login-page">
       <Row className="justify-content-center w-100">
         <Col xs={12} md={6} lg={4}>
           <Card>
             <Card.Body className="p-4">
-              <h2 className="text-center mb-4">Create account</h2>
+              <h2 className="text-center">Create account</h2>
 
               {formInvalid ? (
                 <Alert variant="danger">
@@ -80,12 +81,12 @@ function Register(): JSX.Element {
 
               <Form noValidate validated={validated} onSubmit={handleSubmit}>
                 <Form.Group className="mb-3" controlId="formBasicEmail">
-                  <Form.Label>Email address</Form.Label>
+                  <Form.Label>Email</Form.Label>
                   <Form.Control
                     required
                     type="email"
                     name="email"
-                    placeholder="Enter email"
+                    placeholder="Type your email here"
                   />
                 </Form.Group>
 
@@ -95,7 +96,7 @@ function Register(): JSX.Element {
                     required
                     type="password"
                     name="password"
-                    placeholder="Password"
+                    placeholder="Type your password here"
                   />
                 </Form.Group>
 
@@ -104,25 +105,21 @@ function Register(): JSX.Element {
                   type="submit"
                   className="w-100"
                 >
-                  Login
+                  Sign-up and register
                 </Button>
               </Form>
 
               <div className="text-center mt-3">
                 Already have an account?&nbsp;
-                <a href="/login" className="text-decoration-none">
-                  Login
-                </a>
-                &nbsp;or&nbsp;
-                <a href="/" className="text-decoration-none">
-                  Reset
-                </a>
+                <Link to={"/login"} className="text-decoration-none">
+                  Go to Login
+                </Link>
               </div>
 
               <div className="text-center mt-3">
-                <a href="/" className="text-decoration-none">
+                <Link to={"/"} className="text-decoration-none">
                   Back to home
-                </a>
+                </Link>
               </div>
             </Card.Body>
           </Card>