From 32a729182ee757d6e13d75a977869105fc7bcf35 Mon Sep 17 00:00:00 2001
From: Harshi Sharma <45699555+HarshiSharma@users.noreply.github.com>
Date: Mon, 25 Mar 2024 17:25:18 +0000
Subject: [PATCH] UI overlook changes  (#22)

* nav change manage ui change colour change and journal icon change

* removing dummy data part oops

* login and signup UI fix

* added track distance changes (#21)

Modified below services

Frontend service
Added the new field on UI and passed the field to activity-tracking web service

Validation to enter distance for running and swimming activities

Css changes to add style for distance input field

 modified:   frontend/src/App.css
 modified:   frontend/src/components/trackExercise.js
Activity-Tracking service
Added the new field distance in the schema

Added the new field in POST request & PUT request

  modified:   activity-tracking/models/exercise.model.js
  modified:   activity-tracking/routes/exercises.js

* login and signup UI fix

* merge

* bracket fix

---------

Co-authored-by: ruchika512 <ruchika5.juneja@gmail.com>
---
 frontend/src/App.css                     | 144 +++++++++++++++++------
 frontend/src/App.js                      |  38 +++---
 frontend/src/components/journal.css      |   1 -
 frontend/src/components/journal.js       |  11 +-
 frontend/src/components/login.js         |  28 +++--
 frontend/src/components/manage.css       |  33 ++++++
 frontend/src/components/manage.js        | 139 ++++++++++++++++------
 frontend/src/components/navbar.js        |  66 ++++++-----
 frontend/src/components/signup.js        |  10 +-
 frontend/src/components/statistics.css   |   1 -
 frontend/src/components/statistics.js    |  11 +-
 frontend/src/components/trackExercise.js |   3 +-
 12 files changed, 340 insertions(+), 145 deletions(-)
 create mode 100644 frontend/src/components/manage.css

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 4b0dc04b..191b1d04 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -14,35 +14,31 @@ body {
   color: #333; 
 }
 
-#appLogo {
-  width: 150px;
-  height: auto;
-}
-
 .App {
-  text-align: center;
-  max-width: 750px;
-  margin: auto;
-  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  height: 100vh; /* Utilize full height of the screen */
 }
-
-.appTitle header {
+.grid-container {
   display: flex;
-  align-items: center; /* Align items vertically */
-  justify-content: center; /* Align items horizontally */
-  margin-bottom: 20px; /* Adjust spacing */
+  flex: 1; /* Grow to fill available space */
+}
+
+#header{
+ margin: 5px 5px 25px 5px;
+}
+.navComponent{
+  border-top: 0.1rem solid var(--mantine-color-dark-1);
 }
 
-.appTitle h1 {
-  color: #F54996ff;
-  font-size: 36px;
-  margin-left: 20px; /* Adjust spacing between h1 and img */
+#appTitle {
+  color: #882255;
+  font-size: 30px;
 }
 
 #appLogo {
-  width: 50px; /* Adjust the width of the logo */
-  height: auto; /* Maintain aspect ratio */
-  margin-right: 20px; /* Add space between h1 and img */
+  width: 35px;
+  height: auto;
 }
 
 form {
@@ -51,7 +47,7 @@ form {
 
 
 button.navigationButton {
-  background-color: #F54996ff; 
+  background-color: #882255; 
   color: white; 
   border: none;
   padding: 10px 20px;
@@ -65,36 +61,38 @@ button.navigationButton:hover {
   background-color: #ff66b2;
 }
 
-/* Style the success message */
 p.successMessage {
   color: green;
   margin-bottom: 20px;
 }
 
 .componentContainer {
+  flex: 1; /* Grow to fill remaining space */
   padding: 30px;
   background-color: #f0f0f0; 
   border-radius: 5px; 
+  text-align: center;
 }
 
+
 .btn-primary {
-  background-color: #F54996 !important;
-  border-color: #F54996ff !important;
+  background-color: #882255 !important;
+  border-color: #882255 !important;
 }
 
 .btn-primary:hover {
-  background-color: #f03087 !important; 
-  border-color: #F54996ff !important; 
+  background-color: #882255 !important; 
+  border-color: #882255 !important; 
 }
 
 .btn-success {
-  background-color: #F54996 !important;
-  border-color: #F54996ff !important;
+  background-color: #882255 !important;
+  border-color: #882255 !important;
 }
 
 .btn-success:hover {
   background-color: #f03087 !important;  
-  border-color: #F54996ff !important; 
+  border-color: #882255 !important; 
 }
 
 input#duration {
@@ -102,6 +100,42 @@ input#duration {
   margin: auto; 
 }
 
+#appTitleLogin {
+  width: 50px; /* Adjust the width of the logo */
+  height: auto; /* Maintain aspect ratio */
+  margin-right: 30px; /* Add space between h1 and img */
+  width: 35px;
+  height: auto;
+}
+.appTitleLogin header {
+  display: flex;
+  align-items: center; /* Align items vertically */
+  justify-content: center; /* Align items horizontally */
+  margin-bottom: 20px; /* Adjust spacing */
+}
+.appTitleLogin header h1 {
+ margin-left: 20px;
+ color: #882255;
+}
+
+#appTitleLogin {
+  width: 50px; /* Adjust the width of the logo */
+  height: auto; /* Maintain aspect ratio */
+  margin-right: 30px; /* Add space between h1 and img */
+  width: 35px;
+  height: auto;
+}
+.appTitleLogin header {
+  display: flex;
+  align-items: center; /* Align items vertically */
+  justify-content: center; /* Align items horizontally */
+  margin-bottom: 20px; /* Adjust spacing */
+}
+.appTitleLogin header h1 {
+ margin-left: 20px;
+ color: #882255;
+}
+  
 input#distance {
   width: 20%; 
   margin: auto; 
