change some css class names &

RbAvci · May 20, 2024 · 848da09 · 848da09
1 parent bf34fc6
commit 848da09
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 76 deletions.
diff --git a/client/index.html b/client/index.html
@@ -1,13 +1,21 @@
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<link rel="icon" type="image/svg+xml" href="/icon.svg" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Video Recommendations</title>
-	</head>
-	<body>
-		<div id="root"></div>
-		<script type="module" src="/src/index.jsx"></script>
-	</body>
-</html>
+
+<head>
+	<meta charset="UTF-8" />
+	<link rel="icon" type="image/svg+xml" href="/icon.svg" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>Video Recommendations</title>
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link
+		href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+		rel="stylesheet">
+</head>
+
+<body>
+	<div id="root"></div>
+	<script type="module" src="/src/index.jsx"></script>
+</body>
+
+</html>
diff --git a/client/src/DeleteVideoRecommendation.jsx b/client/src/DeleteVideoRecommendation.jsx
@@ -23,7 +23,11 @@ const DeleteVideoRecommendation = ({ videoId, onDelete }) => {
 			});
 	};
 
-	return <button onClick={handleDelete}>Remove Video</button>;
+	return (
+		<button className="submit-button" onClick={handleDelete}>
+			Remove Video
+		</button>
+	);
 };
 
 export default DeleteVideoRecommendation;
diff --git a/client/src/NewVideoForm.css b/client/src/NewVideoForm.css
@@ -1,55 +1,46 @@
-/* CSS for NewVideoForm component */
-div {
-	max-width: 500px;
-	margin: 0 auto;
+.form-container {
 	padding: 20px;
 	border: 1px solid #ccc;
-	border-radius: 10px;
-	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-	background-color: #f9f9f9;
+	border-radius: 5px;
+	max-width: 400px;
+	margin: auto;
+	margin-top: 30px;
 }
 
-h2 {
+.form-header {
 	text-align: center;
-	color: #333;
 	margin-bottom: 20px;
 }
 
-form {
+.form-body {
 	display: flex;
 	flex-direction: column;
-	gap: 15px;
 }
 
-div > div {
-	display: flex;
-	flex-direction: column;
+.input-group {
+	margin-bottom: 15px;
 }
 
-label {
-	font-weight: bold;
+.input-group label {
 	margin-bottom: 5px;
-	color: #555;
+	display: block;
 }
 
-input {
-	padding: 10px;
-	border: 1px solid #ccc;
-	border-radius: 5px;
-	font-size: 16px;
+.input-group input {
+	width: 100%;
+	padding: 8px;
+	box-sizing: border-box;
 }
 
-button {
-	padding: 10px 20px;
+.submit-button {
+	padding: 10px 15px;
+	background-color:  #003b7a;
+	color: white;
 	border: none;
-	border-radius: 5px;
-	background-color: #007bff;
-	color: #fff;
-	font-size: 16px;
+	border-radius: 3px;
 	cursor: pointer;
-	transition: background-color 0.3s;
 }
 
-button:hover {
-	background-color: #0056b3;
+.submit-button:hover {
+	background-color: #218838;
 }
diff --git a/client/src/VideoRecommendations.css b/client/src/VideoRecommendations.css
@@ -1,29 +1,38 @@
 :root {
-	max-width: 95%;
-	margin: auto;
+    --primary-color: #007bff;
+    --container-width: 90%;
+    --gap-size: 20px;
+}
+
+.video-list-container {
+    padding: 20px;
+    margin: 0 auto;
+    width: var(--container-width);
 }
 
 .video-list {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-	gap: 20px;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: var(--gap-size);
+}
+
+.video-item {
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    background-color: #f9f9f9;
 }
 
-.video {
-	border: 1px solid #ccc;
-	border-radius: 10px;
-	padding: 20px;
-	background-color: #f9f9f9;
-	font-family: Arial, sans-serif;
+.video-title {
+    font-size: 18px;
+    margin-bottom: 10px;
+    font-family: Arial, sans-serif;
 }
 
-a {
-	color: #007bff;
-	/* text-decoration: none; */
-	font-family: Arial, sans-serif;
-	margin-bottom: 20px;
+.video-title a {
+    color: var(--primary-color);
 }
 
-a:hover {
-	text-decoration: underline;
+.video-title a:hover {
+    text-decoration: underline;
 }
diff --git a/client/src/VideoRecommendations.jsx b/client/src/VideoRecommendations.jsx
@@ -32,18 +32,20 @@ const VideoList = () => {
 	};
 
 	return (
-		<div className="video-list">
-			{videos.map((videoData, i) => (
-				<div className="video" data-testid="video" key={i}>
-					<div>
-						<a href={videoData.src}>{videoData.title}</a>
+		<div className="video-list-container">
+			<div className="video-list">
+				{videos.map((videoData, i) => (
+					<div className="video-item" data-testid="video" key={i}>
+						<div className="video-title">
+							<a href={videoData.src}>{videoData.title}</a>
+						</div>
+						<DeleteVideoRecommendation
+							videoId={videoData.id}
+							onDelete={handleDelete}
+						/>
 					</div>
-					<DeleteVideoRecommendation
-						videoId={videoData.id}
-						onDelete={handleDelete}
-					/>
-				</div>
-			))}
+				))}
+			</div>
 			<NewVideoForm onSubmit={fetchVideos} />
 		</div>
 	);

diff --git a/client/src/index.css b/client/src/index.css
@@ -1,8 +1,18 @@
 html,
-body {
-	margin: 0;
-}
-
 h1 {
 	text-align: center;
+	color: #003b7a;
+	font-family: "Roboto", sans-serif;
+	font-weight: 700;
+	font-style: italic;
+}
+
+.app {
+	display: grid;
+	margin: auto;
+	margin-bottom: 7rem;
+}
+
+body {
+	background-image: url("https://www.transparenttextures.com/patterns/cubes.png");
 }