From ca4ec576661ddf8e7adfa44befa95e28bb222fa6 Mon Sep 17 00:00:00 2001
From: Matthias Puchstein <matthias@puchstein.bayern>
Date: Thu, 10 Jul 2025 00:01:04 +0200
Subject: [PATCH] modularized the `Record` component into a standalone file
 `Record.tsx`, updated `Home` and `App` to reflect the changes, and
 streamlined styles in `SplashScreen` for consistency and dynamic theming

Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
---
 src/App.tsx                     | 35 +--------------
 src/components/SplashScreen.tsx | 15 ++++---
 src/pages/Home.tsx              | 75 +------------------------------
 src/pages/Record.tsx            | 78 +++++++++++++++++++++++++++++++++
 4 files changed, 90 insertions(+), 113 deletions(-)
 create mode 100644 src/pages/Record.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 969b1af..fc9cd45 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,40 +10,7 @@ import DreamPage from "./pages/DreamPage.tsx";
 import ProfilePage from "./pages/ProfilePage.tsx";
 import Home from "./pages/Home.tsx";
 import Overview from "./pages/Overview.tsx";
-
-function Record() {
-    return (
-        <div className="p-4">
-            <h1 className="dreamy-text text-3xl md:text-4xl mb-6">Record Your Dream</h1>
-
-            <div className="dream-container">
-                <div className="flex flex-col items-center mb-6">
-                    <div className="w-20 h-20 rounded-full flex items-center justify-center mb-4 floating"
-                         style={{ background: 'var(--accent-gradient)' }}>
-                        <svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
-                        </svg>
-                    </div>
-                    <p className="text-lg mb-2">Tap to start recording your dream</p>
-                    <p className="text-sm text-center" style={{ color: 'var(--text-muted)' }}>
-                        Your voice will be transcribed automatically
-                    </p>
-                </div>
-
-                <div className="dreamy-border p-4 mb-6">
-                    <textarea 
-                        className="w-full p-3 rounded-lg bg-transparent focus:outline-none" 
-                        placeholder="Or type your dream here..."
-                        rows={5}
-                        style={{ color: 'var(--text)', borderColor: 'var(--accent-soft)' }}
-                    ></textarea>
-                </div>
-
-                <button className="dreamy-button w-full">Save Dream</button>
-            </div>
-        </div>
-    );
-}
+import {Record} from "./pages/Record.tsx";
 
 function Archive() {
     return (
diff --git a/src/components/SplashScreen.tsx b/src/components/SplashScreen.tsx
index 2c019e9..9985b54 100644
--- a/src/components/SplashScreen.tsx
+++ b/src/components/SplashScreen.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import {useEffect} from 'react';
 import logo from '../assets/logo.svg';
 import text from '../assets/text.svg';
 
@@ -17,15 +17,20 @@ export default function SplashScreen({ onFinished }: SplashScreenProps) {
   }, [onFinished]);
 
   return (
-    <div className="fixed inset-0 flex flex-col items-center justify-center z-50 bg-gradient-to-br from-fuchsia-900 via-pink-700 to-purple-900">
+      <div className="fixed inset-0 flex flex-col items-center justify-center z-50" style={{
+          background: 'var(--accent-gradient)'
+      }}>
       <div className="animate-pulse flex flex-col items-center">
         <img src={logo} alt="REMind Logo" className="h-32 w-32 mb-4" />
         <img src={text} alt="REMind Text" className="h-16" />
       </div>
-      <div className="mt-8 text-fuchsia-400">
-        <div className="animate-spin h-8 w-8 border-4 border-current border-t-transparent rounded-full mx-auto"></div>
+          <div className="mt-8" style={{color: 'var(--text)'}}>
+              <div className="animate-spin h-8 w-8 border-4 rounded-full mx-auto" style={{
+                  borderColor: 'var(--text)',
+                  borderTopColor: 'transparent'
+              }}></div>
         <p className="mt-4 text-center">Loading your dreams...</p>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index b54545b..71d38e1 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,13 +1,11 @@
-import {useState} from 'react';
 import {mockDreams} from '../data/MockDreams';
 import {MockUserMap} from '../data/MockUsers';
 import {getSortedDreamsByDate} from '../utils/DreamUtils.ts';
 import {primaryMoodCategories, topDreamTopics} from '../data/MockDailyHighlights';
-import {getAccentStyle, getBackgroundStyle, getCardStyle, getTextStyle} from '../styles/StyleUtils';
+import {getBackgroundStyle, getCardStyle, getTextStyle} from '../styles/StyleUtils';
 import {formatDateFull, formatDateSimple} from '../utils/DateUtils';
 
 export default function Home() {
-    const [inputMode, setInputMode] = useState<'text' | 'drawing'>('text');
     const currentUser = MockUserMap.get(4); // Neo Quantum
     const currentDate = new Date();
     const formattedDate = formatDateFull(currentDate);
@@ -52,77 +50,6 @@ export default function Home() {
                 </div>
             </div>
 
-            {/* Input Card */}
-            <div className={getCardStyle().className}
-                 style={getCardStyle()}>
-                <div className="flex justify-between items-center mb-3">
-                    <h3 className="font-bold dream-title">Neuer Traum</h3>
-                    <div className="flex rounded-lg overflow-hidden" style={{border: '1px solid var(--accent-soft)'}}>
-                        <button
-                            className={`px-3 py-1 text-sm transition-all duration-200`}
-                            onClick={() => setInputMode('text')}
-                            style={getAccentStyle(false, inputMode === 'text')}
-                        >
-                            Text
-                        </button>
-                        <button
-                            className={`px-3 py-1 text-sm transition-all duration-200`}
-                            onClick={() => setInputMode('drawing')}
-                            style={getAccentStyle(false, inputMode === 'drawing')}
-                        >
-                            Zeichnung
-                        </button>
-                    </div>
-                </div>
-
-                {inputMode === 'text' ? (
-                    <textarea
-                        className="w-full p-3 rounded-lg mb-3 transition-all duration-200"
-                        rows={4}
-                        placeholder="Beschreibe deinen Traum..."
-                        style={{
-                            ...getBackgroundStyle('normal'),
-                            ...getTextStyle(),
-                            border: '1px solid var(--accent-soft)'
-                        }}
-                    ></textarea>
-                ) : (
-                    <div
-                        className="w-full h-40 rounded-lg mb-3 flex items-center justify-center border-2 border-dashed transition-all duration-200"
-                        style={{
-                            ...getBackgroundStyle('normal'),
-                            borderColor: 'var(--accent-soft)'
-                        }}>
-                        <p style={getTextStyle('muted')}>Zeichne deinen Traum hier (Canvas-Platzhalter)</p>
-                    </div>
-                )}
-
-                <div className="flex justify-between">
-                    <div className="flex space-x-2">
-                        <button className="p-2 rounded-full transition-all duration-200 hover:transform hover:scale-110"
-                                style={getAccentStyle(true)}>
-                            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                                 stroke="currentColor">
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
-                                      d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"/>
-                            </svg>
-                        </button>
-                        <button className="p-2 rounded-full transition-all duration-200 hover:transform hover:scale-110"
-                                style={getAccentStyle(true)}>
-                            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                                 stroke="currentColor">
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
-                                      d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
-                            </svg>
-                        </button>
-                    </div>
-                    <button className="px-4 py-2 rounded-lg transition-all duration-200 hover:transform hover:scale-105"
-                            style={getBackgroundStyle('accent-gradient')}>
-                        Senden
-                    </button>
-                </div>
-            </div>
-
             {/* Personal Feed */}
             <div className={getCardStyle().className}
                  style={getCardStyle()}>
diff --git a/src/pages/Record.tsx b/src/pages/Record.tsx
new file mode 100644
index 0000000..589d5de
--- /dev/null
+++ b/src/pages/Record.tsx
@@ -0,0 +1,78 @@
+import {getAccentStyle, getBackgroundStyle, getCardStyle, getTextStyle} from "../styles/StyleUtils.ts";
+import {useState} from "react";
+
+export function Record() {
+    const [inputMode, setInputMode] = useState<'text' | 'drawing'>('text');
+
+    return (
+        <div className={getCardStyle().className}
+             style={getCardStyle()}>
+            <div className="flex justify-between items-center mb-3">
+                <h3 className="font-bold dream-title">Neuer Traum</h3>
+                <div className="flex rounded-lg overflow-hidden" style={{border: '1px solid var(--accent-soft)'}}>
+                    <button
+                        className={`px-3 py-1 text-sm transition-all duration-200`}
+                        onClick={() => setInputMode('text')}
+                        style={getAccentStyle(false, inputMode === 'text')}
+                    >
+                        Text
+                    </button>
+                    <button
+                        className={`px-3 py-1 text-sm transition-all duration-200`}
+                        onClick={() => setInputMode('drawing')}
+                        style={getAccentStyle(false, inputMode === 'drawing')}
+                    >
+                        Zeichnung
+                    </button>
+                </div>
+            </div>
+
+            {inputMode === 'text' ? (
+                <textarea
+                    className="w-full p-3 rounded-lg mb-3 transition-all duration-200"
+                    rows={4}
+                    placeholder="Beschreibe deinen Traum..."
+                    style={{
+                        ...getBackgroundStyle('normal'),
+                        ...getTextStyle(),
+                        border: '1px solid var(--accent-soft)'
+                    }}
+                ></textarea>
+            ) : (
+                <div
+                    className="w-full h-40 rounded-lg mb-3 flex items-center justify-center border-2 border-dashed transition-all duration-200"
+                    style={{
+                        ...getBackgroundStyle('normal'),
+                        borderColor: 'var(--accent-soft)'
+                    }}>
+                    <p style={getTextStyle('muted')}>Zeichne deinen Traum hier (Canvas-Platzhalter)</p>
+                </div>
+            )}
+
+            <div className="flex justify-between">
+                <div className="flex space-x-2">
+                    <button className="p-2 rounded-full transition-all duration-200 hover:transform hover:scale-110"
+                            style={getAccentStyle(true)}>
+                        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24"
+                             stroke="currentColor">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                                  d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"/>
+                        </svg>
+                    </button>
+                    <button className="p-2 rounded-full transition-all duration-200 hover:transform hover:scale-110"
+                            style={getAccentStyle(true)}>
+                        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24"
+                             stroke="currentColor">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                                  d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
+                        </svg>
+                    </button>
+                </div>
+                <button className="px-4 py-2 rounded-lg transition-all duration-200 hover:transform hover:scale-105"
+                        style={getBackgroundStyle('accent-gradient')}>
+                    Senden
+                </button>
+            </div>
+        </div>
+    );
+}