From 848da094a0cec891c381bbe891e2717ecbaecf6e Mon Sep 17 00:00:00 2001 From: RbAvci Date: Tue, 21 May 2024 00:23:57 +0100 Subject: [PATCH] change some css class names & --- client/index.html | 30 +++++++++----- client/src/DeleteVideoRecommendation.jsx | 6 ++- client/src/NewVideoForm.css | 53 ++++++++++-------------- client/src/VideoRecommendations.css | 45 ++++++++++++-------- client/src/VideoRecommendations.jsx | 24 ++++++----- client/src/index.css | 18 ++++++-- 6 files changed, 100 insertions(+), 76 deletions(-) diff --git a/client/index.html b/client/index.html index c584b3956c..39bb6da37a 100644 --- a/client/index.html +++ b/client/index.html @@ -1,13 +1,21 @@ - - - - - Video Recommendations - - -
- - - + + + + + + Video Recommendations + + + + + + +
+ + + + \ No newline at end of file diff --git a/client/src/DeleteVideoRecommendation.jsx b/client/src/DeleteVideoRecommendation.jsx index b7b9c90e93..6cf7ff71be 100644 --- a/client/src/DeleteVideoRecommendation.jsx +++ b/client/src/DeleteVideoRecommendation.jsx @@ -23,7 +23,11 @@ const DeleteVideoRecommendation = ({ videoId, onDelete }) => { }); }; - return ; + return ( + + ); }; export default DeleteVideoRecommendation; diff --git a/client/src/NewVideoForm.css b/client/src/NewVideoForm.css index f4143c99f9..797e1da4eb 100644 --- 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 index 6c196fe712..c736f110f0 100644 --- 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 index dcb38c468e..6db7563a77 100644 --- a/client/src/VideoRecommendations.jsx +++ b/client/src/VideoRecommendations.jsx @@ -32,18 +32,20 @@ const VideoList = () => { }; return ( -
- {videos.map((videoData, i) => ( -
-
- {videoData.title} +
+
+ {videos.map((videoData, i) => ( + - -
- ))} + ))} +
); diff --git a/client/src/index.css b/client/src/index.css index eae06a0a27..212454c25a 100644 --- 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"); }