Skip to content

Commit c0220ef

Browse files
abhinav-1305abhinav-1305
authored
chore: UI cleanups (#11)
Signed-off-by: Abhinav Kumar <abhinavkumar130503@gmail.com>
1 parent 959382d commit c0220ef

7 files changed

Lines changed: 120 additions & 46 deletions

File tree

‎src/App.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,28 @@ import { products } from "./data/productCardData";
44
const App = () => {
55

66
return (
7-
<div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-50">
7+
<div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-50 dark:from-gray-900 dark:via-gray-900 dark:to-gray-800">
88
<div className="pt-16 pb-16 px-6">
99
<div className="max-w-7xl mx-auto text-center">
10-
<div className="inline-flex items-center bg-blue-50 text-blue-700 px-4 py-2 rounded-full text-sm font-medium mb-8">
11-
<span className="w-2 h-2 bg-blue-400 rounded-full mr-2"></span>
10+
<div className="inline-flex items-center bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 px-4 py-2 rounded-full text-sm font-medium mb-8">
11+
<span className="w-2 h-2 bg-blue-400 dark:bg-blue-500 rounded-full mr-2"></span>
1212
Product Demo Platform
1313
</div>
1414

15-
<h1 className="text-5xl md:text-6xl font-bold text-gray-900 mb-8 leading-tight">
15+
<h1 className="text-5xl md:text-6xl font-bold text-gray-900 dark:text-white mb-8 leading-tight">
1616
Welcome to the Mifos
1717
<br />
18-
<span className="bg-gradient-to-r from-blue-600 to-blue-500 bg-clip-text text-transparent">
18+
<span className="bg-gradient-to-r from-blue-600 to-blue-500 dark:from-blue-400 dark:to-blue-300 bg-clip-text text-transparent">
1919
Product Demo Explorer
2020
</span>
21+
<div className="flex justify-center mt-0.5">
22+
<svg height="16" width="180" viewBox="0 0 180 16" fill="none" xmlns="http://www.w3.org/2000/svg">
23+
<path d="M2 8 Q 30 16, 60 8 T 120 8 T 178 8" stroke="#60a5fa" strokeWidth="3" fill="none" opacity="0.5" strokeLinecap="round"/>
24+
</svg>
25+
</div>
2126
</h1>
2227

23-
<p className="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed font-light">
28+
<p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed font-light">
2429
Experience interactive demonstrations of our products — MifosX, Phee, and VNext.
2530
Explore comprehensive step-by-step guides designed to showcase the full potential of our financial technology solutions.
2631
</p>

‎src/components/Cards/product-card.tsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -15,47 +15,47 @@ export const ProductCard: React.FC<ProductCardProps> = ({
1515
onDemoClick = () => console.log('Demo clicked')
1616
}) => {
1717
return (
18-
<div className="bg-white rounded-xl overflow-hidden w-80 border border-gray-200 transition-all duration-300 hover:shadow-xl hover:shadow-blue-200 hover:-translate-y-0.15">
19-
<div className="bg-blue-50 px-6 py-4">
18+
<div className="bg-white dark:bg-gray-800 rounded-xl overflow-hidden w-80 border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-xl hover:shadow-blue-200 dark:hover:shadow-blue-900/30 hover:-translate-y-0.15">
19+
<div className="bg-blue-50 dark:bg-blue-900/30 px-6 py-4">
2020
<div className="flex items-center">
21-
<div className="w-8 h-8 bg-blue-200 rounded-lg flex items-center justify-center mr-3">
22-
<span className="text-blue-700 font-semibold text-sm">A</span>
21+
<div className="w-8 h-8 bg-blue-200 dark:bg-blue-800 rounded-lg flex items-center justify-center mr-3">
22+
<span className="text-blue-700 dark:text-blue-300 font-semibold text-sm">A</span>
2323
</div>
24-
<h3 className="text-lg font-semibold text-gray-800">{title}</h3>
24+
<h3 className="text-lg font-semibold text-gray-800 dark:text-white">{title}</h3>
2525
</div>
2626
</div>
2727

28-
<div className="bg-blue-50 px-6 pb-8">
28+
<div className="bg-blue-50 dark:bg-blue-900/30 px-6 pb-8">
2929
<div className="flex justify-center items-center space-x-4">
30-
<div className="w-0 h-0 border-l-[20px] border-r-[20px] border-b-[24px] border-l-transparent border-r-transparent border-b-gray-400"></div>
30+
<div className="w-0 h-0 border-l-[20px] border-r-[20px] border-b-[24px] border-l-transparent border-r-transparent border-b-gray-400 dark:border-b-gray-600"></div>
3131

3232
<div className="relative">
33-
<div className="w-8 h-8 bg-gray-400 rounded-sm relative">
34-
<div className="absolute -top-1 left-1/2 transform -translate-x-1/2 w-2 h-2 bg-gray-400"></div>
35-
<div className="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-2 h-2 bg-gray-400"></div>
36-
<div className="absolute -left-1 top-1/2 transform -translate-y-1/2 w-2 h-2 bg-gray-400"></div>
37-
<div className="absolute -right-1 top-1/2 transform -translate-y-1/2 w-2 h-2 bg-gray-400"></div>
38-
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-3 h-3 bg-blue-50 rounded-full"></div>
33+
<div className="w-8 h-8 bg-gray-400 dark:bg-gray-600 rounded-sm relative">
34+
<div className="absolute -top-1 left-1/2 transform -translate-x-1/2 w-2 h-2 bg-gray-400 dark:bg-gray-600"></div>
35+
<div className="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-2 h-2 bg-gray-400 dark:bg-gray-600"></div>
36+
<div className="absolute -left-1 top-1/2 transform -translate-y-1/2 w-2 h-2 bg-gray-400 dark:bg-gray-600"></div>
37+
<div className="absolute -right-1 top-1/2 transform -translate-y-1/2 w-2 h-2 bg-gray-400 dark:bg-gray-600"></div>
38+
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-3 h-3 bg-blue-50 dark:bg-blue-900/30 rounded-full"></div>
3939
</div>
4040
</div>
4141

42-
<div className="w-8 h-10 bg-gray-400 rounded-sm"></div>
42+
<div className="w-8 h-10 bg-gray-400 dark:bg-gray-600 rounded-sm"></div>
4343
</div>
4444
</div>
4545

46-
<div className="px-6 py-6 bg-white">
46+
<div className="p-6">
4747
<div className="mb-4">
48-
<h4 className="text-base font-semibold text-gray-900 mb-1">About</h4>
48+
<h4 className="text-base font-semibold text-gray-900 dark:text-white mb-1">About</h4>
4949
</div>
5050

51-
<p className="text-sm text-gray-700 leading-relaxed mb-6">
51+
<p className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
5252
{description}
5353
</p>
5454

5555
<div className="flex justify-end">
5656
<Button
5757
onClick={onDemoClick}
58-
className="bg-blue-400 hover:bg-blue-500 text-white text-sm px-6 py-2.5 rounded-full font-medium transition-colors duration-200 shadow-sm hover:shadow-md cursor-pointer"
58+
className="bg-blue-400 hover:bg-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700 text-white text-sm px-6 py-2.5 rounded-full font-medium transition-colors duration-200 shadow-sm hover:shadow-md cursor-pointer"
5959
>
6060
Demo
6161
</Button>

‎src/components/Navigation/SideNav.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { Home } from "lucide-react";
22

33
export const SideNav = () => {
44
return (
5-
<div className="h-screen w-14 bg-white flex flex-col items-center border-r-2 border-gray-200">
6-
<div className="logo h-16 w-full flex items-center justify-center border-b-2 border-gray-200">
5+
<div className="h-screen w-14 bg-white dark:bg-gray-900 flex flex-col items-center border-r-2 border-gray-200 dark:border-gray-700">
6+
<div className="logo h-14 w-full flex items-center justify-center border-b-2 border-gray-200 dark:border-gray-700">
77
<div className="p-1 rounded-full">
88
<img
99
src="/gazelle.svg"
@@ -15,7 +15,7 @@ export const SideNav = () => {
1515
</div>
1616
</div>
1717
<div className="w-16 flex flex-1 justify-center pt-4">
18-
<Home size={30} className="cursor-pointer" />
18+
<Home size={30} className="cursor-pointer text-gray-700 dark:text-gray-300" />
1919
</div>
2020
</div>
2121
);

‎src/components/Navigation/TopNav.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
1-
import { SunIcon } from "lucide-react";
1+
import { MoonIcon, SunIcon } from "lucide-react";
2+
import { useTheme } from "../../context/ThemeContext";
23

34
export const TopNav = ({ title }: { title: string }) => {
5+
const { theme, toggleTheme } = useTheme();
6+
47
return (
5-
<div className="h-14 w-full flex items-center justify-between border-b-2 border-[#1579EB] px-4">
8+
<div className="h-14 w-full flex items-center justify-between px-4">
69
<div className="text-white text-xl font-semibold text-center">
710
{title}
811
</div>
9-
<SunIcon className="text-white cursor-pointer" />
12+
<button onClick={toggleTheme} className="text-white cursor-pointer">
13+
{theme === 'light' ? <MoonIcon /> : <SunIcon />}
14+
</button>
1015
</div>
1116
);
1217
};

‎src/context/ThemeContext.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { createContext, useContext, useEffect, useState } from 'react';
2+
3+
type Theme = 'light' | 'dark';
4+
5+
interface ThemeContextType {
6+
theme: Theme;
7+
toggleTheme: () => void;
8+
}
9+
10+
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
11+
12+
export function ThemeProvider({ children }: { children: React.ReactNode }) {
13+
const [theme, setTheme] = useState<Theme>(() => {
14+
const savedTheme = localStorage.getItem('theme');
15+
return (savedTheme as Theme) || 'light';
16+
});
17+
18+
useEffect(() => {
19+
localStorage.setItem('theme', theme);
20+
document.documentElement.classList.toggle('dark', theme === 'dark');
21+
}, [theme]);
22+
23+
const toggleTheme = () => {
24+
setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
25+
};
26+
27+
return (
28+
<ThemeContext.Provider value={{ theme, toggleTheme }}>
29+
{children}
30+
</ThemeContext.Provider>
31+
);
32+
}
33+
34+
export function useTheme() {
35+
const context = useContext(ThemeContext);
36+
if (context === undefined) {
37+
throw new Error('useTheme must be used within a ThemeProvider');
38+
}
39+
return context;
40+
}

‎src/main.tsx‎

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,38 @@ import "./index.css";
44
import App from "./App.tsx";
55
import { SideNav } from "./components/Navigation/SideNav.tsx";
66
import { TopNav } from "./components/Navigation/TopNav.tsx";
7+
import { ThemeProvider } from "./context/ThemeContext";
78

89
createRoot(document.getElementById("root")!).render(
910
<StrictMode>
10-
<div className="h-screen w-screen overflow-hidden">
11-
<div className="fixed top-0 left-14 right-0 h-14 bg-[#1579EB] z-10">
12-
<TopNav title="Mifos Product Demo" />
13-
</div>
14-
<div className="fixed top-0 left-0 w-14 h-screen bg-white z-10">
15-
<SideNav />
16-
</div>
17-
<div className="ml-14 mt-16 h-[calc(100vh-3.5rem)] overflow-auto">
18-
<App />
19-
<div className="border-t border-gray-200 bg-white py-12 px-6">
20-
<div className="max-w-7xl mx-auto text-center">
21-
<p className="text-gray-500 text-sm">
22-
Discover the power of open-source financial technology solutions
23-
</p>
11+
<ThemeProvider>
12+
<div className="h-screen w-screen overflow-hidden bg-[#1579EB] dark:bg-gray-900">
13+
<div className="fixed top-0 left-14 right-0 h-14 bg-[#1579EB] z-10">
14+
<TopNav title="Mifos Product Demo" />
15+
</div>
16+
<div className="fixed top-0 left-0 w-14 h-screen bg-white dark:bg-gray-900 z-10">
17+
<SideNav />
18+
</div>
19+
<div className="ml-14 mt-14 h-[calc(100vh-3.5rem)] overflow-auto">
20+
<App />
21+
<div className="bg-white dark:bg-gray-900 py-12 px-6 border-t border-gray-200 dark:border-white">
22+
<div className="max-w-7xl mx-auto text-center">
23+
<p className="text-gray-500 dark:text-gray-400 text-sm mb-8">
24+
Discover the power of open-source financial technology solutions
25+
</p>
26+
<div className="flex justify-center">
27+
<img
28+
src="/gazelle.svg"
29+
alt="Mifos Logo"
30+
width={80}
31+
height={80}
32+
className="opacity-80 dark:opacity-90"
33+
/>
34+
</div>
35+
</div>
36+
</div>
2437
</div>
2538
</div>
26-
</div>
27-
</div>
39+
</ThemeProvider>
2840
</StrictMode>
2941
);

‎tailwind.config.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/** @type {import('tailwindcss').Config} */
2+
export default {
3+
content: [
4+
"./index.html",
5+
"./src/**/*.{js,ts,jsx,tsx}",
6+
],
7+
darkMode: 'class',
8+
theme: {
9+
extend: {},
10+
},
11+
plugins: [],
12+
}

0 commit comments

Comments
 (0)