design update

frontend/src/screens/CreateStation.jsx

@@ -1,15 +1,51 @@
 import React, { useState } from "react";
 import { createStation } from "../utils/StationsCreate";
-
-// I UNDERSTAND THIS!! --Noah
+import { useNavigate } from "react-router-dom";
 
 function CreateStation() {
+  const navigate = useNavigate();
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [joinCode, setJoinCode] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [isCopied, setIsCopied] = useState(false);
 
-  const handleCreateStation = () => {
-    setJoinCode(createStation(name, description));
+  const handleCreateStation = async () => {
+    if (!name.trim() || !description.trim()) {
+      setError("Please fill in all fields");
+      return;
+    }
+
+    setIsLoading(true);
+    setError("");
+
+    try {
+      const code = await createStation(name, description);
+      setJoinCode(code);
+    } catch (error) {
+      setError(error.message || "Failed to create station");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoToStation = () => {
+    // Navigate to the station or home page
+    navigate("/");
+  };
+
+  const handleCopyCode = async () => {
+    try {
+      await navigator.clipboard.writeText(joinCode);
+      setIsCopied(true);
+      // Reset the animation after 2 seconds
+      setTimeout(() => {
+        setIsCopied(false);
+      }, 2000);
+    } catch (err) {
+      console.error('Failed to copy: ', err);
+    }
   };
 
   return (
@@ -37,25 +73,112 @@ function CreateStation() {
           <div className="create-station-content">
             <header className="create-station-header">
               <h1>Create a Station on Serena</h1>
+              <p className="create-station-subtitle">Start your own collaborative music experience</p>
             </header>
 
-      <main className="create-station-content">
-        <textarea onChange={(e) => setName(e.target.value)} />
-        <textarea onChange={(e) => setDescription(e.target.value)} />
+            {!joinCode ? (
+              <form className="create-station-form" onSubmit={(e) => e.preventDefault()}>
+                <div className="form-group">
+                  <label htmlFor="station-name">Station Name</label>
+                  <input
+                    id="station-name"
+                    type="text"
+                    placeholder="Enter your station name..."
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    disabled={isLoading}
+                  />
+                </div>
 
-        <button
-          className="create-station-final-btn"
-          onClick={handleCreateStation}
-          disabled={!name || !description}
-        >
-          Create Radio Station
-        </button>
+                <div className="form-group">
+                  <label htmlFor="station-description">Description</label>
+                  <textarea
+                    id="station-description"
+                    placeholder="Describe your station's vibe..."
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                    disabled={isLoading}
+                    rows={4}
+                  />
+                </div>
 
-        <p>your joinCode: {joinCode}</p>
-      </main>
-    </div>
-    </div>
-    </div>
+                {error && (
+                  <div className="error-message">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                      <path d="M12 2L13.09 8.26L22 9L13.09 9.74L12 16L10.91 9.74L2 9L10.91 8.26L12 2Z"/>
+                    </svg>
+                    {error}
+                  </div>
+                )}
+
+                <button
+                  type="button"
+                  className="create-station-final-btn"
+                  onClick={handleCreateStation}
+                  disabled={!name.trim() || !description.trim() || isLoading}
+                >
+                  {isLoading ? (
+                    <>
+                      <div className="loading-spinner"></div>
+                      Creating Station...
+                    </>
+                  ) : (
+                    <>
+                      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M12 2L13.09 8.26L22 9L13.09 9.74L12 16L10.91 9.74L2 9L10.91 8.26L12 2Z"/>
+                      </svg>
+                      Create Radio Station
+                    </>
+                  )}
+                </button>
+              </form>
+            ) : (
+              <div className="success-state">
+                <div className="success-icon">
+                  <svg width="60" height="60" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+                  </svg>
+                </div>
+                <h2>Station Created Successfully!</h2>
+                <p>Your station is ready to go. Share this join code with your friends:</p>
+                
+                <div className="join-code-display">
+                  <span className="join-code">{joinCode}</span>
+                  <button 
+                    className={`copy-btn ${isCopied ? 'copied' : ''}`}
+                    onClick={handleCopyCode}
+                  >
+                    {isCopied ? (
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+                      </svg>
+                    ) : (
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
+                      </svg>
+                    )}
+                  </button>
+                </div>
+
+                {isCopied && (
+                  <div className="copy-feedback">
+                    <span className="copy-success-message">
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+                      </svg>
+                      Copied to clipboard!
+                    </span>
+                  </div>
+                )}
+
+                <button className="go-to-station-btn" onClick={handleGoToStation}>
+                  Go to Home
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
     </div>
   );
 }

frontend/src/screens/Home.jsx

@@ -14,25 +14,29 @@ function Home() {
 
   return (
     <div className="home-container">
-      <div className="content">
-        <h1 className="title">Radio Station Hub</h1>
-        <p className="subtitle">
-          Create or join a radio station to share music with friends
-        </p>
+      <div className="home-content">
+        <div className="home-header">
+          <h1 className="home-title">Serena Station Hub</h1>
+          <p className="home-subtitle">
+            Create or join a radio station to share music with friends
+          </p>
+        </div>
 
-        <div className="button-container">
+        <div className="home-actions">
           <button
-            className="action-button primary"
+            className="home-btn home-btn-primary"
             onClick={handleCreateStation}
           >
-            Create Radio Station
+            <span className="btn-icon">🎵</span>
+            Create Station
           </button>
 
           <button
-            className="action-button secondary"
+            className="home-btn home-btn-secondary"
             onClick={handleJoinStation}
           >
-            Join Radio Station
+            <span className="btn-icon">🎧</span>
+            Join Station
           </button>
         </div>
       </div>

frontend/src/screens/JoinStation.jsx

@@ -5,17 +5,23 @@ import { getStations } from "../utils/GetStations";
 function JoinStation() {
   const navigate = useNavigate();
   const [stations, setStations] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
 
   const handleJoinStation = (stationID) => {
-    // console.log("Joining station with ID:" + stationID);
-
     navigate(`/station/${stationID}`);
   };
 
   useEffect(() => {
     async function fetchStations() {
-      const result = await getStations();
-      setStations(result);
+      setIsLoading(true);
+      try {
+        const result = await getStations();
+        setStations(result);
+      } catch (error) {
+        console.error("Failed to fetch stations:", error);
+      } finally {
+        setIsLoading(false);
+      }
     }
     fetchStations();
   }, []);
@@ -40,28 +46,66 @@ function JoinStation() {
           </div>
         </div>
 
-        {/* Right Section - Join Station Form */}
+        {/* Right Section - Join Station Content */}
         <div className="join-station-right-section">
           <div className="join-station-content">
             <header className="join-station-header">
               <h1>Join a Station on Serena</h1>
+              <p className="join-station-subtitle">Connect to an existing collaborative music experience</p>
             </header>
 
-      <main className="join-station-content">
-        {stations.map((station, index) => {
-          return (
-            <div key={index}>
-              <p>Station Name: {station.name}</p>
-              <p>Station Description: {station.description}</p>
-              <button onClick={() => handleJoinStation(station.id)}>
-                join this station
-              </button>
+            <div className="join-station-body">
+              {isLoading ? (
+                <div className="loading-state">
+                  <div className="loading-spinner"></div>
+                  <p>Loading available stations...</p>
+                </div>
+              ) : stations.length === 0 ? (
+                <div className="empty-state">
+                  <div className="empty-icon">
+                    <svg width="60" height="60" viewBox="0 0 24 24" fill="currentColor">
+                      <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
+                    </svg>
+                  </div>
+                  <h3>No stations available</h3>
+                  <p>There are currently no active stations to join. Create one to get started!</p>
+                  <button 
+                    className="create-station-btn"
+                    onClick={() => navigate('/create-station')}
+                  >
+                    Create Station
+                  </button>
+                </div>
+              ) : (
+                <div className="stations-grid">
+                  <h2>Available Stations</h2>
+                  <div className="stations-list">
+                    {stations.map((station, index) => (
+                      <div key={index} className="station-card">
+                        <div className="station-info">
+                          <h3>{station.name}</h3>
+                          <p className="station-description">{station.description}</p>
+                          <div className="station-meta">
+                            <span className="station-id">ID: {station.id}</span>
+                          </div>
+                        </div>
+                        <button 
+                          className="join-station-btn"
+                          onClick={() => handleJoinStation(station.id)}
+                        >
+                          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M8 5v14l11-7z"/>
+                          </svg>
+                          Join Station
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
             </div>
-          );
-        })}
-      </main>
-      </div>
-      </div>
+          </div>
+        </div>
       </div>
     </div>
   );

frontend/src/screens/StationPage.jsx

@@ -1,35 +1,130 @@
+import React, { useState } from "react";
 import { useParams } from "react-router-dom";
-import React, { useState, useEffect } from "react";
 import AddSongModal from "./AddSongModal";
 import LoginButton from "../components/LoginButton";
 import { addClientToStation } from "../utils/AddClientToStation";
 
 function StationPage() {
-  const { stationID } = useParams();
-  const [clientToken, setClientToken] = useState("");
+  const { id: stationId } = useParams();
+  const [setClientToken] = useState("");
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [accessDenied, setAccessDenied] = useState(true);
+  const [currentSong] = useState({ progress: 0, duration: 1 });
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
 
   const [userName, setUserName] = useState("");
   const [joinCode, setJoinCode] = useState("");
 
   const auth = async () => {
+    if (!userName.trim() || !joinCode.trim()) {
+      setError("Please fill in all fields");
+      return;
+    }
+
+    setIsLoading(true);
+    setError("");
+
     try {
       const token = await addClientToStation(userName, joinCode);
       setClientToken(token);
       setAccessDenied(false);
     } catch (error) {
       console.error("Auth failed:", error);
+      setError(error.message || "Failed to join station");
       setAccessDenied(true);
+    } finally {
+      setIsLoading(false);
     }
   };
 
   if (accessDenied) {
     return (
-      <div>
-        <textarea onChange={(e) => setUserName(e.target.value)} />
-        <textarea onChange={(e) => setJoinCode(e.target.value)} />
-        <button onClick={auth}>Access this RadioTower</button>
+      <div className="join-station-container">
+        <div className="join-station-main">
+          {/* Left Section - Vinyl Animation */}
+          <div className="join-station-left-section">
+            <div className="join-station-vinyl-container">
+              <div className="join-station-vinyl-record">
+                <div className="vinyl-center"></div>
+                <div className="vinyl-grooves"></div>
+              </div>
+              
+              {/* Animated Music Notes */}
+              <div className="join-station-music-notes">
+                <div className="music-note note-1">♪</div>
+                <div className="music-note note-2">♫</div>
+                <div className="music-note note-3">♪</div>
+              </div>
+            </div>
+          </div>
+
+          {/* Right Section - Authentication Form */}
+          <div className="join-station-right-section">
+            <div className="join-station-content">
+              <header className="join-station-header">
+                <h1>Join Station {stationId}</h1>
+                <p className="join-station-subtitle">Enter your details to access this collaborative music experience</p>
+              </header>
+
+              <form className="create-station-form" onSubmit={(e) => e.preventDefault()}>
+                <div className="form-group">
+                  <label htmlFor="user-name">Your Name</label>
+                  <input
+                    id="user-name"
+                    type="text"
+                    placeholder="Enter your name..."
+                    value={userName}
+                    onChange={(e) => setUserName(e.target.value)}
+                    disabled={isLoading}
+                  />
+                </div>
+
+                <div className="form-group">
+                  <label htmlFor="join-code">Join Code</label>
+                  <input
+                    id="join-code"
+                    type="text"
+                    placeholder="Enter the station join code..."
+                    value={joinCode}
+                    onChange={(e) => setJoinCode(e.target.value)}
+                    disabled={isLoading}
+                  />
+                </div>
+
+                {error && (
+                  <div className="error-message">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                      <path d="M12 2L13.09 8.26L22 9L13.09 9.74L12 16L10.91 9.74L2 9L10.91 8.26L12 2Z"/>
+                    </svg>
+                    {error}
+                  </div>
+                )}
+
+                <button
+                  type="button"
+                  className="create-station-final-btn"
+                  onClick={auth}
+                  disabled={!userName.trim() || !joinCode.trim() || isLoading}
+                >
+                  {isLoading ? (
+                    <>
+                      <div className="loading-spinner"></div>
+                      Joining Station...
+                    </>
+                  ) : (
+                    <>
+                      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M8 5v14l11-7z"/>
+                      </svg>
+                      Join RadioTower
+                    </>
+                  )}
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
       </div>
     );
   }