Skip to content

Commit 4f4be34

Browse files
Raoof128Raoof128
committed
feat: implement UI/UX premium enhancements with luxury gold and amber themes
- Introduced glassmorphic UI elements and ambient glows on the Home screen. - Enhanced the Verse of the Day card with glowing amber borders and refined search text focus indicators. - Added Gutenberg-style initial drop caps for scripture chapters and polished selected verse highlights. - Updated the selected verse actions panel with a glassmorphic toolbar and re-styled Settings options to align with the new aesthetic. - Verified changes with successful linting and type-checking, ensuring no errors were present.
1 parent 1bb06b6 commit 4f4be34

7 files changed

Lines changed: 305 additions & 166 deletions

File tree

‎AGENT.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,18 @@ These rules govern the development of the Aion project.
99

1010
## Change Log
1111

12+
### 2026-05-21 (Australia/Sydney)
13+
**Raouf:**
14+
- **Scope:** UI/UX Premium Enhancements
15+
- **Summary:** Applied luxury gold/amber and glassmorphic UI/UX enhancements across Aion. Introduced dual breathing purple/amber ambient glows on the Home screen, styled the Verse of the Day (VOTD) card with glowing amber borders, refined search text focus indicators, added Gutenberg-style large initial drop caps for the first verse of scripture chapters, polished selected verse highlights with gold borders, upgraded the selected verse actions panel with a glassmorphic toolbar, and updated Settings active options and buttons to match the luxury amber Gutenberg aesthetic.
16+
- **Files Changed:**
17+
- [app/(tabs)/index.tsx](file:///Users/raoof.r12/Desktop/Raouf/Aion/app/(tabs)/index.tsx) - Upgraded with dual ambient glows, luxury gold VOTD cards, and polished button interactions.
18+
- [app/(tabs)/read.tsx](file:///Users/raoof.r12/Desktop/Raouf/Aion/app/(tabs)/read.tsx) - Upgraded search bar focus indicators and book grid card states.
19+
- [app/reader/[bookId]/[chapter].tsx](file:///Users/raoof.r12/Desktop/Raouf/Aion/app/reader/%5BbookId%5D/%5Bchapter%5D.tsx) - Implemented Gutenberg initial drop caps, luxury gold selected verse border highlights, and redesigned the glassmorphic actions toolbar.
20+
- [components/SettingsSheet.tsx](file:///Users/raoof.r12/Desktop/Raouf/Aion/components/SettingsSheet.tsx) - Re-styled option active indicators and action button to use the new amber themes.
21+
- **Verification:** Ran `npm run lint` and `npm run type-check`, both completed successfully with 0 warnings or errors.
22+
- **Follow-ups:** None.
23+
1224
### 2026-05-21 (Australia/Sydney)
1325
**Raouf:**
1426
- **Scope:** Expo Router Layout and Supabase UX Warning

‎CHANGELOG.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,18 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
66

77
## Change Log
88

9+
### 2026-05-21 (Australia/Sydney)
10+
**Raouf:**
11+
- **Scope:** UI/UX Premium Enhancements
12+
- **Summary:** Applied luxury gold/amber and glassmorphic UI/UX enhancements across Aion. Introduced dual breathing purple/amber ambient glows on the Home screen, styled the Verse of the Day (VOTD) card with glowing amber borders, refined search text focus indicators, added Gutenberg-style large initial drop caps for the first verse of scripture chapters, polished selected verse highlights with gold borders, upgraded the selected verse actions panel with a glassmorphic toolbar, and updated Settings active options and buttons to match the luxury amber Gutenberg aesthetic.
13+
- **Files Changed:**
14+
- [app/(tabs)/index.tsx](file:///Users/raoof.r12/Desktop/Raouf/Aion/app/(tabs)/index.tsx) - Upgraded with dual ambient glows, luxury gold VOTD cards, and polished button interactions.
15+
- [app/(tabs)/read.tsx](file:///Users/raoof.r12/Desktop/Raouf/Aion/app/(tabs)/read.tsx) - Upgraded search bar focus indicators and book grid card states.
16+
- [app/reader/[bookId]/[chapter].tsx](file:///Users/raoof.r12/Desktop/Raouf/Aion/app/reader/%5BbookId%5D/%5Bchapter%5D.tsx) - Implemented Gutenberg initial drop caps, luxury gold selected verse border highlights, and redesigned the glassmorphic actions toolbar.
17+
- [components/SettingsSheet.tsx](file:///Users/raoof.r12/Desktop/Raouf/Aion/components/SettingsSheet.tsx) - Re-styled option active indicators and action button to use the new amber themes.
18+
- **Verification:** Ran `npm run lint` and `npm run type-check`, both completed successfully with 0 warnings or errors.
19+
- **Follow-ups:** None.
20+
921
### 2026-05-21 (Australia/Sydney)
1022
**Raouf:**
1123
- **Scope:** Expo Router Layout and Supabase UX Warning

‎app/(tabs)/index.tsx‎

Lines changed: 53 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,9 @@ export default function HomeScreen() {
8585
behavior={Platform.OS === "ios" ? "padding" : undefined}
8686
style={styles.flex}
8787
>
88-
{/* Subtle background glow orb behind the logo area */}
89-
<View style={styles.glowOrb} />
88+
{/* Ambient background glows */}
89+
<View style={styles.glowOrbPurple} />
90+
<View style={styles.glowOrbAmber} />
9091

9192
<ScrollView
9293
style={styles.scrollContainer}
@@ -142,7 +143,10 @@ export default function HomeScreen() {
142143
accessibilityRole="summary"
143144
accessibilityLabel={`Verse of the Day: ${votd.content} — ${votd.book_name} ${votd.chapter}:${votd.verse}`}
144145
>
145-
<Text style={styles.votdLabel}>VERSE OF THE DAY</Text>
146+
<View style={styles.votdHeaderRow}>
147+
<Text style={styles.votdLabel}>VERSE OF THE DAY</Text>
148+
<Sparkle size={10} color={colors.amberGlow} />
149+
</View>
146150
<Text style={styles.votdContent}>"{votd.content}"</Text>
147151
<Text style={styles.votdRef}>
148152
— {votd.book_name} {votd.chapter}:{votd.verse}
@@ -152,14 +156,15 @@ export default function HomeScreen() {
152156
{/* Read Bible Button */}
153157
<Pressable
154158
onPress={() => router.push("/read")}
155-
style={({ hovered }: { pressed: boolean; hovered?: boolean }) => [
159+
style={({ pressed, hovered }: { pressed: boolean; hovered?: boolean }) => [
156160
styles.readerButton,
157161
hovered && styles.readerButtonHovered,
162+
pressed && styles.readerButtonPressed,
158163
]}
159164
accessibilityLabel="Open Bible Reader"
160165
accessibilityRole="button"
161166
>
162-
<BookOpen size={18} color={colors.purpleGlow} />
167+
<BookOpen size={18} color={colors.amberGlow} style={styles.readerIcon} />
163168
<Text style={styles.readerButtonText}>Read the Bible</Text>
164169
<ChevronRight size={18} color={colors.textGhost} />
165170
</Pressable>
@@ -202,17 +207,30 @@ const styles = StyleSheet.create({
202207
flex: {
203208
flex: 1,
204209
},
205-
glowOrb: {
210+
glowOrbPurple: {
206211
position: "absolute",
207-
width: 200,
208-
height: 200,
209-
borderRadius: 100,
210-
backgroundColor: "rgba(138, 43, 226, 0.04)",
211-
top: "30%",
212-
alignSelf: "center",
212+
width: 250,
213+
height: 250,
214+
borderRadius: 125,
215+
backgroundColor: "rgba(138, 43, 226, 0.02)",
216+
top: "20%",
217+
left: "10%",
213218
shadowColor: colors.purple,
214219
shadowOffset: { width: 0, height: 0 },
215-
shadowOpacity: 0.15,
220+
shadowOpacity: 0.12,
221+
shadowRadius: 80,
222+
},
223+
glowOrbAmber: {
224+
position: "absolute",
225+
width: 250,
226+
height: 250,
227+
borderRadius: 125,
228+
backgroundColor: "rgba(217, 119, 6, 0.02)",
229+
top: "35%",
230+
right: "10%",
231+
shadowColor: colors.amber,
232+
shadowOffset: { width: 0, height: 0 },
233+
shadowOpacity: 0.08,
216234
shadowRadius: 80,
217235
},
218236
scrollContainer: {
@@ -291,20 +309,29 @@ const styles = StyleSheet.create({
291309
votdCard: {
292310
width: "100%",
293311
maxWidth: 420,
294-
backgroundColor: "rgba(138, 43, 226, 0.06)",
312+
backgroundColor: colors.amberMist,
295313
borderWidth: 1,
296-
borderColor: "rgba(138, 43, 226, 0.15)",
314+
borderColor: colors.amberBorder,
297315
borderRadius: 16,
298316
padding: 20,
299317
marginBottom: 16,
318+
shadowColor: colors.amber,
319+
shadowOffset: { width: 0, height: 4 },
320+
shadowOpacity: 0.08,
321+
shadowRadius: 16,
322+
},
323+
votdHeaderRow: {
324+
flexDirection: "row",
325+
alignItems: "center",
326+
justifyContent: "space-between",
327+
marginBottom: 10,
300328
},
301329
votdLabel: {
302-
color: colors.purpleGlow,
330+
color: colors.amberGlow,
303331
fontSize: 10,
304332
fontFamily: fonts.uiBold,
305333
fontWeight: "700",
306334
letterSpacing: 2,
307-
marginBottom: 10,
308335
},
309336
votdContent: {
310337
color: colors.textPrimary,
@@ -334,15 +361,21 @@ const styles = StyleSheet.create({
334361
marginBottom: 16,
335362
},
336363
readerButtonHovered: {
337-
backgroundColor: "rgba(138, 43, 226, 0.06)",
338-
borderColor: "rgba(138, 43, 226, 0.20)",
364+
backgroundColor: "rgba(255, 255, 255, 0.08)",
365+
borderColor: colors.purpleBorder,
366+
},
367+
readerButtonPressed: {
368+
backgroundColor: colors.purpleMist,
369+
borderColor: colors.purpleBorder,
370+
},
371+
readerIcon: {
372+
marginRight: 12,
339373
},
340374
readerButtonText: {
341375
flex: 1,
342376
color: colors.textPrimary,
343377
fontSize: 15,
344378
fontFamily: fonts.uiMedium,
345-
marginLeft: 12,
346379
},
347380
warningCard: {
348381
width: "100%",

‎app/(tabs)/read.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -264,14 +264,18 @@ const styles = StyleSheet.create({
264264
borderWidth: 1,
265265
borderColor: colors.glassBorder,
266266
minHeight: 80,
267+
shadowColor: colors.void,
268+
shadowOffset: { width: 0, height: 2 },
269+
shadowOpacity: 0.1,
270+
shadowRadius: 4,
267271
},
268272
bookCardHovered: {
269-
backgroundColor: "rgba(138, 43, 226, 0.06)",
270-
borderColor: "rgba(138, 43, 226, 0.20)",
273+
backgroundColor: "rgba(217, 119, 6, 0.03)",
274+
borderColor: colors.amberBorder,
271275
},
272276
bookCardPressed: {
273-
backgroundColor: colors.purpleAccent,
274-
borderColor: colors.purpleBorder,
277+
backgroundColor: colors.amberMist,
278+
borderColor: colors.amberBorder,
275279
},
276280
searchContainer: {
277281
flexDirection: "row",
@@ -288,11 +292,15 @@ const styles = StyleSheet.create({
288292
searchIcon: { marginRight: 10 },
289293
searchInput: { flex: 1, color: colors.textPrimary, fontSize: 14, fontFamily: fonts.ui },
290294
searchContainerFocused: {
291-
borderColor: "rgba(138, 43, 226, 0.35)",
295+
borderColor: colors.purpleGlow,
292296
backgroundColor: "rgba(255, 255, 255, 0.08)",
297+
shadowColor: colors.purple,
298+
shadowOffset: { width: 0, height: 0 },
299+
shadowOpacity: 0.15,
300+
shadowRadius: 8,
293301
},
294302
bookAbbr: {
295-
color: colors.purpleGlow,
303+
color: colors.amberGlow,
296304
fontSize: 10,
297305
fontWeight: "700",
298306
letterSpacing: 1.5,

0 commit comments

Comments
 (0)