Skip to content

Refactor UI with professional design system and enhanced UX #121

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

Refactor UI with professional design system and enhanced UX #121

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 133 additions & 0 deletions THEME_TRANSFORMATION.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
# Kleros Library of Justice - Theme Transformation

## Overview
This document outlines the comprehensive theme transformation applied to the Kleros Library of Justice application to make it more attractive, official, and legitimate while retaining purple as the primary hue.

## 🎨 Design Improvements

### 1. Enhanced Color Palette
- **Expanded Purple Theme**: Created sophisticated purple color gradients from `purple-50` to `purple-950`
- **Primary Brand Colors**: Developed a cohesive primary color system with multiple shades
- **Accent Colors**: Added complementary blue accents for highlights and interactive elements
- **Semantic Colors**: Integrated success, warning, and error color systems
- **Improved Contrast**: Better text contrast ratios for accessibility and professional appearance

### 2. Typography & Font Improvements
- **Modern Font Stack**: Upgraded to Inter font family with fallbacks for better readability
- **Enhanced Font Sizes**: Refined typography scale from `xs` to `5xl` with proper line heights
- **Text Hierarchy**: Implemented proper visual hierarchy with gradient text effects
- **Professional Weight**: Used appropriate font weights (300-800) for different contexts

### 3. Layout & Structure Enhancements
- **Elegant Border Frame**: Created sophisticated gradient border frames around content
- **Glass Effect**: Implemented backdrop blur effects for modern appearance
- **Professional Spacing**: Enhanced padding, margins, and section spacing
- **Responsive Design**: Improved mobile and desktop layouts
- **Grid Systems**: Proper use of CSS Grid and Flexbox for better alignment

### 4. Component Improvements

#### Homepage (Landing Page)
- **Hero Section**: Large, gradient title with proper visual hierarchy
- **Enhanced Search Interface**: Professional search component with:
- Sophisticated input styling with hover and focus states
- Loading states with spinner animation
- Better visual feedback and user guidance
- Example case numbers for user guidance
- **Feature Cards**: Added informational cards highlighting key features:
- Historical Records access
- Advanced Search capabilities
- Verified blockchain results
- **Animations**: Subtle fade-in and slide-up animations for better UX

#### Navigation (Navbar)
- **Professional Logo Display**: Enhanced logo with subtle background effects
- **Responsive Title**: Dynamic title display based on screen size
- **Enhanced Language Selector**:
- Modern dropdown with hover effects
- Language icon and improved styling
- Better keyboard navigation support
- **Improved Layout**: Better spacing and alignment across devices

#### Loading & Error Pages
- **Sophisticated Loading Animation**: Multi-ring spinner with gradient colors
- **Professional Error Design**: Comprehensive error handling with:
- Clear error messaging
- Troubleshooting tips
- Multiple action buttons
- Development-mode error details
- **Background Decorations**: Subtle animated background elements

### 5. Visual Effects & Animations
- **Custom Shadows**: Multiple shadow variants (`soft`, `medium`, `strong`, `purple`)
- **Gradient Backgrounds**: Sophisticated multi-layer background gradients
- **Smooth Transitions**: Consistent 200-300ms transitions throughout
- **Hover Effects**: Professional hover states for interactive elements
- **Animation System**: Custom keyframe animations for enhanced UX

### 6. Accessibility & UX Improvements
- **Focus Management**: Proper focus rings and keyboard navigation
- **Color Contrast**: Improved contrast ratios for text readability
- **Responsive Design**: Mobile-first approach with breakpoint optimization
- **Loading States**: Clear feedback during data fetching
- **Error Handling**: User-friendly error messages with actionable guidance

## 🛠️ Technical Implementation

### CSS Architecture
- **Tailwind CSS**: Extensive use of utility classes for consistency
- **Custom Components**: Reusable component classes in `@layer components`
- **CSS Variables**: Proper use of CSS custom properties for theming
- **Modern CSS**: Backdrop filters, CSS Grid, Flexbox, and custom properties

### Color System
```css
Primary: #4D00B4 → Enhanced purple palette (50-950)
Secondary: #9013FE → Integrated into purple system
Accent: Blue color system for highlights
Neutral: Comprehensive gray scale for text and backgrounds
```

### Component Structure
- Modular component design
- Consistent spacing using design tokens
- Reusable utility classes
- Professional animation timing

## 🎯 Achieved Goals

### ✅ More Attractive
- Modern, sophisticated visual design
- Professional color gradients and shadows
- Engaging animations and hover effects
- Contemporary typography and spacing

### ✅ Official & Legitimate
- Professional layout with elegant borders
- Sophisticated color palette
- Clear information hierarchy
- Consistent branding throughout

### ✅ Purple Theme Retained
- Purple remains the dominant color
- Enhanced with multiple purple shades
- Complementary colors support the purple theme
- Gradient effects emphasize the purple branding

## 🚀 Key Features
1. **Professional Search Interface** with enhanced UX
2. **Responsive Design** that works across all devices
3. **Sophisticated Loading States** with branded animations
4. **Comprehensive Error Handling** with user guidance
5. **Modern Navigation** with improved language selection
6. **Feature Showcase** highlighting application capabilities
7. **Accessibility Compliance** with proper focus management
8. **Performance Optimized** with efficient CSS and animations

