From d20be4f8681a05cb406f046a057838e2a94c1044 Mon Sep 17 00:00:00 2001 From: johnny2211 Date: Sat, 17 Jan 2026 15:18:08 +0100 Subject: [PATCH] Update frontend UI with improved layout and styling - Enhanced homepage with modern design and better visual hierarchy - Improved login page with centered layout and better UX - Updated admin page with cleaner interface - Refined sidebar navigation and layout components - Updated Tailwind config and global styles - Fixed protected route component --- packages/frontend/index.html | 3 ++ .../src/components/ProtectedRoute.tsx | 4 +- .../frontend/src/components/layout/Layout.tsx | 2 +- .../src/components/layout/Sidebar.tsx | 34 +++++++------- packages/frontend/src/index.css | 44 ++++++++++++------- packages/frontend/src/pages/Admin.tsx | 8 ++-- packages/frontend/src/pages/Home.tsx | 18 ++++---- packages/frontend/src/pages/Login.tsx | 14 +++--- packages/frontend/tailwind.config.js | 8 ++++ 9 files changed, 83 insertions(+), 52 deletions(-) diff --git a/packages/frontend/index.html b/packages/frontend/index.html index a27334b..fb53310 100644 --- a/packages/frontend/index.html +++ b/packages/frontend/index.html @@ -4,6 +4,9 @@ + + + Znakovni.hr - Hrvatski znakovni jezik diff --git a/packages/frontend/src/components/ProtectedRoute.tsx b/packages/frontend/src/components/ProtectedRoute.tsx index f905016..cda23f7 100644 --- a/packages/frontend/src/components/ProtectedRoute.tsx +++ b/packages/frontend/src/components/ProtectedRoute.tsx @@ -18,8 +18,8 @@ export function ProtectedRoute({ children, requireAdmin = false }: ProtectedRout return (
-
-

Loading...

+
+

Loading...

); diff --git a/packages/frontend/src/components/layout/Layout.tsx b/packages/frontend/src/components/layout/Layout.tsx index 049b956..d0b0d89 100644 --- a/packages/frontend/src/components/layout/Layout.tsx +++ b/packages/frontend/src/components/layout/Layout.tsx @@ -7,7 +7,7 @@ interface LayoutProps { export function Layout({ children }: LayoutProps) { return ( -
+
diff --git a/packages/frontend/src/components/layout/Sidebar.tsx b/packages/frontend/src/components/layout/Sidebar.tsx index 8558bdf..a9851b2 100644 --- a/packages/frontend/src/components/layout/Sidebar.tsx +++ b/packages/frontend/src/components/layout/Sidebar.tsx @@ -44,10 +44,14 @@ export function Sidebar() { }; return ( -
+
{/* Logo */} -
-

Znakovni.hr

+
+

+ ZNAKOVNI + . + hr +

{/* Navigation */} @@ -63,8 +67,8 @@ export function Sidebar() { className={cn( 'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors', isActive - ? 'bg-slate-700 text-white' - : 'text-slate-300 hover:bg-slate-700 hover:text-white' + ? 'bg-primary text-primary-foreground' + : 'text-muted-foreground hover:bg-secondary hover:text-foreground' )} > @@ -76,7 +80,7 @@ export function Sidebar() { {/* Support Section */}
-

+

Portal za podršku

@@ -89,8 +93,8 @@ export function Sidebar() { className={cn( 'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors', isActive - ? 'bg-slate-700 text-white' - : 'text-slate-300 hover:bg-slate-700 hover:text-white' + ? 'bg-primary text-primary-foreground' + : 'text-muted-foreground hover:bg-secondary hover:text-foreground' )} > @@ -109,8 +113,8 @@ export function Sidebar() { className={cn( 'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors', location.pathname === '/admin' - ? 'bg-slate-700 text-white' - : 'text-slate-300 hover:bg-slate-700 hover:text-white' + ? 'bg-primary text-primary-foreground' + : 'text-muted-foreground hover:bg-secondary hover:text-foreground' )} > @@ -121,16 +125,16 @@ export function Sidebar() { {/* User Section */} -
+
{user ? (
-

{user.displayName || user.email}

-

{user.email}

+

{user.displayName || user.email}

+

{user.email}

diff --git a/packages/frontend/src/pages/Login.tsx b/packages/frontend/src/pages/Login.tsx index 6085f35..b921675 100644 --- a/packages/frontend/src/pages/Login.tsx +++ b/packages/frontend/src/pages/Login.tsx @@ -25,12 +25,16 @@ export function Login() { }; return ( -
-
+
+
{/* Logo */}
-

Znakovni.hr

-

+

+ ZNAKOVNI + . + hr +

+

Hrvatski znakovni jezik

@@ -83,7 +87,7 @@ export function Login() { {/* Demo Credentials */} -
+

Demo Credentials:

Admin: admin@znakovni.hr / admin123

User: demo@znakovni.hr / demo123

diff --git a/packages/frontend/tailwind.config.js b/packages/frontend/tailwind.config.js index e1c73d8..f54efac 100644 --- a/packages/frontend/tailwind.config.js +++ b/packages/frontend/tailwind.config.js @@ -4,6 +4,9 @@ export default { content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], theme: { extend: { + fontFamily: { + sans: ['Inter', 'system-ui', 'sans-serif'], + }, colors: { border: 'hsl(var(--border))', input: 'hsl(var(--input))', @@ -38,6 +41,11 @@ export default { DEFAULT: 'hsl(var(--card))', foreground: 'hsl(var(--card-foreground))', }, + cefr: { + 'a1-a2': 'hsl(var(--cefr-a1-a2))', + 'b1-b2': 'hsl(var(--cefr-b1-b2))', + 'c1-c2': 'hsl(var(--cefr-c1-c2))', + }, }, borderRadius: { lg: 'var(--radius)',