andrei/biblical-guide.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update color palette and improve UI aesthetics

Browse Source 
- Apply new teal-based color palette (#009688, #00796B, #B2DFDB)
- Update secondary color to accent yellow (#FFC107)
- Replace Material-UI loading states with proper animations and skeletons
- Remove ugly gradient background, replace with clean white
- Update all gradients to use new color scheme
- Improve text colors for better readability (#212121, #757575)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
andupetcu
2025-09-20 16:04:02 +03:00
parent a0969e88df
commit 51248b24f7
8 changed files with 108 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/[locale]/bible/page.tsx
View File

@@ -19,6 +19,8 @@ import {
Button,
Chip,
useTheme,
CircularProgress,
Skeleton,
} from '@mui/material'
import {
MenuBook,
@@ -27,7 +29,6 @@ import {
Bookmark,
Share,
} from '@mui/icons-material'
import { Navigation } from '@/components/layout/navigation'
import { useState, useEffect } from 'react'
interface BibleVerse {
@@ -115,11 +116,13 @@ export default function BiblePage() {
if (loading && books.length === 0) {
return (
<Box>
<Navigation />
<Container maxWidth="lg" sx={{ py: 4 }}>
<Typography variant="h4" textAlign="center">
Se încarcă...
</Typography>
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
<CircularProgress size={48} />
<Typography variant="h6" color="text.secondary">
Se încarcă cărțile...
</Typography>
</Box>
</Container>
</Box>
)
@@ -127,7 +130,6 @@ export default function BiblePage() {
return (
<Box>
<Navigation />
<Container maxWidth="lg" sx={{ py: 4 }}>
{/* Header */}
@@ -232,9 +234,15 @@ export default function BiblePage() {
{/* Bible Verses */}
{loading ? (
<Typography textAlign="center" color="text.secondary">
Se încarcă versetele...
</Typography>
<Box>
{Array.from({ length: 5 }).map((_, index) => (
<Box key={index} sx={{ mb: 2 }}>
<Skeleton variant="text" width="100%" height={40} />
<Skeleton variant="text" width="90%" height={30} />
<Skeleton variant="text" width="95%" height={30} />
</Box>
))}
</Box>
) : verses.length > 0 ? (
<Box>
{verses.map((verse) => (

13
app/[locale]/chat/page.tsx
View File

@@ -16,6 +16,8 @@ import {
IconButton,
Divider,
useTheme,
CircularProgress,
Skeleton,
} from '@mui/material'
import {
Chat,
@@ -27,7 +29,6 @@ import {
ThumbDown,
Refresh,
} from '@mui/icons-material'
import { Navigation } from '@/components/layout/navigation'
import { useState, useRef, useEffect } from 'react'
interface ChatMessage {
@@ -134,7 +135,6 @@ export default function ChatPage() {
return (
<Box>
<Navigation />
<Container maxWidth="lg" sx={{ py: 4 }}>
{/* Header */}
@@ -281,9 +281,12 @@ export default function ChatPage() {
<SmartToy />
</Avatar>
<Paper elevation={1} sx={{ p: 2, borderRadius: 2 }}>
<Typography variant="body1">
Scriu răspunsul...
</Typography>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<CircularProgress size={16} />
<Typography variant="body1">
Scriu răspunsul...
</Typography>
</Box>
</Paper>
</Box>
</Box>

2
app/[locale]/page.tsx
View File

@@ -63,7 +63,7 @@ export default function Home() {
{/* Hero Section */}
<Box
sx={{
background: 'linear-gradient(135deg, #2C5F6B 0%, #5A8A96 100%)',
background: 'linear-gradient(135deg, #009688 0%, #00796B 100%)',
color: 'white',
py: 8,
mb: 6,

35
app/[locale]/prayers/page.tsx
View File

@@ -23,6 +23,8 @@ import {
ListItemText,
MenuItem,
useTheme,
CircularProgress,
Skeleton,
} from '@mui/material'
import {
Favorite,
@@ -34,7 +36,6 @@ import {
Share,
MoreVert,
} from '@mui/icons-material'
import { Navigation } from '@/components/layout/navigation'
import { useState, useEffect } from 'react'
interface PrayerRequest {
@@ -170,7 +171,6 @@ export default function PrayersPage() {
return (
<Box>
<Navigation />
<Container maxWidth="lg" sx={{ py: 4 }}>
{/* Header */}
@@ -220,7 +220,36 @@ export default function PrayersPage() {
{/* Prayer Requests */}
<Grid item xs={12} md={9}>
{loading ? (
<Typography textAlign="center">Se încarcă rugăciunile...</Typography>
<Box>
{Array.from({ length: 3 }).map((_, index) => (
<Card key={index} sx={{ mb: 3 }}>
<CardContent>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
<Box sx={{ flexGrow: 1 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
<Skeleton variant="text" width="60%" height={32} />
<Skeleton variant="rounded" width={80} height={24} />
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
<Skeleton variant="circular" width={24} height={24} />
<Skeleton variant="text" width="30%" height={20} />
</Box>
<Skeleton variant="text" width="100%" height={24} />
<Skeleton variant="text" width="90%" height={24} />
<Skeleton variant="text" width="95%" height={24} />
</Box>
</Box>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Box sx={{ display: 'flex', gap: 1 }}>
<Skeleton variant="rounded" width={100} height={32} />
<Skeleton variant="rounded" width={100} height={32} />
</Box>
<Skeleton variant="text" width="20%" height={20} />
</Box>
</CardContent>
</Card>
))}
</Box>
) : (
<Box>
{prayers.map((prayer) => {

38
app/[locale]/search/page.tsx
View File

@@ -23,6 +23,7 @@ import {
AccordionDetails,
useTheme,
CircularProgress,
Skeleton,
} from '@mui/material'
import {
Search,
@@ -32,7 +33,6 @@ import {
Close,
History,
} from '@mui/icons-material'
import { Navigation } from '@/components/layout/navigation'
import { useState, useEffect } from 'react'
interface SearchResult {
@@ -175,7 +175,6 @@ export default function SearchPage() {
return (
<Box>
<Navigation />
<Container maxWidth="lg" sx={{ py: 4 }}>
{/* Header */}
@@ -326,7 +325,7 @@ export default function SearchPage() {
disabled={!searchQuery.trim() || loading}
sx={{ minWidth: 100 }}
>
{loading ? <CircularProgress size={24} /> : 'Caută'}
{loading ? <CircularProgress size={20} color="inherit" /> : 'Caută'}
</Button>
</Box>
@@ -341,7 +340,38 @@ export default function SearchPage() {
</Card>
{/* Search Results */}
{results.length > 0 && (
{loading && searchQuery && (
<Card>
<CardContent>
<Typography variant="h6" gutterBottom>
Se caută...
</Typography>
<List>
{Array.from({ length: 3 }).map((_, index) => (
<ListItem key={index} divider>
<ListItemText
primary={
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
<Skeleton variant="text" width="40%" height={28} />
<Skeleton variant="rounded" width={100} height={24} />
</Box>
}
secondary={
<Box>
<Skeleton variant="text" width="100%" height={24} />
<Skeleton variant="text" width="90%" height={24} />
<Skeleton variant="text" width="95%" height={24} />
</Box>
}
/>
</ListItem>
))}
</List>
</CardContent>
</Card>
)}
{results.length > 0 && !loading && (
<Card>
<CardContent>
<Typography variant="h6" gutterBottom>