## 📱 Responsive Behavior
- **Mobile**: Optimized layout with stacked elements
- **Tablet**: Balanced design with appropriate spacing
- **Desktop**: Full-featured layout with advanced interactions
- **Large Screens**: Proper content constraints and centering

The transformation successfully elevates the Kleros Library of Justice from a basic interface to a professional, attractive, and legitimate-looking application while maintaining the essential purple branding and improving user experience significantly.
154 changes: 108 additions & 46 deletions src/app/[locale]/components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,52 +28,114 @@ const Navbar: React.FC<INavbar> = ({ locale }) => {
);

return (
<header className="w-full grid grid-cols-3">
<Image
className="col-start-2 place-self-center"
src="/kleros.svg"
priority={true}
alt="kleros"
width="148"
height="48"
/>
<div
className={clsx(
"justify-self-end place-self-center",
"border-stroke border-2 rounded",
"transition hover:scale-110 hover:drop-shadow",
)}
>
<DropdownMenu>
<DropdownMenuTrigger
className={clsx(
"focus:outline-none transition",
"rounded bg-light-background",
"py-2 px-4",
)}
>
<span className="text-primary-text">{locale.toUpperCase()}</span>
</DropdownMenuTrigger>
<DropdownMenuContent className="min-w-min">
{locales.map((innerLocale) =>
innerLocale !== locale ? (
<DropdownMenuItem
key={innerLocale}
className={clsx(
"hover:cursor-pointer hover:bg-light-background",
"py-2 px-4",
)}
>
<Link href={`/${innerLocale}/${pathWithoutLocale}`}>
<span className="text-primary-text text-center">
{innerLocale.toUpperCase()}
</span>
</Link>
</DropdownMenuItem>
) : null,
)}
</DropdownMenuContent>
</DropdownMenu>
<header className="w-full">
<div className="flex items-center justify-between">
{/* Logo Section */}
<div className="flex items-center space-x-4">
<Link href={`/${locale}`} className="group flex items-center space-x-3 hover:opacity-80 transition-opacity">
<div className="relative">
<div className="absolute inset-0 bg-gradient-to-br from-primary-500/20 to-purple-500/20 rounded-lg blur-sm group-hover:blur-md transition-all" />
<Image
className="relative z-10 drop-shadow-sm"
src="/kleros.svg"
priority={true}
alt="Kleros Library of Justice"
width="160"
height="52"
/>
</div>
</Link>
</div>

{/* Title Section - Hidden on smaller screens, visible on large screens */}
<div className="hidden lg:flex flex-col items-center">
<h1 className="text-xl font-semibold text-neutral-800 tracking-tight">
Library of Justice
</h1>
<p className="text-sm text-neutral-500 font-medium">
Historical Archive
</p>
</div>

{/* Language Selector */}
<div className="flex items-center">
<div className={clsx(
"relative group",
"bg-white rounded-lg shadow-soft border border-neutral-200",
"hover:shadow-medium hover:border-primary-300",
"transition-all duration-200"
)}>
<DropdownMenu>
<DropdownMenuTrigger
className={clsx(
"flex items-center gap-2 px-4 py-2.5 rounded-lg",
"text-neutral-700 font-medium text-sm",
"hover:bg-gradient-to-br hover:from-primary-50 hover:to-purple-50",
"focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1",
"transition-all duration-200 group"
)}
>
{/* Language Icon */}
<svg className="w-4 h-4 text-neutral-500 group-hover:text-primary-600 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" />
</svg>

{/* Language Code */}
<span className="font-semibold tracking-wider text-primary-700">
{locale.toUpperCase()}
</span>

{/* Dropdown Arrow */}
<svg className="w-4 h-4 text-neutral-400 group-hover:text-primary-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</DropdownMenuTrigger>

<DropdownMenuContent
className={clsx(
"min-w-[120px] mt-2 p-1",
"bg-white rounded-lg shadow-strong border border-neutral-200",
"animate-scale-in"
)}
align="end"
>
{locales.map((innerLocale) =>
innerLocale !== locale ? (
<DropdownMenuItem
key={innerLocale}
className={clsx(
"flex items-center justify-center px-3 py-2.5 rounded-md",
"hover:bg-gradient-to-br hover:from-primary-50 hover:to-purple-50",
"hover:text-primary-700 transition-all duration-200",
"cursor-pointer group"
)}
>
<Link
href={`/${innerLocale}/${pathWithoutLocale}`}
className="flex items-center gap-2 w-full justify-center"
>
{/* Flag or locale indicator could go here */}
<span className="font-semibold tracking-wider text-center group-hover:text-primary-700">
{innerLocale.toUpperCase()}
</span>
</Link>
</DropdownMenuItem>
) : null,
)}
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
</div>

{/* Mobile Title - Only visible on smaller screens */}
<div className="lg:hidden mt-4 text-center">
<h1 className="text-lg font-semibold text-neutral-800 tracking-tight">
Library of Justice
</h1>
<p className="text-xs text-neutral-500 font-medium">
Historical Archive
</p>
</div>
</header>
);
Expand Down
Loading
Loading