@@ -117,13 +151,45 @@ input#distance {
   padding: 10px;
   font-size: 12px;
   color: lightgrey;
-  position: relative;
-  bottom: 0;
-  width: 100%;
 }
 
 .navbar {
-  background-color: #F54996;
+  height: rem(700px);
+  width: rem(300px);
+  display: flex;
+  flex-direction: column;
+  border-right: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}
+
+#navLink {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  font-size: var(--mantine-font-size-sm);
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+  border-radius: var(--mantine-radius-sm);
+  font-weight: 500;
+
+  &:hover,
+  &[data-active] {
+    background-color: #228be61a;
+    color: var(--mantine-color-blue-light-color);
+
+    .linkIcon {
+      color: var(--mantine-color-blue-light-color);
+    }
+  }
+}
+
+
+
+
+.linkIcon {
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+  margin-right: var(--mantine-spacing-sm);
+  width: rem(25px);
+  height: rem(25px);
 }
 
 .navbar-nav {
@@ -136,4 +202,14 @@ input#distance {
 
 .signup {
   margin: 20px;
+}
+
+
+.login-container{
+  max-width: 600px;
+  margin: auto;
+  background-color: #f5f5f5;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0,0,0,0.1);
 }
\ No newline at end of file
diff --git a/frontend/src/App.js b/frontend/src/App.js
index 84897185..9b2687b5 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -35,28 +35,22 @@ function App() {
     <MantineProvider>
       <div className="App">
         <Router>
-          <div className="appTitle">
-            <header>
-              <img src={logo} alt="CFG Fitness App Logo" id="appLogo" />
-              <h1>MLA Fitness App</h1>
-            </header>
-          </div>
-
-          {isLoggedIn && <NavbarComponent onLogout={handleLogout} />}
-
-          <div className="componentContainer">
-            <Routes>
-              <Route path="/login" element={isLoggedIn ? <Navigate to="/" /> : <Login onLogin={handleLogin} />} />
-              <Route path="/signup" element={isLoggedIn ? <Navigate to="/" /> : <Signup onSignup={(username) => {
-                setIsLoggedIn(true);
-                setCurrentUser(username);
-              }} />} />
-              <Route path="/trackExercise" element={isLoggedIn ? <TrackExercise currentUser={currentUser} /> : <Navigate to="/login" />} />
-              <Route path="/statistics" element={isLoggedIn ? <Statistics currentUser={currentUser} /> : <Navigate to="/login" />} />
-              <Route path="/journal" element={isLoggedIn ? <Journal currentUser={currentUser} /> : <Navigate to="/login" />} />
-              <Route path="/manage" element={isLoggedIn ? <Manage currentUser={currentUser} /> : <Navigate to="/login" />} />
-            <Route path="/" element={isLoggedIn ? <Navigate to="/trackExercise" /> : <Navigate to="/login" />} />
-            </Routes>
+          <div className="grid-container">
+            {isLoggedIn && <NavbarComponent onLogout={handleLogout} logo={logo} />}
+            <div className="componentContainer">
+              <Routes>
+                <Route path="/login" element={isLoggedIn ? <Navigate to="/" /> : <Login onLogin={handleLogin} />} />
+                <Route path="/signup" element={isLoggedIn ? <Navigate to="/" /> : <Signup onSignup={(username) => {
+                  setIsLoggedIn(true);
+                  setCurrentUser(username);
+                }} />} />
+                <Route path="/trackExercise" element={isLoggedIn ? <TrackExercise currentUser={currentUser} /> : <Navigate to="/login" />} />
+                <Route path="/statistics" element={isLoggedIn ? <Statistics currentUser={currentUser} /> : <Navigate to="/login" />} />
+                <Route path="/journal" element={isLoggedIn ? <Journal currentUser={currentUser} /> : <Navigate to="/login" />} />
+                <Route path="/manage" element={isLoggedIn ? <Manage currentUser={currentUser} /> : <Navigate to="/login" />} />
+                <Route path="/" element={isLoggedIn ? <Navigate to="/trackExercise" /> : <Navigate to="/login" />} />
+              </Routes>
+            </div>
           </div>
           <Footer />
         </Router>
diff --git a/frontend/src/components/journal.css b/frontend/src/components/journal.css
index bdb4ce3b..800b18aa 100644
--- a/frontend/src/components/journal.css
+++ b/frontend/src/components/journal.css
@@ -1,5 +1,4 @@
 .journal-container {
-    max-width: 600px;
     margin: auto;
     background-color: #f5f5f5;
     padding: 20px;
diff --git a/frontend/src/components/journal.js b/frontend/src/components/journal.js
index 175a1618..f7e54266 100644
--- a/frontend/src/components/journal.js
+++ b/frontend/src/components/journal.js
@@ -8,11 +8,11 @@ import axios from 'axios';
 import config from '../config';
 
 const iconMap = {
-  Running: { icon: IconRun, color: '#322142' },
-  Cycling: { icon: IconBike, color: '#03A6A6' },
-  Gym: { icon: IconBarbell, color: '#00563E' },
-  Swimming: { icon: IconSwimming, color: '#CE466B' },
-  Other: { icon: IconHelpOctagon, color: '#F25757' }
+  Running: { icon: IconRun, color: '#882255' },
+  Cycling: { icon: IconBike, color: '#785EF0' },
+  Gym: { icon: IconBarbell, color: '#4B0092' },
+  Swimming: { icon: IconSwimming, color: '#0072B2' },
+  Other: { icon: IconHelpOctagon, color: '#117733' }
 };
 
 const Journal = ({ currentUser }) => {
@@ -180,6 +180,7 @@ const Journal = ({ currentUser }) => {
   return (
     <div className="journal-container">
       <h4>Weekly Exercise Journal</h4>
+      <hr/>
       <div className="date-range">
         <Button className="button-small" onClick={goToPreviousWeek}>&larr; Previous</Button>
         <span>{startDate.format('MMM DD, YYYY')} - {endDate.format('MMM DD, YYYY')}</span>
diff --git a/frontend/src/components/login.js b/frontend/src/components/login.js
index 0fe84d04..9049cd81 100644
--- a/frontend/src/components/login.js
+++ b/frontend/src/components/login.js
@@ -3,6 +3,8 @@ import { Button, Form, Alert } from 'react-bootstrap';
 import axios from 'axios';
 import { Link } from 'react-router-dom';
 import config from '../config';
+import logo from '../img/CFG_logo.png';
+import '../App.css'
 
 const Login = ({ onLogin }) => {
   const [username, setUsername] = useState('');
@@ -30,28 +32,34 @@ const Login = ({ onLogin }) => {
 
   return (
     <div className="login-container">
+      <div className="appTitleLogin">
+        <header>
+          <img src={logo} alt="CFG Fitness App Logo" id="appLogo" />
+          <h1>MLA Fitness App</h1>
+        </header>
+      </div>
 
       {error && <Alert variant="danger">{error}</Alert>}
 
       <Form onSubmit={handleLogin}>
         <Form.Group controlId="formUsername">
           <Form.Label>Username</Form.Label>
-          <Form.Control 
-            type="text" 
-            placeholder="Enter username" 
-            value={username} 
-            onChange={(e) => setUsername(e.target.value)} 
+          <Form.Control
+            type="text"
+            placeholder="Enter username"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
             required
           />
         </Form.Group>
 
         <Form.Group controlId="formPassword">
           <Form.Label>Password</Form.Label>
-          <Form.Control 
-            type="password" 
-            placeholder="Password" 
-            value={password} 
-            onChange={(e) => setPassword(e.target.value)} 
+          <Form.Control
+            type="password"
+            placeholder="Password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
             required
           />
         </Form.Group>
diff --git a/frontend/src/components/manage.css b/frontend/src/components/manage.css
new file mode 100644
index 00000000..0965cb3a
--- /dev/null
+++ b/frontend/src/components/manage.css
@@ -0,0 +1,33 @@
+.manageContainer{
+    margin: auto;
+    background-color: #f5f5f5;
+    padding: 20px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+.th {
+    padding: 0;
+}
+
+.control {
+    width: 100%;
+    padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
+
+    @mixin hover {
+        background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+    }
+}
+
+.icon {
+    width: rem(21px);
+    height: rem(21px);
+    border-radius: rem(21px);
+}
+
+.item {
+    border-radius: var(--mantine-radius-md);
+    border: rem(1px) solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+    padding: var(--mantine-spacing-sm) var(--mantine-spacing-xl);
+    background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-5));
+    margin-bottom: var(--mantine-spacing-sm);
+  }
\ No newline at end of file
diff --git a/frontend/src/components/manage.js b/frontend/src/components/manage.js
index 4905cc28..f33ee18a 100644
--- a/frontend/src/components/manage.js
+++ b/frontend/src/components/manage.js
@@ -1,16 +1,58 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router';
 import axios from 'axios';
-import { Button } from 'react-bootstrap';
+import { Table, Text, ScrollArea, rem, ActionIcon, Flex, Tooltip } from '@mantine/core';
+import { IconChevronDown, IconChevronUp, IconEdit, IconTrash } from '@tabler/icons-react';
 import moment from 'moment';
-import './journal.css';
+import './manage.css';
 import config from '../config';
 
-
 const Manage = ({ currentUser }) => {
   const [exercises, setExercises] = useState([]);
+  const [sortedExercises, setSortedExercises] = useState([]);
+  const [sortBy, setSortBy] = useState(null);
+  const [reverseSortDirection, setReverseSortDirection] = useState(false);
   const navigate = useNavigate();
 
+  useEffect(() => {
+    setSortedExercises(exercises); // Set sortedExercises initially
+  }, [exercises]);
+
+  const handleSort = (field) => {
+    setSortBy(field);
+    setReverseSortDirection((prevReverseSortDirection) =>
+      field === sortBy ? !prevReverseSortDirection : false
+    );
+    filterAndSortExercises(field);
+  };   
+
+  const filterAndSortExercises = (sortByField) => {
+    const sortedExercisesCopy = [...exercises];
+  
+    sortedExercisesCopy.sort((a, b) => {
+      if (sortByField === 'date') {
+        const dateA = new Date(a.date);
+        const dateB = new Date(b.date);
+        return dateA - dateB;
+      }
+      
+      if (sortByField === 'duration') {
+        return a.duration - b.duration;
+      }
+  
+      const fieldA = a[sortByField].toLowerCase();
+      const fieldB = b[sortByField].toLowerCase();
+      return fieldA.localeCompare(fieldB);
+    });
+  
+    if (reverseSortDirection) {
+      sortedExercisesCopy.reverse();
+    }
+  
+    setSortedExercises(sortedExercisesCopy);
+  };  
+  
+
   const getExercises = async () => {
     try {
       const url = `${config.apiUrl}/exercises/user/${currentUser}`;
@@ -23,20 +65,21 @@ const Manage = ({ currentUser }) => {
       }
     } catch (error) {
       console.error('Failed to fetch exercises', error);
+      setExercises([]);
     }
   };
 
   useEffect(() => {
     getExercises();
-  }, [exercises, currentUser]);
+  }, []);
 
-  const deleteExercise = (id) => {
+  const handleDeleteExercise = async (id) => {
     axios.delete(`${config.apiUrl}/exercises/${id}`).then((response) => {
       getExercises();
     });
   };
 
-  const editExercise = (id) => {
+  const handleEditExercise = (id) => {
     axios.get(`${config.apiUrl}/exercises/${id}`).then((response) => {
       navigate(`/trackExercise/`, {
         state: response.data
@@ -44,35 +87,65 @@ const Manage = ({ currentUser }) => {
     });
   };
 
+  const exerciseRows = sortedExercises.map((exercise, index) => (
+    <Table.Tr key={index} className="exercise-journal-data">
+      <Table.Td style={{ textAlign: 'center' }}>{moment(exercise.date).format('MMM DD, YYYY')}</Table.Td>
+      <Table.Td style={{ textAlign: 'center' }}>{exercise.exerciseType}</Table.Td>
+      <Table.Td style={{ textAlign: 'center' }}>{exercise.duration} mins</Table.Td>
+      <Table.Td style={{ textAlign: 'center' }}>
+        <Flex gap="md" style={{ justifyContent: 'center' }}>
+          <Tooltip label="Edit">
+            <ActionIcon size={25} color='#0072B2' onClick={() => handleEditExercise(exercise._id)}>
+              <IconEdit style={{ width: rem(20), height: rem(20) }}/>
+            </ActionIcon>
+          </Tooltip>
+          <Tooltip label="Delete">
+            <ActionIcon size={25} color="#882255" onClick={() => handleDeleteExercise(exercise._id)}>
+              <IconTrash style={{ width: rem(20), height: rem(20) }} />
+            </ActionIcon>
+          </Tooltip>
+        </Flex>
+      </Table.Td>
+    </Table.Tr>
+  ));  
+
+  return (
+    <ScrollArea className='manageContainer'>
+      <h4>Manage Exercise</h4>
+      <hr/>
+      <Table horizontalSpacing="md" verticalSpacing="md" miw={700} layout="fixed">
+        <Table.Tbody>
+          <Table.Tr>
+            <Th sorted={sortBy === 'date'} reverseSortDirection={reverseSortDirection} onSort={() => handleSort('date')}>Date</Th>
+            <Th sorted={sortBy === 'exerciseType'} reverseSortDirection={reverseSortDirection} onSort={() => handleSort('exerciseType')}>Exercise Type</Th>
+            <Th sorted={sortBy === 'duration'} reverseSortDirection={reverseSortDirection} onSort={() => handleSort('duration')}>Duration</Th>
+            <Th>Actions</Th>
+          </Table.Tr>
+          {exerciseRows.length > 0 ? (
+            exerciseRows
+          ) : (
+            <Table.Tr>
+              <Table.Td colSpan={4}>
+                <Text fw={500} ta="center">No exercises found for this period.</Text>
+              </Table.Td>
+            </Table.Tr>
+          )}
+        </Table.Tbody>
+      </Table>
+    </ScrollArea>
+  );
+};
+
+const Th = ({ children, sorted, reverseSortDirection, onSort }) => {
+  const Icon = sorted ? (reverseSortDirection ? IconChevronUp : IconChevronDown) : null;
 
   return (
-    <div className="journal-container">
-      <h4>All Exercises</h4>
-      <br></br>
-      <ul>
-        {exercises && exercises.length > 0 ? (
-          exercises.map((exercise, index) => (
-            <li key={index} className="exercise-journal-data">
-              <div>
-                <div><b>{moment(exercise.date).format('MMM DD, YYYY')}</b></div>
-                <div>{exercise.exerciseType}</div>
-                <div>{exercise.duration} mins</div>
-              </div>
-              <div>
-                <button className='btn' onClick={() => editExercise(exercise._id)}>
-                  Edit
-                </button>
-                <button className='btn' onClick={() => deleteExercise(exercise._id)}>
-                  Delete
-                </button>
-              </div>
-            </li>
-          ))
-        ) : (
-          <li>No exercises found for this period.</li>
-        )}
-      </ul>
-    </div>
+    <Table.Th onClick={onSort} className="th" style={{ fontWeight: 'bold', fontSize: '1.1rem', textAlign: 'center' }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <div>{children}</div>
+        {Icon && <Icon className="icon" style={{ width: rem(16), height: rem(16), marginLeft: '0.25rem' }} />}
+      </div>
+    </Table.Th>
   );
 };
 
diff --git a/frontend/src/components/navbar.js b/frontend/src/components/navbar.js
index 32041591..c800911f 100644
--- a/frontend/src/components/navbar.js
+++ b/frontend/src/components/navbar.js
@@ -1,44 +1,46 @@
 import React from 'react';
 import { Navbar, Nav } from 'react-bootstrap';
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom'; // Import Link from react-router-dom
+import { IconHeartPlus, IconChartInfographic, IconNotebook, IconFilePencil, IconLogout } from '@tabler/icons-react';
+import { Group } from '@mantine/core';
+import logo from '../img/CFG_logo.png';
 
 const NavbarComponent = ({ onLogout }) => {
-  const navigate = useNavigate();
+  const data = [
+    { link: '/trackExercise', label: 'Track New Exercise', icon: IconHeartPlus },
+    { link: '/statistics', label: 'Statistics', icon: IconChartInfographic },
+    { link: '/journal', label: 'Weekly Journal', icon: IconNotebook },
+    { link: '/manage', label: 'Manage', icon: IconFilePencil },
+    { label: 'Logout', icon: IconLogout },
+  ];
 
-  const onNavigate = (route) => {
-    console.log('Navigating to:', route);
-    switch (route) {
-      case 'TrackExercise':
-        navigate('/trackExercise');
-        break;
-      case 'Statistics':
-        navigate('/statistics');
-        break;
-      case 'Journal':
-        navigate('/journal');
-        break;
-      case 'Manage':
-        navigate('/manage');
-        break;
-      default:
-        console.error('Invalid route:', route);
-    }
+  const handleLogout = () => {
+    onLogout();
   };
 
   return (
-    <Navbar className="nav-back custom-navbar" expand="lg">
-      <Navbar.Toggle aria-controls="basic-navbar-nav" />
-      <Navbar.Collapse id="basic-navbar-nav">
-        <Nav className="mr-auto">
-          <Nav>
-            <Nav.Link className="custom-nav-link" onClick={() => onNavigate('TrackExercise')}>Track New Exercise</Nav.Link>
-            <Nav.Link className="custom-nav-link" onClick={() => onNavigate('Statistics')}>Statistics</Nav.Link>
-            <Nav.Link className="custom-nav-link" onClick={() => onNavigate('Journal')}>Weekly Journal</Nav.Link>
-            <Nav.Link className="custom-nav-link" onClick={() => onNavigate('Manage')}>Manage</Nav.Link>
-            <Nav.Link className="custom-nav-link" onClick={onLogout}>Logout</Nav.Link>
-          </Nav>
+    <Navbar className="navbar" expand="lg">
+      <div className="navbarMain">
+        <Group id="header" align="center">
+          <img src={logo} alt="CFG Fitness App Logo" id="appLogo" />
+          <h3 id="appTitle">MLA Fitness App</h3>
+        </Group>
+        <Nav className="mr-auto flex-column navComponent">
+          {data.map((item, index) => (
+            item.label === 'Logout' ? (
+              <Nav.Link key={index} id="navLink" onClick={handleLogout}>
+                <item.icon className="linkIcon" stroke={1.5} />
+                <span>{item.label}</span>
+              </Nav.Link>
+            ) : (
+              <Link key={index} id="navLink" to={item.link}>
+                <item.icon className="linkIcon" stroke={1.5} />
+                <span>{item.label}</span>
+              </Link>
+            )
+          ))}
         </Nav>
-      </Navbar.Collapse>
+      </div>
     </Navbar>
   );
 };
diff --git a/frontend/src/components/signup.js b/frontend/src/components/signup.js
index 02f169c9..f06aa507 100644
--- a/frontend/src/components/signup.js
+++ b/frontend/src/components/signup.js
@@ -3,6 +3,8 @@ import { Button, Form, Alert } from 'react-bootstrap';
 import axios from 'axios';
 import { Link } from 'react-router-dom';
 import config from '../config';
+import logo from '../img/CFG_logo.png';
+import '../App.css'
 
 const Signup = ({ onSignup }) => {
   const [formData, setFormData] = useState({ username: '', password: '' });
@@ -48,7 +50,13 @@ const Signup = ({ onSignup }) => {
 
 
   return (
-    <div>
+    <div className="login-container">
+      <div className="appTitleLogin">
+        <header>
+          <img src={logo} alt="CFG Fitness App Logo" id="appLogo" />
+          <h1>MLA Fitness App</h1>
+        </header>
+      </div>
       {error && <Alert variant="danger">{error}</Alert>}
 
       <Form onSubmit={handleSignup}>
diff --git a/frontend/src/components/statistics.css b/frontend/src/components/statistics.css
index 8e032415..4c3ce397 100644
--- a/frontend/src/components/statistics.css
+++ b/frontend/src/components/statistics.css
@@ -1,5 +1,4 @@
 .stats-container {
-  max-width: 600px;
   margin: auto;
   background-color: #f5f5f5;
   padding: 20px;
diff --git a/frontend/src/components/statistics.js b/frontend/src/components/statistics.js
index ddd50be1..b35838b7 100644
--- a/frontend/src/components/statistics.js
+++ b/frontend/src/components/statistics.js
@@ -5,11 +5,11 @@ import { PieChart, Pie, ResponsiveContainer, Sector, Cell, Text } from 'recharts
 import config from '../config';
 
 const iconMap = {
-  Running: '#322142',
-  Cycling: '#03A6A6',
-  Gym: '#00563E',
-  Swimming: '#CE466B',
-  Other: '#F25757'
+  Running: '#882255',
+  Cycling: '#785EF0',
+  Gym: '#4B0092',
+  Swimming: '#0072B2',
+  Other: '#117733'
 };
 
 const Statistics = ({ currentUser }) => {
@@ -84,6 +84,7 @@ const Statistics = ({ currentUser }) => {
   return (
     <div className="stats-container">
       <h4>Well done, {currentUser}! This is your overall effort:</h4>
+      <hr/>
       {loading ? (
         <p>Loading...</p>
       ) : exercisesData.length > 0 ? (
diff --git a/frontend/src/components/trackExercise.js b/frontend/src/components/trackExercise.js
index 1f5d3c4b..a748bd02 100644
--- a/frontend/src/components/trackExercise.js
+++ b/frontend/src/components/trackExercise.js
@@ -95,7 +95,8 @@ const TrackExercise = ({ currentUser }) => {
 
   return (
     <div>
-      <h3>Track exercise</h3>
+      <h4>Track exercise</h4>
+      <hr/>
       <Form onSubmit={onSubmit} style={{ maxWidth: '400px', margin: 'auto' }}>
 
         <Form.Group controlId="formDate" className="form-margin">