Merge pull request #31 from 4GeeksAcademy/navbar

Navbar

Author: LMezza

Diff for: migrations/versions/19d0bae16ce8_.py renamed to migrations/versions/ec9225e89728_.py

@@ -1,16 +1,16 @@
 """empty message
 
-Revision ID: 19d0bae16ce8
+Revision ID: ec9225e89728
 Revises: 
-Create Date: 2025-03-14 09:27:19.200938
+Create Date: 2025-03-15 12:37:58.090944
 
 """
 from alembic import op
 import sqlalchemy as sa
 
 
 # revision identifiers, used by Alembic.
-revision = '19d0bae16ce8'
+revision = 'ec9225e89728'
 down_revision = None
 branch_labels = None
 depends_on = None
@@ -24,7 +24,6 @@ def upgrade():
     sa.Column('email', sa.String(length=120), nullable=False),
     sa.Column('password', sa.String(length=500), nullable=False),
     sa.Column('is_active', sa.Boolean(), nullable=False),
-    sa.Column('role', sa.Integer(), nullable=False),
     sa.PrimaryKeyConstraint('id'),
     sa.UniqueConstraint('email')
     )

Diff for: package-lock.json

@@ -73,6 +73,7 @@
 		]
 	},
 	"dependencies": {
+		"bootstrap": "^5.3.3",
 		"lucide-react": "^0.477.0",
 		"prop-types": "^15.6.1",
 		"react": "^19.0.0",

Diff for: package.json

@@ -12,7 +12,7 @@ class User(db.Model):
     email: Mapped[str] = mapped_column(String(120), unique=True, nullable=False)
     password: Mapped[str] = mapped_column(String(500))
     is_active: Mapped[bool]
-    role: Mapped[int] = mapped_column(Integer, nullable=False)
+    # role: Mapped[int] = mapped_column(Integer, nullable=False)
     notes: Mapped["Notes"] = relationship(back_populates="user")
     habits: Mapped["Habits"] = relationship(back_populates="user")
     goals: Mapped["Goals"] = relationship(back_populates="user")
@@ -25,7 +25,7 @@ def serialize(self):
             "name": self.name,
             "email": self.email,
             "is_active": self.is_active,
-            "role": self.role
+            # "role": self.role
         }
 
 class Notes(db.Model):

Diff for: src/api/models.py

@@ -78,7 +78,7 @@ def create_user():
             email=request_body["email"],
             password=hashed_password,
             is_active=True,
-            role=3
+            # role=3
 
         )
 

Diff for: src/api/routes.py

@@ -3,7 +3,7 @@ import { Link, useNavigate } from "react-router-dom";
 import { Thememode } from "./Thememode"
 import logo from "../../img/logoFinal.jpg"
 import { Context } from "../store/appContext";
