Search Bar.css updated

Author: Zachary48

src/components/SearchResults.css

@@ -1,44 +1,59 @@
-/* Header.css */
-.home-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background-color: #f5f5f5;
-    padding: 10px 20px;
-  }
-  
-  .logo {
-    font-size: 24px;
-    font-weight: bold;
-    cursor: pointer;
-  }
-  
-  .search-container {
-    flex-grow: 1;
-    margin: 0 20px;
-  }
-  
-  .search-bar {
-    width: 100%;
-    padding: 8px;
-    font-size: 16px;
-  }
-  
-  .header-buttons {
-    display: flex;
-    gap: 10px;
-  }
-  
-  .sign-in-button {
-    padding: 8px 16px;
-    font-size: 16px;
-    cursor: pointer;
-    background-color: #007bff;
-    color: #fff;
-    border: none;
-    border-radius: 4px;
-  }
-  
-  .sign-in-button:hover {
-    background-color: #0056b3;
-  }
+/* Outer container */
+.search-results-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;         /* Center children horizontally */
+  padding: 2rem;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+}
+
+/* Heading */
+.search-results-container h1 {
+  color: #004d00;
+  font-size: 2rem;
+  margin-bottom: 2rem;
+  text-align: center;
+}
+
+/* Results list */
+.search-results-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  max-width: 800px;             /* Restrict width for centering */
+}
+
+/* Each result card */
+.search-result-item {
+  background-color: white;
+  border: 1px solid #ddd;
+  border-left: 5px solid #007f3f; /* Highlight with green edge */
+  padding: 1rem 1.5rem;
+  margin-bottom: 1.5rem;
+  border-radius: 8px;
+  transition: box-shadow 0.3s ease;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+}
+
+.search-result-item:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* Title */
+.search-result-item h3 {
+  margin: 0;
+  color: #003300;
+  font-size: 1.3rem;
+}
+
+/* Description and field labels */
+.search-result-item p {
+  margin: 0.5rem 0;
+  color: #333;
+}
+
+.search-result-item strong {
+  color: #004d00;
+}

src/components/SearchResults.jsx

@@ -1,6 +1,7 @@
 // SearchResults.jsx
 import React, { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
+import './SearchResults.css';
 
 const SearchResults = () => {
   const location = useLocation();
@@ -38,29 +39,29 @@ const SearchResults = () => {
     }
   }, [query]);
 
-  return (
-    <div>
-      <h1>Search Results for "{query || ''}"</h1>
-      {loading ? (
-        <p>Loading...</p>
-      ) : error ? (
-        <p style={{ color: 'red' }}>{error}</p>
-      ) : results.length > 0 ? (
-        <ul>
-          {results.map((result) => (
-            <li key={result.id}>
-              <h3>{result.title || 'No Title Available'}</h3>
-              <p>{result.body || 'No Description Available'}</p>
-              <p><strong>Organization:</strong> {result.organization || 'N/A'}</p>
-              <p><strong>Work Type:</strong> {result.workType || 'N/A'}</p>
-            </li>
-          ))}
-        </ul>
-      ) : (
-        <p>No results found.</p>
-      )}
-    </div>
-  );
-};
+return (
+  <div className="search-results-container">
+    <h1>Search Results for "{query || ''}"</h1>
+    {loading ? (
+      <p>Loading...</p>
+    ) : error ? (
+      <p style={{ color: 'red' }}>{error}</p>
+    ) : results.length > 0 ? (
+      <ul className="search-results-list">
+        {results.map((result) => (
+          <li key={result.id} className="search-result-item">
+            <h3>{result.title || 'No Title Available'}</h3>
+            <p>{result.body || 'No Description Available'}</p>
+            <p><strong>Organization:</strong> {result.organization || 'N/A'}</p>
+            <p><strong>Work Type:</strong> {result.workType || 'N/A'}</p>
+          </li>
+        ))}
+      </ul>
+    ) : (
+      <p>No results found.</p>
+    )}
+  </div>
+);
+}
 
 export default SearchResults;