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>

7
app/globals.css
View File

@@ -18,12 +18,7 @@
body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
background: white;
}
.verse {

8
components/chat/floating-chat.tsx
View File

@@ -167,9 +167,9 @@ export default function FloatingChat() {
bottom: 24,
right: 24,
zIndex: 1000,
background: 'linear-gradient(45deg, #2C5F6B 30%, #8B7355 90%)',
background: 'linear-gradient(45deg, #009688 30%, #00796B 90%)',
'&:hover': {
background: 'linear-gradient(45deg, #1e4148 30%, #6d5a43 90%)',
background: 'linear-gradient(45deg, #00695C 30%, #004D40 90%)',
}
}}
>
@@ -199,7 +199,7 @@ export default function FloatingChat() {
<Box
sx={{
p: 2,
background: 'linear-gradient(45deg, #2C5F6B 30%, #8B7355 90%)',
background: 'linear-gradient(45deg, #009688 30%, #00796B 90%)',
color: 'white',
display: 'flex',
alignItems: 'center',
@@ -412,7 +412,7 @@ export default function FloatingChat() {
minWidth: 'auto',
px: 2,
borderRadius: 2,
background: 'linear-gradient(45deg, #2C5F6B 30%, #8B7355 90%)',
background: 'linear-gradient(45deg, #009688 30%, #00796B 90%)',
}}
>
<Send fontSize="small" />

21
lib/theme.ts
View File

@@ -5,25 +5,26 @@ export const theme = createTheme({
palette: {
mode: 'light',
primary: {
main: '#2C5F6B', // Deep teal for spiritual feel
light: '#5A8A96',
dark: '#1A3B42',
contrastText: '#ffffff',
main: '#009688', // PRIMARY COLOR
light: '#B2DFDB', // LIGHT PRIMARY COLOR
dark: '#00796B', // DARK PRIMARY COLOR
contrastText: '#FFFFFF', // TEXT / ICONS
},
secondary: {
main: '#8B7355', // Warm brown for earth tones
light: '#B09A7A',
dark: '#5D4D37',
contrastText: '#ffffff',
main: '#FFC107', // ACCENT COLOR
light: '#FFECB3',
dark: '#FF8F00',
contrastText: '#212121',
},
background: {
default: '#FAFAFA',
paper: '#FFFFFF',
},
text: {
primary: '#1A1A1A',
secondary: '#4A4A4A',
primary: '#212121', // PRIMARY TEXT
secondary: '#757575', // SECONDARY TEXT
},
divider: '#BDBDBD', // DIVIDER COLOR
},
typography: {
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',