From 2d171da5cd9c4a83b5cf53e172c9ab5451f37811 Mon Sep 17 00:00:00 2001
From: Harish <hn00625@surrey.ac.uk>
Date: Tue, 22 Apr 2025 00:05:56 +0100
Subject: [PATCH] Styling updated for Sidebars
---
Startup-app/frontend/package-lock.json | 10 +++
Startup-app/frontend/package.json | 1 +
Startup-app/frontend/src/App.js | 3 +-
.../frontend/src/components/Sidebar.js | 83 +++++++------------
Startup-app/frontend/src/pages/Feed.js | 2 +-
.../frontend/src/pages/UserPortfolio.js | 2 +-
Startup-app/frontend/src/styles/Home.css | 77 ++++++++---------
7 files changed, 83 insertions(+), 95 deletions(-)
diff --git a/Startup-app/frontend/package-lock.json b/Startup-app/frontend/package-lock.json
index 26d887a2..38b8ccd2 100644
--- a/Startup-app/frontend/package-lock.json
+++ b/Startup-app/frontend/package-lock.json
@@ -13,6 +13,7 @@
"@testing-library/react": "^16.2.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.8.4",
+ "lucide-react": "^0.503.0",
"moment": "^2.30.1",
"react": "^18.2.0",
"react-countup": "^6.5.3",
@@ -11476,6 +11477,15 @@
"yallist": "^3.0.2"
}
},
+ "node_modules/lucide-react": {
+ "version": "0.503.0",
+ "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.503.0.tgz",
+ "integrity": "sha512-HGGkdlPWQ0vTF8jJ5TdIqhQXZi6uh3LnNgfZ8MHiuxFfX3RZeA79r2MW2tHAZKlAVfoNE8esm3p+O6VkIvpj6w==",
+ "license": "ISC",
+ "peerDependencies": {
+ "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+ }
+ },
"node_modules/lz-string": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
diff --git a/Startup-app/frontend/package.json b/Startup-app/frontend/package.json
index cdf16b78..a1722fc7 100644
--- a/Startup-app/frontend/package.json
+++ b/Startup-app/frontend/package.json
@@ -8,6 +8,7 @@
"@testing-library/react": "^16.2.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.8.4",
+ "lucide-react": "^0.503.0",
"moment": "^2.30.1",
"react": "^18.2.0",
"react-countup": "^6.5.3",
diff --git a/Startup-app/frontend/src/App.js b/Startup-app/frontend/src/App.js
index 50c3a7a2..d670901f 100644
--- a/Startup-app/frontend/src/App.js
+++ b/Startup-app/frontend/src/App.js
@@ -11,7 +11,7 @@ import DashboardLayout from './components/DashboardLayout';
import UserProfile from './pages/UserProfile';
import LandingPage from './pages/LandingPage';
import ChatPage from './components/ChatPage';
-
+import UserPortfolio from './pages/UserPortfolio';
function App() {
return (
<Router>
@@ -34,6 +34,7 @@ function App() {
<Route path="/my-posts" element={<MyPosts />} />
<Route path="/post-idea" element={<IdeaPostForm />} />
<Route path="/user/:userId" element={<UserProfile />} />
+ <Route path="/user-portfolio" element={<UserPortfolio />} />
</Route>
</Routes>
</div>
diff --git a/Startup-app/frontend/src/components/Sidebar.js b/Startup-app/frontend/src/components/Sidebar.js
index ed6dad49..6d3cb6f0 100644
--- a/Startup-app/frontend/src/components/Sidebar.js
+++ b/Startup-app/frontend/src/components/Sidebar.js
@@ -1,12 +1,13 @@
import { useNavigate, useLocation } from "react-router-dom";
import {
- FaNewspaper,
- FaUsers,
- FaComments,
- FaFileAlt,
- FaUser,
-} from "react-icons/fa";
-import "../styles/Home.css"; // Ensure you import your CSS
+ Newspaper,
+ Users,
+ MessageSquare,
+ FileText,
+ UserRound,
+ PencilLine
+} from "lucide-react";
+import "../styles/Home.css";
const Sidebar = () => {
const navigate = useNavigate();
@@ -14,57 +15,29 @@ const Sidebar = () => {
const isActive = (path) => location.pathname === path;
+ const menuItems = [
+ { label: "Feed", icon: <Newspaper size={26} />, path: "/feed" },
+ { label: "Following", icon: <Users size={26} />, path: "/followers" },
+ { label: "Chat", icon: <MessageSquare size={26} />, path: "/chat" },
+ { label: "My Posts", icon: <FileText size={26} />, path: "/my-posts" },
+ { label: "Post Idea", icon: <PencilLine size={26} />, path: "/post-idea" },
+ { label: "Profile", icon: <UserRound size={26} />, path: "/user-portfolio" },
+ ];
+
return (
<div className="sidebar">
- <div
- className={`icon-card ${isActive("/feed") ? "selected" : ""}`}
- onClick={() => navigate("/feed")}
- >
- <FaNewspaper size={30} />
- <p>Feed</p>
- </div>
-
- <div
- className={`icon-card ${isActive("/followers") ? "selected" : ""}`}
- onClick={() => navigate("/followers")}
- >
- <FaUsers size={30} />
- <p>Following</p>
- </div>
-
- <div
- className={`icon-card ${isActive("/chat") ? "selected" : ""}`}
- onClick={() => navigate("/chat")}
- >
- <FaComments size={30} />
- <p>Chat</p>
- </div>
-
- <div
- className={`icon-card ${isActive("/my-posts") ? "selected" : ""}`}
- onClick={() => navigate("/my-posts")}
- >
- <FaFileAlt size={30} />
- <p>My Posts</p>
- </div>
-
- <div
- className={`icon-card ${isActive("/post-idea") ? "selected" : ""}`}
- onClick={() => navigate("/post-idea")}
- >
- <FaFileAlt size={30} />
- <p>Post Idea</p>
- </div>
-
- <div
- className={`icon-card ${isActive("/user-portfolio") ? "selected" : ""}`}
- onClick={() => navigate("/user-portfolio")}
- >
- <FaUser size={30} />
- <p>Profile</p>
- </div>
+ {menuItems.map((item) => (
+ <div
+ key={item.label}
+ className={`icon-card ${isActive(item.path) ? "selected" : ""}`}
+ onClick={() => navigate(item.path)}
+ >
+ {item.icon}
+ <p>{item.label}</p>
+ </div>
+ ))}
</div>
);
};
-export default Sidebar;
\ No newline at end of file
+export default Sidebar;
diff --git a/Startup-app/frontend/src/pages/Feed.js b/Startup-app/frontend/src/pages/Feed.js
index cebb9a99..4b8e45f7 100644
--- a/Startup-app/frontend/src/pages/Feed.js
+++ b/Startup-app/frontend/src/pages/Feed.js
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
-import { FaThumbsUp, FaDownload, FaTimes } from 'react-icons/fa';
+import { FaThumbsUp, FaTimes } from 'react-icons/fa';
import '../styles/Feed.css';
import MessageBox from '../components/MessageBox';
import IdeaOfTheDay from '../components/IdeaOfTheDay'; // ✅ added
diff --git a/Startup-app/frontend/src/pages/UserPortfolio.js b/Startup-app/frontend/src/pages/UserPortfolio.js
index 429cfbe7..4ae1fc63 100644
--- a/Startup-app/frontend/src/pages/UserPortfolio.js
+++ b/Startup-app/frontend/src/pages/UserPortfolio.js
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import '../styles/UserPortfolio.css';
-import MessageBox from '../components/MessageBox';
+
import PostPopup from '../components/PostPopup';
import { useNavigate } from 'react-router-dom';
diff --git a/Startup-app/frontend/src/styles/Home.css b/Startup-app/frontend/src/styles/Home.css
index d7b04d9b..c7953a03 100644
--- a/Startup-app/frontend/src/styles/Home.css
+++ b/Startup-app/frontend/src/styles/Home.css
@@ -4,76 +4,79 @@
margin-top: 60px; /* equal to header height */
}
+/* Sidebar styles */
.sidebar {
width: 80px;
- background-color: #282c34;
+ background-color: #1f1f1f;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 20px;
gap: 20px;
- position: sticky;
- top: 60px;
- max-height: calc(100vh - 60px);
- overflow-y: auto;
+ position: sticky;
+ top: 60px;
+ max-height: calc(100vh - 60px);
+ overflow-y: auto;
+ box-shadow: 2px 0 6px rgba(0, 0, 0, 0.2);
}
/* Icon card styles */
.icon-card {
- background: #f5f5f5;
- padding: 15px;
- border-radius: 10px;
+ background: #ffffff;
+ padding: 14px 10px;
+ border-radius: 14px;
text-align: center;
cursor: pointer;
- transition: 0.3s;
- background-color: white;
+ transition: all 0.2s ease-in-out;
border: 2px solid transparent;
- width: 60px; /* Set a fixed width for icons */
+ width: 60px;
display: flex;
flex-direction: column;
align-items: center;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
-/* Hover effect for icon cards */
.icon-card:hover {
- background: #ddd;
- border-color: #282c34;
+ transform: scale(1.07);
+ background: #edf2ff;
+ border-color: #6c63ff;
}
/* Icon label styling */
.icon-card p {
- margin-top: 10px;
- font-size: 12px; /* Smaller text size for the labels */
- color: #282c34; /* Change text color to match the sidebar */
- font-weight: 500;
+ margin-top: 8px;
+ font-size: 11.5px;
+ color: #282c34;
+ font-weight: 600;
+ letter-spacing: 0.3px;
+}
+
+/* Highlight active tab */
+.icon-card.selected {
+ background-color: #6c63ff;
+ border-color: #5145cd;
+ box-shadow: 0 4px 10px rgba(108, 99, 255, 0.35);
+ color: white;
+}
+
+.icon-card.selected p {
+ color: white;
+}
+
+.icon-card.selected svg {
+ color: white;
}
/* Main content area */
.main-content {
- margin-left: 100px; /* Leave space for the fixed sidebar */
+ margin-left: 100px;
padding: 20px;
flex-grow: 1;
}
-/* Header text styling */
+/* Header styling */
.home-header {
font-size: 24px;
margin-bottom: 20px;
- color: #282c34; /* Dark color for the header */
+ color: #282c34;
}
-
-
-.icon-card.selected {
- background-color: #b0b0b0; /* Darker grey */
- color: #000;
- border-color: #999;
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
-}
-
-.icon-card.selected p {
- color: #000;
-}
-
-.icon-card.selected svg {
- color: #000;
-}
\ No newline at end of file
--
GitLab