egullickson/motovaultpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: dark / light theme almost complete

Browse Source
This commit is contained in:
Eric Gullickson
2025-12-25 20:32:38 -06:00
parent 1fd77cd757
commit 50baec390f
18 changed files with 380 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
frontend/src/pages/HomePage.tsx
View File

@@ -24,39 +24,45 @@ export const HomePage = () => {
};
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-nero text-avus">
{/* Navigation Bar */}
<nav className="bg-white shadow-md sticky top-0 z-50">
<nav className="sticky top-0 z-50 bg-nero/90 backdrop-blur border-b border-white/10">
<div className="max-w-7xl mx-auto px-4 md:px-8">
<div className="flex justify-between items-center h-16">
{/* Logo */}
<div className="flex-shrink-0">
<h1 className="text-2xl font-bold text-primary-500">MotoVaultPro</h1>
<a href="#home" className="flex items-center">
<img
src="/images/logos/motovaultpro-title-slogan.png"
alt="MotoVaultPro - Precision Vehicle Management"
className="h-8 md:h-10 w-auto"
/>
</a>
</div>
{/* Desktop Menu */}
<div className="hidden md:flex items-center space-x-8">
<a href="#home" className="text-gray-700 hover:text-primary-500 transition-colors">
<a href="#home" className="text-white/75 hover:text-white transition-colors">
Home
</a>
<a
href="#features"
className="text-gray-700 hover:text-primary-500 transition-colors"
className="text-white/75 hover:text-white transition-colors"
>
Features
</a>
<a href="#about" className="text-gray-700 hover:text-primary-500 transition-colors">
<a href="#about" className="text-white/75 hover:text-white transition-colors">
About
</a>
<button
onClick={handleSignup}
className="border-2 border-primary-500 text-primary-500 hover:bg-primary-50 font-semibold py-2 px-6 rounded-lg transition-colors duration-300"
className="border border-primary-500/90 text-primary-500 hover:bg-primary-500/10 hover:border-primary-500 font-semibold py-2 px-6 rounded-lg transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary-500/50"
>
Sign Up
</button>
<button
onClick={handleAuthAction}
className="bg-primary-500 hover:bg-primary-700 text-white font-semibold py-2 px-6 rounded-lg transition-colors duration-300"
className="bg-primary-500 hover:bg-primary-600 text-white font-semibold py-2 px-6 rounded-lg transition-colors duration-300 shadow-lg shadow-black/30 focus:outline-none focus:ring-2 focus:ring-primary-500/50"
>
Login
</button>
@@ -66,7 +72,7 @@ export const HomePage = () => {
<div className="md:hidden">
<button
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
className="text-gray-700 hover:text-primary-500 focus:outline-none"
className="text-white/80 hover:text-white focus:outline-none"
>
<svg
className="h-6 w-6"
@@ -93,35 +99,35 @@ export const HomePage = () => {
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
exit={{ opacity: 0, height: 0 }}
className="md:hidden py-4 space-y-3"
className="md:hidden py-4 space-y-3 bg-nero border-t border-white/10"
>
<a
href="#home"
className="block text-gray-700 hover:text-primary-500 transition-colors py-2"
className="block text-white/75 hover:text-white transition-colors py-2"
>
Home
</a>
<a
href="#features"
className="block text-gray-700 hover:text-primary-500 transition-colors py-2"
className="block text-white/75 hover:text-white transition-colors py-2"
>
Features
</a>
<a
href="#about"
className="block text-gray-700 hover:text-primary-500 transition-colors py-2"
className="block text-white/75 hover:text-white transition-colors py-2"
>
About
</a>
<button
onClick={handleSignup}
className="w-full border-2 border-primary-500 text-primary-500 hover:bg-primary-50 font-semibold py-2 px-6 rounded-lg transition-colors duration-300"
className="w-full border border-primary-500/90 text-primary-500 hover:bg-primary-500/10 font-semibold py-2 px-6 rounded-lg transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary-500/50"
>
Sign Up
</button>
<button
onClick={handleAuthAction}
className="w-full bg-primary-500 hover:bg-primary-700 text-white font-semibold py-2 px-6 rounded-lg transition-colors duration-300"
className="w-full bg-primary-500 hover:bg-primary-600 text-white font-semibold py-2 px-6 rounded-lg transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary-500/50"
>
Login
</button>
@@ -136,28 +142,31 @@ export const HomePage = () => {
</section>
{/* Welcome Section */}
<section className="py-16 px-4 md:px-8 bg-white">
<section className="py-16 px-4 md:px-8 bg-[#1D1A18] border-t border-white/5">
<div className="max-w-4xl mx-auto text-center">
<p className="text-primary-500 text-sm font-semibold uppercase tracking-wide mb-4">
Welcome
</p>
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
Thank you for your interest in MotoVaultPro!
</h2>
<p className="text-lg text-gray-600 leading-relaxed mb-8">
{/* Full Logo */}
<div className="mb-8">
<img
src="/images/logos/motovaultpro-logo-title.png"
alt="MotoVaultPro - Precision Vehicle Management"
className="w-[280px] sm:w-[380px] md:w-[520px] lg:w-[620px] max-w-[90vw] h-auto mx-auto"
loading="eager"
/>
</div>
<p className="text-lg text-titanio leading-relaxed mb-8">
We are pleased to provide comprehensive vehicle management solutions including Vehicle
Tracking, Fuel Log Management, Maintenance Records, Document Storage, Service Station
Locations, and detailed Analytics for all your vehicles. A combination of these features
can create a perfect management system for your fleet. Based on your specific needs, our
platform will help you determine the best approach to managing your vehicles.
</p>
<p className="text-lg text-gray-600 leading-relaxed mb-8">
<p className="text-lg text-titanio leading-relaxed mb-8">
Do not hesitate to reach out for assistance in creating a custom workflow that best fits
your needs.
</p>
<button
onClick={handleAuthAction}
className="bg-primary-500 hover:bg-primary-700 text-white font-semibold py-3 px-8 rounded-lg transition-colors duration-300"
className="bg-primary-500 hover:bg-primary-600 text-white font-semibold py-3 px-8 rounded-lg transition-colors duration-300 shadow-lg shadow-black/30 focus:outline-none focus:ring-2 focus:ring-primary-500/50"
>
Get Started
</button>
@@ -165,30 +174,30 @@ export const HomePage = () => {
</section>
{/* About Section */}
<section id="about" className="py-16 px-4 md:px-8 bg-gray-100">
<section id="about" className="py-16 px-4 md:px-8 bg-nero border-t border-white/5">
<div className="max-w-6xl mx-auto">
<div className="grid md:grid-cols-2 gap-12 items-center">
<div>
<h3 className="text-sm font-semibold text-primary-500 uppercase tracking-wide mb-4">
About Us
</h3>
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
<h2 className="text-3xl md:text-4xl font-bold text-avus mb-6">
Overall, our goal is to meet each individual&apos;s needs with quality, passion, and
professionalism.
</h2>
<p className="text-lg text-gray-600 leading-relaxed mb-6">
<p className="text-lg text-titanio leading-relaxed mb-6">
Most importantly, we treat each and every vehicle as if it were our own and strive to
achieve perfection in vehicle management. If you are unsure of what you need for your
vehicles, we are happy to help talk you through the best options for comprehensive
tracking.
</p>
<p className="text-lg text-gray-600 leading-relaxed">
<p className="text-lg text-titanio leading-relaxed">
We are proud to use the finest technology and best practices to provide quality and
satisfaction for our users.
</p>
</div>
<div className="flex justify-center">
<div className="w-64 h-64 bg-primary-500 rounded-lg flex items-center justify-center">
<div className="w-64 h-64 bg-primary-500 rounded-lg border border-white/10 flex items-center justify-center shadow-lg shadow-black/30">
<div className="text-center text-white p-8">
<svg
className="w-32 h-32 mx-auto mb-4"
@@ -217,14 +226,14 @@ export const HomePage = () => {
</section>
{/* Bottom CTA */}
<section className="py-16 px-4 md:px-8 bg-primary-500 text-white">
<section className="py-16 px-4 md:px-8 bg-gradient-to-r from-primary-700 via-primary-500 to-primary-700 text-white border-t border-white/10">
<div className="max-w-4xl mx-auto text-center">
<h2 className="text-2xl md:text-3xl font-bold mb-6">
We are a cloud-based platform accessible anywhere, anytime.
</h2>
<button
onClick={handleAuthAction}
className="bg-white text-primary-500 hover:bg-gray-100 font-semibold py-3 px-8 rounded-lg transition-colors duration-300"
className="bg-white/95 text-primary-500 hover:bg-white font-semibold py-3 px-8 rounded-lg transition-colors duration-300 shadow-lg shadow-black/30 focus:outline-none focus:ring-2 focus:ring-white/50"
>
Get Started
</button>
@@ -232,9 +241,9 @@ export const HomePage = () => {
</section>
{/* Footer */}
<footer className="bg-gray-900 text-white py-8 px-4 md:px-8">
<footer className="bg-black text-white py-8 px-4 md:px-8 border-t border-white/10">
<div className="max-w-7xl mx-auto text-center">
<p className="text-gray-400">
<p className="text-white/50">
&copy; {new Date().getFullYear()} MotoVaultPro. All rights reserved.
</p>
</div>

8
frontend/src/pages/HomePage/FeatureCard.tsx
View File

@@ -17,7 +17,7 @@ export const FeatureCard = ({ title, description, imageSrc, imageAlt }: FeatureC
transition={{ duration: 0.5 }}
whileHover={{ y: -5 }}
>
<div className="overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
<div className="overflow-hidden rounded-lg bg-white/5 border border-white/10 shadow-lg shadow-black/30 hover:border-white/20 hover:shadow-xl hover:shadow-black/40 transition-all duration-300">
<div className="relative h-56 overflow-hidden">
<img
src={imageSrc}
@@ -25,9 +25,9 @@ export const FeatureCard = ({ title, description, imageSrc, imageAlt }: FeatureC
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
/>
</div>
<div className="bg-white p-6">
<h3 className="text-xl font-bold text-gray-900 mb-2">{title}</h3>
<p className="text-gray-600 leading-relaxed">{description}</p>
<div className="p-6">
<h3 className="text-xl font-bold text-avus mb-2">{title}</h3>
<p className="text-titanio leading-relaxed">{description}</p>
</div>
</div>
</motion.div>

6
frontend/src/pages/HomePage/FeaturesGrid.tsx
View File

@@ -53,13 +53,13 @@ const features = [
export const FeaturesGrid = () => {
return (
<section className="py-16 px-4 md:px-8 bg-gray-50">
<section className="py-16 px-4 md:px-8 bg-[#1D1A18] border-t border-white/5">
<div className="max-w-7xl mx-auto">
<div className="text-center mb-12">
<p className="text-primary-500 text-sm font-semibold uppercase tracking-wide mb-2">
Our Features
</p>
<h2 className="text-3xl md:text-4xl font-bold text-gray-900">What We Offer</h2>
<h2 className="text-3xl md:text-4xl font-bold text-avus">What We Offer</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
@@ -69,7 +69,7 @@ export const FeaturesGrid = () => {
</div>
<div className="text-center mt-12">
<p className="text-lg text-gray-600 mb-6">
<p className="text-lg text-titanio mb-6">
We are a cloud-based platform accessible anywhere, anytime.
</p>
</div>

15
frontend/src/pages/HomePage/HeroCarousel.tsx
View File

@@ -71,17 +71,6 @@ export const HeroCarousel = () => {
className="w-full h-full object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/40 to-black/60" />
<div className="absolute inset-0 flex flex-col items-center justify-center text-center px-4">
<p className="text-white text-sm md:text-base font-semibold uppercase tracking-widest mb-4">
Welcome to
</p>
<h1 className="text-white text-4xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
MOTOVAULTPRO
</h1>
<button className="bg-primary-500 hover:bg-primary-700 text-white font-semibold py-3 px-8 rounded-lg transition-colors duration-300">
Learn More
</button>
</div>
</div>
</div>
))}
@@ -121,12 +110,12 @@ export const HeroCarousel = () => {
.hero-carousel .slick-prev:before,
.hero-carousel .slick-next:before {
font-size: 50px;
opacity: 0.75;
opacity: 0.6;
}
.hero-carousel .slick-prev:hover:before,
.hero-carousel .slick-next:hover:before {
opacity: 1;
opacity: 0.9;
}
`}</style>
</div>

5
frontend/src/pages/SettingsPage.tsx
View File

@@ -8,6 +8,7 @@ import { useNavigate } from 'react-router-dom';
import { useUnits } from '../core/units/UnitsContext';
import { useAdminAccess } from '../core/auth/useAdminAccess';
import { useProfile, useUpdateProfile } from '../features/settings/hooks/useProfile';
import { useTheme } from '../shared-minimal/theme/ThemeContext';
import { DeleteAccountDialog } from '../features/settings/components/DeleteAccountDialog';
import { PendingDeletionBanner } from '../features/settings/components/PendingDeletionBanner';
import {
@@ -44,9 +45,9 @@ export const SettingsPage: React.FC = () => {
const navigate = useNavigate();
const { unitSystem, setUnitSystem } = useUnits();
const { isAdmin, loading: adminLoading } = useAdminAccess();
const { isDarkMode, setDarkMode } = useTheme();
const [notifications, setNotifications] = useState(true);
const [emailUpdates, setEmailUpdates] = useState(false);
const [darkMode, setDarkMode] = useState(false);
// Profile state
const { data: profile, isLoading: profileLoading } = useProfile();
@@ -314,7 +315,7 @@ export const SettingsPage: React.FC = () => {
/>
<ListItemSecondaryAction>
<Switch
checked={darkMode}
checked={isDarkMode}
onChange={(e) => setDarkMode(e.target.checked)}
color="primary"
/>