Skip to content

Commit

Permalink
UI overlook changes (#22)
Browse files Browse the repository at this point in the history 
* 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 <[email protected]>
  • Loading branch information
@HarshiSharma @ruchika512
HarshiSharma and ruchika512 committed Mar 25, 2024
1 parent 7bbc36e commit 32a7291
Show file tree
Hide file tree
Showing 12 changed files with 340 additions and 145 deletions.
144 changes: 110 additions & 34 deletions frontend/src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -51,7 +47,7 @@ form {


button.navigationButton {
background-color: #F54996ff;
background-color: #882255;
color: white;
border: none;
padding: 10px 20px;
Expand All @@ -65,43 +61,81 @@ 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 {
width: 20%;
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;
Expand All @@ -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 {
Expand All @@ -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);
}
38 changes: 16 additions & 22 deletions frontend/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 0 additions & 1 deletion frontend/src/components/journal.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
.journal-container {
max-width: 600px;
margin: auto;
background-color: #f5f5f5;
padding: 20px;
Expand Down
11 changes: 6 additions & 5 deletions frontend/src/components/journal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
Expand Down Expand Up @@ -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>
Expand Down
28 changes: 18 additions & 10 deletions frontend/src/components/login.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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('');
Expand Down Expand Up @@ -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>
Expand Down
33 changes: 33 additions & 0 deletions frontend/src/components/manage.css
View file
Original file line number Diff line number Diff line change
@@ -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);
}
Loading

0 comments on commit 32a7291

Please sign in to comment.