-
+import "../../styles/navbar.css";
 
 export const Navbar = () => {
 	const { store, actions } = useContext(Context);
@@ -17,7 +17,7 @@ export const Navbar = () => {
 
 	return (
 		<nav className="navbar navbar-light bg-light p-0">
-			<div className="container-fluid margintop d-flex align-items-center">
+			<div className="container-fluid background-color margintop d-flex align-items-center">
 				<Link to="/">
 					<img
 						src={logo}
@@ -27,19 +27,19 @@ export const Navbar = () => {
 					/>
 				</Link>
 
-				<ul className="navbar-nav d-flex flex-row w-75 justify-content-center gap-5 fs-5 textcolors">
+				<ul className="navbar-nav d-flex flex-row w-75 justify-content-center gap-5 fs-5 textcolors ">
 					<li className="nav-item ms-5 me-5 textcolors">
-						{store.auth ? <Link className="nav-link" to="/profile">
+						{store.auth ? <Link className="nav-link " to="/profile">
 							Profile
 						</Link> : null}
 					</li>
-					<li className="nav-item ms-5 me-5 textcolors">
+					<li className="nav-item ms-5 me-5 ">
 						{store.auth ? <Link className="nav-link" to="/notes">
 							Notes
 						</Link> : null}
 					</li>
-					<li className="nav-item ms-5 me-5">
-						{store.auth ? <Link className="nav-link" to="/habit-tracker">
+					<li className="nav-item ms-5 me-5 ">
+						{store.auth ? <Link className="nav-link" to="/habits">
 							Habit-Tracker
 						</Link> : null}
 					</li>
@@ -50,28 +50,28 @@ export const Navbar = () => {
 					</li>
 				</ul>
 
-				<div className="ms-1">
+				<div className="ms-2">
 					{!store.auth && ( // 🔥 Aquí se oculta el botón si el usuario está autenticado
 						<Link to="/login">
-							<button className="me-5 backbutton border rounded text-black p-1 w-100">
+							<button className="me-5 backbutton border rounded text-black p-2 w-100 fs-6">
 								Login
 							</button>
 						</Link>
 					)}
 
 					{store.auth && (<div className="dropdown ">
-						<button className=" me-2 backbutton border rounded text-black p-1 w-100 dropdown-toggle"  aria-expanded="false" type="button" data-bs-toggle="dropdown">
+						<button className=" me-2 backbutton border rounded text-black p-2 w-100 dropdown-toggle"  aria-expanded="false" type="button" data-bs-toggle="dropdown">
 							<i className="fa-solid fa-gear"></i>
 						</button>
-						<ul class="dropdown-menu  dropdown-menu-end">
+						<ul className="dropdown-menu  dropdown-menu-end">
 
-							<li><button className="btn btn-light w-100" type="button">Tema</button></li>
-							<li><button className="btn btn-light w-100" type="button"><Link to="/editprofile">Edit Profile</Link></button></li>
+							<li><button className="btn btn-light w-100 p-2  margintps marbotn" type="button">Theme</button></li>
+							<li><Link to="/editprofile"><button className=" textdecoracion btn btn-light w-100 p-2 " type="button">Edit Profile</button></Link></li>
 							<li><button onClick={() => {
 								localStorage.removeItem("token");
 								actions.verifyToken();
 								navigate("/");
-							}} className="btn btn-light w-100 " type="button">Logout</button></li>
+							}} className="btn btn-light w-100 p-1 marbotn text-danger border-2 border-danger " type="button">Logout</button></li>
 						</ul>
 					</div>)}
 				</div>

Diff for: src/front/js/component/navbar.js

@@ -17,6 +17,8 @@ import { Register } from "./pages/register";
 import { Navbar } from "./component/navbar";
 import { Footer } from "./component/footer";
 import { Pomodoro } from "./component/pomodoro";
+
+
 //create your first component
 const Layout = () => {
     //the basename is used when your project is published in a subdirectory and not in the root of the domain

Diff for: src/front/js/layout.js

@@ -3,8 +3,9 @@
 */
 
 
-.backnavbar{
-    background-color: #EEEEEE;
+html, body {
+  height: 100%;
+  margin: 0px;
 }
 
 .backbutton{

Diff for: src/front/styles/index.css

@@ -0,0 +1,51 @@
+
+
+.textcolors{
+    color: #78A0AF;
+}
+
+.bordernav{
+    color: #78A0AF;
+    opacity: 1;
+}
+
+.margintop{
+    margin-top: -4px;
+}
+
+.marginloginright{
+    margin-right: 255px;
+}
+
+.marginlogintop{
+    
+    margin-top: 115px;
+}
+
+.bordercolor
+    {
+        border-color: #78A0AF;
+    }
+
+.marginresetleft{
+    margin-left: 85px;
+}
+
+.navbar a {
+    font-size: large;
+  }
+
+.marbotn{
+    margin-bottom: -8px;
+}
+
+.margintps
+{
+    margin-top: -10px;
+}
+
+.dropdown-menu a {
+    text-decoration: none !important;
+    color: inherit;
+}
+