ShanmugaKrishnanSM/RIT-nexus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): remove top header login button, fix mobile viewport cropping, update footer CTA to slate gray

Browse Source
This commit is contained in:
Shanmuga Krishnan S M
2026-08-13 14:52:44 +05:30
parent bede7ca962
commit 052fd76a99
4 changed files with 52 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Footer/Footer.tsx
View File

@@ -16,24 +16,24 @@ const quickLinks = [
export default function Footer() { export default function Footer() {
return ( return (
<footer className="bg-[#0F172A] text-white border-t border-slate-800"> <footer className="bg-[#0F172A] text-white border-t border-slate-800">
{/* CTA Banner - Enterprise Deep Indigo */} {/* CTA Banner - Professional Dark Slate Gray */}
<div className="bg-gradient-to-r from-indigo-700 via-indigo-800 to-purple-900 py-12 border-b border-indigo-500/20"> <div className="bg-slate-800 border-b border-slate-700/60 py-10">
<div className="container-custom flex flex-col md:flex-row items-center justify-between gap-6 px-4"> <div className="container-custom flex flex-col md:flex-row items-center justify-between gap-6 px-4">
<div> <div>
<h3 className="text-2xl font-bold text-white" style={{ fontFamily: 'Playfair Display, serif' }}> <h3 className="text-2xl font-bold text-white" style={{ fontFamily: 'Playfair Display, serif' }}>
Ready to explore RIT? Ready to explore RIT?
</h3> </h3>
<p className="text-indigo-100/90 mt-1 text-sm" style={{ fontFamily: 'Inter, sans-serif' }}> <p className="text-slate-300 mt-1 text-sm" style={{ fontFamily: 'Inter, sans-serif' }}>
Everything a fresher needs — all in one place. Everything a fresher needs — all in one place.
</p> </p>
</div> </div>
<Link <Link
to="/ai-assistant" to="/ai-assistant"
className="flex items-center gap-2 bg-white hover:bg-slate-100 text-indigo-950 px-6 py-3 rounded-xl font-bold transition-all shadow-md hover:scale-105" className="flex items-center gap-2 bg-slate-100 hover:bg-white text-slate-900 px-6 py-3 rounded-xl font-bold transition-all shadow-sm border border-slate-200 hover:scale-105"
style={{ fontFamily: 'Poppins, sans-serif' }} style={{ fontFamily: 'Poppins, sans-serif' }}
> >
<span>Ask Chatbot</span> <span>Ask Chatbot</span>
<ArrowRight className="w-4 h-4 text-indigo-700" /> <ArrowRight className="w-4 h-4 text-slate-700" />
</Link> </Link>
</div> </div>
</div> </div>

38
src/components/Header/Header.tsx
View File

@@ -5,8 +5,6 @@ import {
Bell, Bell,
Menu, Menu,
Calendar, Calendar,
LogIn,
Check,
X, X,
BookOpen, BookOpen,
Bus, Bus,
@@ -15,8 +13,6 @@ import {
Code2, Code2,
Trophy, Trophy,
Bot, Bot,
Rocket,
ChevronRight
} from 'lucide-react'; } from 'lucide-react';
import { useAuth } from '@/context/AuthContext'; import { useAuth } from '@/context/AuthContext';
import { BUS_ROUTES, FACULTY_DATA, CLUBS_DATA } from '@/constants'; import { BUS_ROUTES, FACULTY_DATA, CLUBS_DATA } from '@/constants';
@@ -40,7 +36,7 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
const [isNotifOpen, setIsNotifOpen] = useState(false); const [isNotifOpen, setIsNotifOpen] = useState(false);
const [currentDate, setCurrentDate] = useState(''); const [currentDate, setCurrentDate] = useState('');
const navigate = useNavigate(); const navigate = useNavigate();
const { user, isAuthenticated, isVerifiedStudent, loginWithGoogle } = useAuth(); const { user, isAuthenticated, isVerifiedStudent } = useAuth();
const notifRef = useRef<HTMLDivElement>(null); const notifRef = useRef<HTMLDivElement>(null);
const searchRef = useRef<HTMLDivElement>(null); const searchRef = useRef<HTMLDivElement>(null);
@@ -180,24 +176,24 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
}; };
return ( return (
<header className="sticky top-0 z-30 w-full bg-white/90 backdrop-blur-md border-b border-slate-200/80 px-4 lg:px-8 py-3 flex items-center justify-between shadow-xs"> <header className="sticky top-0 z-30 w-full bg-white/90 backdrop-blur-md border-b border-slate-200/80 px-3 sm:px-4 lg:px-8 py-3 flex items-center justify-between shadow-xs">
<div className="flex items-center gap-4"> <div className="flex items-center gap-2.5 sm:gap-4 min-w-0 flex-1">
{/* Mobile Toggle */} {/* Mobile Toggle */}
<button <button
onClick={onToggleSidebar} onClick={onToggleSidebar}
className="lg:hidden p-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 transition-colors cursor-pointer" className="lg:hidden p-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 transition-colors cursor-pointer shrink-0"
title="Toggle Navigation Menu" title="Toggle Navigation Menu"
> >
<Menu className="w-5 h-5" /> <Menu className="w-5 h-5" />
</button> </button>
{/* Global Interactive Search Input Container */} {/* Global Interactive Search Input Container */}
<div className="relative" ref={searchRef}> <div className="relative min-w-0 flex-1 max-w-[210px] xs:max-w-[260px] sm:max-w-xs md:max-w-md" ref={searchRef}>
<div <div
onClick={() => setIsSearchOpen(true)} onClick={() => setIsSearchOpen(true)}
className="relative w-64 sm:w-80 md:w-96 cursor-text" className="relative w-full cursor-text"
> >
<Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" /> <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
<input <input
type="text" type="text"
value={searchQuery} value={searchQuery}
@@ -206,8 +202,8 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
setIsSearchOpen(true); setIsSearchOpen(true);
}} }}
onFocus={() => setIsSearchOpen(true)} onFocus={() => setIsSearchOpen(true)}
placeholder="Search notes, faculty, bus routes, clubs..." placeholder="Search notes, faculty, bus routes..."
className="w-full pl-10 pr-12 py-2 text-xs font-medium bg-slate-100/90 hover:bg-slate-100 focus:bg-white border border-transparent focus:border-indigo-500/40 rounded-xl text-slate-800 placeholder-slate-400 outline-none transition-all shadow-inner" className="w-full pl-9 pr-8 sm:pr-12 py-2 text-xs font-medium bg-slate-100/90 hover:bg-slate-100 focus:bg-white border border-transparent focus:border-indigo-500/40 rounded-xl text-slate-800 placeholder-slate-400 outline-none transition-all shadow-inner truncate"
style={{ fontFamily: 'Inter, sans-serif' }} style={{ fontFamily: 'Inter, sans-serif' }}
/> />
<span className="hidden sm:inline-flex absolute right-3 top-1/2 -translate-y-1/2 text-[10px] font-semibold text-slate-400 bg-white border border-slate-200 px-1.5 py-0.5 rounded-md shadow-2xs"> <span className="hidden sm:inline-flex absolute right-3 top-1/2 -translate-y-1/2 text-[10px] font-semibold text-slate-400 bg-white border border-slate-200 px-1.5 py-0.5 rounded-md shadow-2xs">
@@ -291,7 +287,7 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
</div> </div>
{/* Right Header Status Bar */} {/* Right Header Status Bar */}
<div className="flex items-center gap-3"> <div className="flex items-center gap-2 sm:gap-3 shrink-0">
{/* Date Display Badge */} {/* Date Display Badge */}
<div className="hidden md:flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-slate-100 text-slate-600 text-xs font-medium border border-slate-200/60"> <div className="hidden md:flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-slate-100 text-slate-600 text-xs font-medium border border-slate-200/60">
<Calendar className="w-3.5 h-3.5 text-indigo-600" /> <Calendar className="w-3.5 h-3.5 text-indigo-600" />
@@ -376,8 +372,8 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
)} )}
</div> </div>
{/* User Auth Quick Badge */} {/* User Auth Quick Badge (If Logged In) */}
{isAuthenticated && user ? ( {isAuthenticated && user && (
<div className="flex items-center gap-2 pl-2 border-l border-slate-200"> <div className="flex items-center gap-2 pl-2 border-l border-slate-200">
{user.pictureUrl ? ( {user.pictureUrl ? (
<img <img
@@ -400,17 +396,9 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
</span> </span>
</div> </div>
</div> </div>
) : (
<button
onClick={loginWithGoogle}
className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold shadow-sm transition-all cursor-pointer"
style={{ fontFamily: 'Poppins, sans-serif' }}
>
<LogIn className="w-3.5 h-3.5" />
<span>Sign In</span>
</button>
)} )}
</div> </div>
</header> </header>
); );
} }

