add show all grads button & some css

RbAvci · Aug 1, 2024 · b9ac5d1 · b9ac5d1
1 parent 465a673
commit b9ac5d1
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 20 deletions.
diff --git a/client/src/index.html b/client/src/index.html
@@ -1,6 +1,8 @@
 <!doctype html>
 <html lang="en">
 	<head>
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		<link

diff --git a/client/src/pages/MentorDashboard.css b/client/src/pages/MentorDashboard.css
@@ -10,13 +10,12 @@
     justify-content: space-between;
     align-items: center;
     padding: 20px;
-    margin-top: 75px
-   ;
+    margin-top: 75px;
 }
 
 .mentor-dashboard header h1 {
     font-family: "Lato", sans-serif;
-  font-weight: 300;
+    font-weight: 300;
     color:  #333333; 
     text-decoration: none;
 }
@@ -27,9 +26,7 @@
     color:  #333333; 
     font-size: 16px;
     font-family: "Lato", sans-serif;
-  font-weight: 400;
-  font-style: normal;
-
+    font-weight: 400;
 }
 
 .header-links a:hover {
@@ -41,10 +38,11 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 3rem;
+    gap: 10px;
     padding: 1rem;
     border-radius: 1rem;
     box-shadow: 0 5px 20px 10px rgba(0, 0, 0, 0.2);
+    margin-bottom: 20px;
 }
 
 #filter-search input,
@@ -56,6 +54,7 @@
     border: 1px solid #A9A9A9; 
     border-radius: 4px;
     box-sizing: border-box;
+    padding-left: 50px;
 }
 
 #filter-search input:focus,
@@ -79,7 +78,6 @@
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     text-align: center;
     width: 220px;
-    text-decoration: none;
     color: #333333; 
     transition: box-shadow 0.3s ease; 
 }
@@ -88,7 +86,8 @@
     border-radius: 50%;
     width: 100px;
     height: 100px;
-    margin-bottom: 10px; }
+    margin-bottom: 10px; 
+}
 
 .grad-card h3 {
     margin: 10px 0;
@@ -102,4 +101,35 @@
 
 .grad-card:hover {
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); 
-}
+}
+
+#show-all-grads {
+    padding: 10px 15px;
+    background-color: #EE4434; 
+    color: white;
+    font-weight: bold;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+#show-all-grads:hover {
+    background-color: #d32f2f; 
+}
+
+.search-container {
+    position: relative;
+}
+
+.search-icon {
+    position: absolute;
+    top: 50%;
+    left: 10px;
+    transform: translateY(-50%);
+    color: #888888; 
+    pointer-events: none;
+}
+
+#search {
+    padding-left: 30px;
+}
diff --git a/client/src/pages/MentorDashboard.js b/client/src/pages/MentorDashboard.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import "./MentorDashboard.css";
 import GradCard from "../components/GradsCards/GradCard";
+import "@fortawesome/fontawesome-free/css/all.min.css";
 
 const MentorDashboard = () => {
 	const [grads, setGrads] = useState([]);
@@ -35,17 +36,23 @@ const MentorDashboard = () => {
 			</header>
 
 			<section id="filter-search">
-				<input
-					type="text"
-					id="search"
-					placeholder="Search by name & skill..."
-				/>
+				<div className="search-container">
+					<i className="fas fa-search search-icon"></i>
+					<input
+						type="text"
+						id="search"
+						placeholder="Search by name & skill..."
+					/>
+				</div>
 				<input type="text" id="skill-filter" placeholder="Filter by skill..." />
-				<select id="sort-order">
-					<option value="">Sort by activity score</option>
-					<option value="asc">Ascending</option>
-					<option value="desc">Descending</option>
-				</select>
+				<div className="sort-select-container">
+					<select id="sort-order">
+						<option value="">Sort by activity score</option>
+						<option value="asc">Ascending</option>
+						<option value="desc">Descending</option>
+					</select>
+				</div>
+				<button id="show-all-grads">Show All Grads</button>
 			</section>
 
 			<section id="grads-cards">

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -73,6 +73,7 @@
 	},
 	"dependencies": {
 		"@babel/runtime": "^7.22.15",
+		"@fortawesome/fontawesome-free": "^6.6.0",
 		"dotenv": "^16.3.1",
 		"express": "^4.18.2",
 		"helmet": "^7.0.0",