mpuchstein/REMind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added dreamy gradient styles to index.css, expanded getBackgroundStyle for gradient types, introduced ChipCard component, updated Home with ChipCard, and refined layouts with consistent paddings and shadows

Browse Source 
Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
This commit is contained in:
Matthias Puchstein
2025-07-12 12:32:58 +02:00
parent 153f5fd146
commit ccca533db6
10 changed files with 190 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/styles/StyleUtils.ts
View File

@@ -56,7 +56,10 @@ export const getTextStyle = (type: 'normal' | 'muted' | 'accent' = 'normal') =>
* @param type - The type of background (normal, card, gradient)
* @returns Object with style properties
*/
export const getBackgroundStyle = (type: 'normal' | 'card' | 'gradient' | 'accent-gradient' | 'topbar' = 'normal') => {
export const getBackgroundStyle = (
type: 'normal' | 'card' | 'gradient' | 'accent-gradient' | 'topbar' |
'purple' | 'blue' | 'violet' | 'emerald' | 'amber' | 'rose' | 'pink-red' | 'cta' = 'normal'
) => {
switch (type) {
case 'card':
return {backgroundColor: 'var(--bg)', boxShadow: '0 4px 15px var(--shadow)'};
@@ -75,7 +78,56 @@ export const getBackgroundStyle = (type: 'normal' | 'card' | 'gradient' | 'accen
case 'topbar':
return {
background: 'var(--accent-gradient)',
boxShadow: '0 2px 10px var(--shadow)'
boxShadow: '0 2px 10px var(--shadow)',
backdropFilter: 'blur(10px)'
};
case 'purple':
return {
background: 'var(--purple-gradient)',
color: 'var(--text)',
boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.2)'
};
case 'blue':
return {
background: 'var(--blue-gradient)',
color: 'var(--text)',
boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(59, 130, 246, 0.2)'
};
case 'violet':
return {
background: 'var(--violet-gradient)',
color: 'var(--text)',
boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(139, 92, 246, 0.2)'
};
case 'emerald':
return {
background: 'var(--emerald-gradient)',
color: 'var(--text)',
boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(16, 185, 129, 0.2)'
};
case 'amber':
return {
background: 'var(--amber-gradient)',
color: 'var(--text)',
boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(245, 158, 11, 0.2)'
};
case 'rose':
return {
background: 'var(--rose-gradient)',
color: 'var(--text)',
boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(244, 63, 94, 0.2)'
};
case 'pink-red':
return {
background: 'var(--pink-red-gradient)',
color: 'var(--text)',
boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(236, 72, 153, 0.2)'
};
case 'cta':
return {
background: 'var(--cta-gradient)',
color: 'white',
boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(236, 72, 153, 0.3)'
};
default:
return {backgroundColor: 'var(--bg)'};