56
src/index.css
View File

@@ -3,20 +3,20 @@
@import "tailwindcss"; @import "tailwindcss";
@theme { @theme {
--color-primary: #F97316; --color-primary: #6366F1;
--color-primary-light: #FB923C; --color-primary-light: #818CF8;
--color-primary-dark: #EA580C; --color-primary-dark: #4F46E5;
--color-primary-50: #FFF7ED; --color-primary-50: #EEF2FF;
--color-primary-100: #FFEDD5; --color-primary-100: #E0E7FF;
--color-primary-200: #FED7AA; --color-primary-200: #C7D2FE;
--color-secondary: #FB923C; --color-secondary: #818CF8;
--color-background: #FAFAFA; --color-background: #FAFAFA;
--color-surface: #FFFFFF; --color-surface: #FFFFFF;
--color-border: #E5E7EB; --color-border: #E5E7EB;
--color-heading: #1E293B; --color-heading: #1E293B;
--color-body: #475569; --color-body: #475569;
--color-muted: #94A3B8; --color-muted: #94A3B8;
--color-accent: #FFF7ED; --color-accent: #EEF2FF;
--font-heading: 'Playfair Display', Georgia, serif; --font-heading: 'Playfair Display', Georgia, serif;
--font-body: 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif;
@@ -33,19 +33,24 @@
--shadow-soft: 0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04); --shadow-soft: 0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04);
--shadow-medium: 0 4px 25px -5px rgba(0,0,0,0.1), 0 10px 30px -5px rgba(0,0,0,0.07); --shadow-medium: 0 4px 25px -5px rgba(0,0,0,0.1), 0 10px 30px -5px rgba(0,0,0,0.07);
--shadow-strong: 0 8px 40px -8px rgba(0,0,0,0.15), 0 20px 45px -8px rgba(0,0,0,0.1); --shadow-strong: 0 8px 40px -8px rgba(0,0,0,0.15), 0 20px 45px -8px rgba(0,0,0,0.1);
--shadow-orange: 0 8px 30px -4px rgba(249,115,22,0.3);
--color-brand-orange: #ff5722;
--color-brand-pink: #e91e63;
--color-brand-purple: #9c27b0;
--animate-pulse-slow: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; --animate-pulse-slow: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
} }
/* Tailwind Preflight handles resets natively. Custom modifications go here: */ /* Tailwind Preflight handles resets natively. Custom modifications go here: */
html { html, body {
scroll-behavior: smooth; scroll-behavior: smooth;
font-size: 16px; font-size: 16px;
width: 100%;
max-width: 100vw;
overflow-x: hidden;
}
#root {
width: 100%;
max-width: 100vw;
overflow-x: hidden;
} }
body { body {
@@ -65,29 +70,28 @@ body {
background: #f1f1f1; background: #f1f1f1;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: #F97316; background: #6366F1;
border-radius: 3px; border-radius: 3px;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: #EA580C; background: #4F46E5;
} }
/* Selection */ /* Selection */
::selection { ::selection {
background-color: rgba(249, 115, 22, 0.2); background-color: rgba(99, 102, 241, 0.2);
color: #1E293B; color: #1E293B;
} }
/* Typography base */ /* Typography base */
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading); font-family: var(--font-heading);
color: #1E293B;
line-height: 1.2; line-height: 1.2;
} }
/* Focus ring */ /* Focus ring */
:focus-visible { :focus-visible {
outline: 2px solid #F97316; outline: 2px solid #6366F1;
outline-offset: 2px; outline-offset: 2px;
} }
@@ -178,16 +182,16 @@ h1, h2, h3, h4, h5, h6 {
/* Gradient text */ /* Gradient text */
.gradient-text { .gradient-text {
background: linear-gradient(135deg, #F97316, #FB923C, #FBBF24); background: linear-gradient(135deg, #4F46E5, #6366F1, #8B5CF6);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;
} }
/* Orange button */ /* Primary button */
.btn-primary { .btn-primary {
font-family: var(--font-button); font-family: var(--font-button);
background: linear-gradient(135deg, #F97316, #FB923C); background: linear-gradient(135deg, #4F46E5, #6366F1);
color: white; color: white;
border: none; border: none;
border-radius: 12px; border-radius: 12px;
@@ -196,7 +200,7 @@ h1, h2, h3, h4, h5, h6 {
font-size: 15px; font-size: 15px;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3); box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
@@ -205,8 +209,8 @@ h1, h2, h3, h4, h5, h6 {
.btn-primary:hover { .btn-primary:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(249, 115, 22, 0.4); box-shadow: 0 8px 25px rgba(79, 70, 229, 0.4);
background: linear-gradient(135deg, #EA580C, #F97316); background: linear-gradient(135deg, #4338CA, #4F46E5);
} }
.btn-primary:active { .btn-primary:active {
@@ -232,8 +236,8 @@ h1, h2, h3, h4, h5, h6 {
} }
.btn-ghost:hover { .btn-ghost:hover {
border-color: #F97316; border-color: #6366F1;
color: #F97316; color: #6366F1;
transform: translateY(-2px); transform: translateY(-2px);
} }

8
src/layouts/MainLayout.tsx
View File

@@ -28,7 +28,7 @@ export default function MainLayout() {
}; };
return ( return (
<div className="min-h-screen bg-[#F8FAFC] flex flex-col lg:flex-row font-sans selection:bg-purple-700 selection:text-white"> <div className="min-h-screen w-full max-w-full bg-[#F8FAFC] flex flex-col lg:flex-row font-sans selection:bg-purple-700 selection:text-white overflow-x-hidden">
{/* Left Sidebar Navigation */} {/* Left Sidebar Navigation */}
<Sidebar <Sidebar
isOpen={isSidebarOpen} isOpen={isSidebarOpen}
@@ -39,7 +39,7 @@ export default function MainLayout() {
{/* Main Right Viewport Wrapper */} {/* Main Right Viewport Wrapper */}
<div <div
className={`flex-1 flex flex-col min-w-0 transition-all duration-300 ${ className={`flex-1 flex flex-col min-w-0 w-full transition-all duration-300 ${
isSidebarCollapsed ? 'lg:pl-20' : 'lg:pl-64 xl:pl-72' isSidebarCollapsed ? 'lg:pl-20' : 'lg:pl-64 xl:pl-72'
}`} }`}
> >
@@ -47,7 +47,7 @@ export default function MainLayout() {
<Header onToggleSidebar={toggleSidebar} /> <Header onToggleSidebar={toggleSidebar} />
{/* Dynamic Page Content */} {/* Dynamic Page Content */}
<div className="flex-1 p-4 sm:p-6 lg:p-8"> <div className="flex-1 p-3 sm:p-6 lg:p-8 w-full max-w-full overflow-x-hidden">
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
<motion.main <motion.main
key={location.pathname} key={location.pathname}
@@ -56,7 +56,7 @@ export default function MainLayout() {
animate="enter" animate="enter"
exit="exit" exit="exit"
transition={{ duration: 0.25, ease: 'easeInOut' }} transition={{ duration: 0.25, ease: 'easeInOut' }}
className="max-w-7xl mx-auto" className="max-w-7xl mx-auto w-full"
> >
<Outlet /> <Outlet />
</motion.main> </motion.main>