UI improved

neuefische · Oct 25, 2024 · 8940aa9 · 8940aa9
1 parent abdd96c
commit 8940aa9
Show file tree

Hide file tree

Showing 13 changed files with 188 additions and 46 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -4,6 +4,9 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
+
     <script
             src="https://kit.fontawesome.com/9d18197c84.js"
             crossorigin="anonymous"

diff --git a/frontend/src/Component/App/Details/MovieControls.tsx b/frontend/src/Component/App/Details/MovieControls.tsx
@@ -99,10 +99,10 @@ export default function MovieControls(
     }
 
     return (
-        <div>
-            <button onClick={save} hidden={!editModeEnabled} disabled={saveButtonDisabled}>Save</button>
-            <button onClick={edit} hidden={editModeEnabled}>Edit</button>
-            <button onClick={remove} disabled={deleteButtonDisabled}>Delete</button>
+        <div className={"movie_controls"}>
+            <button className={"left_button"} onClick={save} hidden={!editModeEnabled} disabled={saveButtonDisabled}>Save</button>
+            <button className={"left_button"} onClick={edit} hidden={editModeEnabled}>Edit</button>
+            <button className={"right_button"} onClick={remove} disabled={deleteButtonDisabled}>Delete</button>
         </div>
     );
 }
diff --git a/frontend/src/Component/App/Details/MovieDetails.tsx b/frontend/src/Component/App/Details/MovieDetails.tsx
@@ -50,19 +50,26 @@ export default function MovieDetails({id}: {id: string}) {
 
     return (
         <div className="movie-details">
-            <form>
-                <div className={"movie_stats"}>
-                    <h4>Title</h4>
-                    <p>{movieData?.name}</p>
-                </div>
-                <h4>Is it watched already?</h4>
-                <p>{String(ratingData?.isWatched)}</p>
-                <h4>Rating:</h4>
-                <p>{ratingData?.rating} </p>
+            <div className="movie-details-row movie_stats">
+                <h3>Title</h3>
+                <p>{movieData?.name}</p>
+            </div>
 
-                {directorsData && <PersonList people={directorsData} legend={"Directed by"}/>}
-                {actorsData && <PersonList people={actorsData} legend={"Starring"}/>}
-            </form>
+            <div className="movie-details-row">
+                <h3>Is it watched already?</h3>
+                <p>{ratingData ? "Yes" : "No"}</p>
+            </div>
+
+            <div className="movie-details-row">
+                <h3>Rating / Priority:</h3>
+                <p>{ratingData?.rating}</p>
+            </div>
+
+            <div className="people">
+                {directorsData && <PersonList people={directorsData} legend={"Directed by:"}/>}
+                {actorsData && <PersonList people={actorsData} legend={"Starring:"}/>}
+            </div>
         </div>
+
     );
 }
