added utility functions for date formatting and styling, refactored components to use reusable helpers

Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>

src/styles/StyleUtils.ts

@@ -0,0 +1,83 @@
+/**
+ * Utility functions for consistent styling across components
+ */
+
+/**
+ * Returns the base style for dreamy cards
+ * @param floating - Whether the card should have a floating animation
+ * @returns Object with style properties
+ */
+export const getCardStyle = (floating: boolean = false) => {
+    return {
+        backgroundColor: 'var(--card)',
+        color: 'var(--text)',
+        className: `dreamy-card p-4 mb-4 transition-all duration-300 hover:transform hover:scale-[1.01] ${floating ? 'floating' : ''}`
+    };
+};
+
+/**
+ * Returns the style for accent-colored elements
+ * @param soft - Whether to use the soft accent color
+ * @param isActive - Whether the element is in active state
+ * @returns Object with style properties
+ */
+export const getAccentStyle = (soft: boolean = false, isActive: boolean = true) => {
+    if (!isActive) {
+        return {
+            backgroundColor: 'transparent',
+            color: 'var(--text)'
+        };
+    }
+
+    return {
+        backgroundColor: soft ? 'var(--accent-soft)' : 'var(--accent)',
+        color: soft ? 'var(--text)' : 'white'
+    };
+};
+
+/**
+ * Returns the style for text elements
+ * @param type - The type of text (normal, muted, accent)
+ * @returns Object with style properties
+ */
+export const getTextStyle = (type: 'normal' | 'muted' | 'accent' = 'normal') => {
+    switch (type) {
+        case 'muted':
+            return {color: 'var(--text-muted)'};
+        case 'accent':
+            return {color: 'var(--accent)'};
+        default:
+            return {color: 'var(--text)'};
+    }
+};
+
+/**
+ * Returns the style for background elements
+ * @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') => {
+    switch (type) {
+        case 'card':
+            return {backgroundColor: 'var(--bg)', boxShadow: '0 4px 15px var(--shadow)'};
+        case 'gradient':
+            return {
+                background: 'linear-gradient(135deg, var(--accent), var(--accent-dark))',
+                color: 'white',
+                boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.3)'
+            };
+        case 'accent-gradient':
+            return {
+                background: 'var(--accent-gradient)',
+                color: 'white',
+                boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.3)'
+            };
+        case 'topbar':
+            return {
+                background: 'var(--accent-gradient)',
+                boxShadow: '0 2px 10px var(--shadow)'
+            };
+        default:
+            return {backgroundColor: 'var(--bg)'};
+    }
+};