diff --git a/frontend/src/Component/App/Details/MovieDetails/PersonList.tsx b/frontend/src/Component/App/Details/MovieDetails/PersonList.tsx
@@ -8,7 +8,9 @@ export default function PersonList({ legend, people }: { legend: string, people:
             {Array.isArray(people) && people.length > 0 ? (
                 people.map((person) => <Person key={person.id} person={person} />)
             ) : (
-                <div>No people available</div>
+                <div>
+                    {legend === "Directed by" ? "No directors chosen yet" : legend === "Starring" ? "No actors chosen yet" : "No one selected yet"}
+                </div>
             )}
         </fieldset>
     );

diff --git a/frontend/src/Component/App/Details/MovieDetails/PersonList/Person.tsx b/frontend/src/Component/App/Details/MovieDetails/PersonList/Person.tsx
@@ -1,5 +1,5 @@
 import PersonType from "../../../../../Type/PersonType.tsx";
 
 export default function Person({person}: { person: PersonType }) {
-    return <input value={person.name} disabled/>
+    return <p>{person.name}</p>
 }
diff --git a/frontend/src/Component/App/EditMovieForm/EditablePersonList.tsx b/frontend/src/Component/App/EditMovieForm/EditablePersonList.tsx
@@ -33,14 +33,14 @@ export default function EditablePersonList({legend, staff, setStaff, autocomplet
             <button onClick={addPerson} disabled={!person.name}>Add</button>
             {Array.isArray(staff) && staff.length > 0 ? (
                     staff.map((person) => (
-                        <div key={person.id} className="person-list">
+                        <div key={person.id} className="person-list_inner">
                             <Person key={person.id} person={person} />
                             <DeletePersonButton person={person} setStaff={setStaff} staff={staff} deleteUrl={deleteUrl} movieId={movieId}/>
                         </div>
                     ))
                 )
                 : (
-                <div>No people available</div>
+                <div>None was added yet</div>
             )}
         </fieldset>
     );

diff --git a/frontend/src/Component/App/Footer.tsx b/frontend/src/Component/App/Footer.tsx
@@ -1,7 +1,8 @@
 export default function Footer() {
     return (
         <div className={"footer"}>
-            Made with <span className="heart">&#10084; </span>by Team 2
+            <hr></hr>
+            <p>Made with <span className="heart">&#10084; </span>by Team 2</p>
         </div>
     );
 }
diff --git a/frontend/src/Component/App/Header.tsx b/frontend/src/Component/App/Header.tsx
@@ -46,17 +46,20 @@ export default function Header(
     }, []);
 
     return (
+        <div>
         <nav>
             <Link to="/" className="navbar-title">
                 <i className="fa-duotone fa-solid fa-video"></i>
                 <h1>Movie Library</h1>
             </Link>
             <div className={"navbar-user"}>
-                <p>Hello {userName}</p>
+                <p>Hello, {userName}</p>
                 <button onClick={handleButtonClick}>
                     {userName ? 'Logout' : 'Login'}
                 </button>
             </div>
         </nav>
+            <hr></hr>
+        </div>
     );
 }
diff --git a/frontend/src/Component/App/Main.tsx b/frontend/src/Component/App/Main.tsx
@@ -65,7 +65,9 @@ export default function Main(
         return (
             <>
                 <div className={"main_container"}>
-                    Please log in
+                    <div className={"loading_outer"}>
+                        <h2 className={"loading_inner"}>Please log in</h2>
+                    </div>
                 </div>
             </>
         );
@@ -82,7 +84,8 @@ export default function Main(
                                setRatingData={setRatingData} actorsData={actorsData}
                                setActorsData={setActorsData} directorsData={directorsData}
                                setDirectorsData={setDirectorsData}/>
-                <CreateButton movieData={movieData} ratingData={ratingData} setIsUpdated={setIsUpdated} actorData={actorsData} directorData={directorsData}/>
+                <CreateButton movieData={movieData} ratingData={ratingData} setIsUpdated={setIsUpdated}
+                              actorData={actorsData} directorData={directorsData}/>
             </div>
         </>
     );

diff --git a/frontend/src/Component/App/Main/CreateButton.tsx b/frontend/src/Component/App/Main/CreateButton.tsx
@@ -76,6 +76,6 @@ export default function CreateButton(
     }
 
     return (
-        <button onClick={create}>Create</button>
+        <button className={"create"} onClick={create}>Create</button>
     );
 }
diff --git a/frontend/src/Component/App/Main/ListHeaders.tsx b/frontend/src/Component/App/Main/ListHeaders.tsx
@@ -1,11 +1,11 @@
 export default function ListHeaders({ isWatched }: { isWatched: boolean }) {
     return (
         <div className={"list-element-header"}>
-            <span className={"movie-name"}>Name</span>
+            <span className={"movie-name"}>Name:</span>
             <span className={"movie-rating-header"}>
-                {isWatched ? "Rating" : "Priority"}
+                {isWatched ? "Rating:" : "Priority:"}
             </span>
-            <span className={"edit-button"}>Actions</span>
+            <span className={"edit-button"}>Actions:</span>
         </div>
     );
 }
diff --git a/frontend/src/Component/App/Main/WatchedTab.tsx b/frontend/src/Component/App/Main/WatchedTab.tsx
@@ -7,7 +7,6 @@ export default function WatchedTab({data}: { data: MovieRatingType[] }) {
         <div className={"watchedTab"}>
             <h2>Already watched movies:</h2>
             <WatchedList data={data}/>
-
         </div>
     );
 }