From d5cc27ed032fa4cf9588b30fe0c89d0e64b1d913 Mon Sep 17 00:00:00 2001
From: candifloss <candifloss@candifloss.cc>
Date: Fri, 1 Nov 2024 21:36:10 +0530
Subject: [PATCH] re-structured and re-styled search page

---
 test/css/search.css    | 22 +++++++++++++-------
 test/html/search.html  | 47 +++++++++---------------------------------
 test/scss/_colors.scss | 13 +++++++++---
 test/scss/search.scss  | 31 ++++++++++++++++++++--------
 4 files changed, 57 insertions(+), 56 deletions(-)

diff --git a/test/css/search.css b/test/css/search.css
index 49771f0..f87b615 100644
--- a/test/css/search.css
+++ b/test/css/search.css
@@ -101,9 +101,6 @@ body .search-page .search-results .search-result {
   transition: background-color 0.3s;
   background-color: #e1e1e1;
 }
-body .search-page .search-results .search-result:hover {
-  background-color: #b9b9b9;
-}
 body .search-page .search-results .search-result .details {
   display: flex;
   flex-direction: column;
@@ -112,14 +109,25 @@ body .search-page .search-results .search-result .details {
 body .search-page .search-results .search-result .details .primary-key {
   font-size: 16px;
   margin-bottom: 3px;
+  color: #166264;
 }
 body .search-page .search-results .search-result .details .info-row {
   display: flex;
   gap: 10px;
 }
 body .search-page .search-results .search-result .details .info-row * {
-  font-size: 15px;
-  color: #666;
+  font-size: 16px;
+  color: #666666;
+}
+body .search-page .search-results .search-result:hover {
+  background-color: #b0b0b0;
+  cursor: pointer;
+}
+body .search-page .search-results .search-result:hover .details .primary-key {
+  font-weight: bold;
+}
+body .search-page .search-results .search-result:hover .details .info-row * {
+  color: #424242;
 }
 body .search-page .search-results .search-result .actions {
   display: flex;
@@ -139,7 +147,7 @@ body .search-page .search-results .search-result .actions button.edit {
   color: #4e4e4e;
 }
 body .search-page .search-results .search-result .actions button.edit:hover {
-  background-color: #3b8084;
+  background-color: #5ca4a8;
 }
 body .search-page .search-results .search-result .actions button.delete {
   background-color: rgba(245, 245, 245, 0.9);
@@ -149,7 +157,7 @@ body .search-page .search-results .search-result .actions button.delete:hover {
   background-color: #c96f6f;
 }
 body .search-page .search-results .search-result .actions button:hover {
-  color: #fff;
+  color: #ffffff;
 }
 body .search-page .search-results .search-result:hover .actions {
   visibility: visible;
diff --git a/test/html/search.html b/test/html/search.html
index 211c257..efe2519 100644
--- a/test/html/search.html
+++ b/test/html/search.html
@@ -19,9 +19,9 @@
 		  <button type="submit">Search</button>
 		</form>
 	  
-		<ul class="search-results">
+		<div class="search-results">
 
-			<li class="search-result">
+			<a class="search-result" href="/user/realobamna">
                 <div class="details">
                     <span class="primary-key username">realobamna</span>
                     <div class="info-row">
@@ -33,9 +33,9 @@
                     <button class="edit">Edit</button>
                     <button class="delete">Delete</button>
                 </div>
-            </li>
+            </a>
 
-            <li class="search-result">
+            <a class="search-result" href="/user/obama">
                 <div class="details">
                     <span class="primary-key username">obama</span>
                     <div class="info-row">
@@ -47,8 +47,8 @@
                     <button class="edit">Edit</button>
                     <button class="delete">Delete</button>
                 </div>
-            </li>
-			<li class="search-result">
+            </a>
+			<a class="search-result" href="/user/realobamna">
                 <div class="details">
                     <span class="primary-key username">realobamna</span>
                     <div class="info-row">
@@ -60,9 +60,9 @@
                     <button class="edit">Edit</button>
                     <button class="delete">Delete</button>
                 </div>
-            </li>
+            </a>
 
-            <li class="search-result">
+            <a class="search-result" href="/user/obama">
                 <div class="details">
                     <span class="primary-key username">obama</span>
                     <div class="info-row">
@@ -74,37 +74,10 @@
                     <button class="edit">Edit</button>
                     <button class="delete">Delete</button>
                 </div>
-            </li>
-			<li class="search-result">
-                <div class="details">
-                    <span class="primary-key username">realobamna</span>
-                    <div class="info-row">
-                        <span class="employee-id">12345</span>
-                        <span class="full-name">John Doe Obama</span>
-                    </div>
-                </div>
-                <div class="actions">
-                    <button class="edit">Edit</button>
-                    <button class="delete">Delete</button>
-                </div>
-            </li>
-
-            <li class="search-result">
-                <div class="details">
-                    <span class="primary-key username">obama</span>
-                    <div class="info-row">
-                        <span class="employee-id">19845</span>
-                        <span class="full-name">Fake Obama</span>
-                    </div>
-                </div>
-                <div class="actions">
-                    <button class="edit">Edit</button>
-                    <button class="delete">Delete</button>
-                </div>
-            </li>
+            </a>
 		  <!-- Additional search results go here -->
 
-		</ul>
+		</div>
 	  </div>
 	  
 </body>
diff --git a/test/scss/_colors.scss b/test/scss/_colors.scss
index b7f541b..a078d6a 100644
--- a/test/scss/_colors.scss
+++ b/test/scss/_colors.scss
@@ -108,15 +108,22 @@ $search-page-search-button-active-color: $user-form-checkbox-button-hover-color;
 $search-page-search-button-active-text-color: $user-form-checkbox-button-hover-text-color; 
 $search-page-search-button-active-border-color: $user-form-checkbox-button-hover-border-color; 
 
+// Search res items
 // Search result normal
+$search-res-item-color: #e1e1e1;
+$search-res-item-hover-color: #b0b0b0;
 $search-res-item-border-color: #e0e0e0;
-$search-res-item-hover-color: #b9b9b9;
+
+$search-res-item-detail-primary-key-color: #166264;
+$search-res-item-detail-info-row-color: #666666;
 
 // Search res item edit button
 $search-res-edit-item-button-color: $user-form-checkbox-button-color;
 $search-res-edit-item-button-text-color: $user-form-checkbox-button-text-color;
-$search-res-edit-item-button-hover-color: $user-form-checkbox-button-active-color;
+$search-res-edit-item-button-hover-color: #5ca4a8;
 // Search res item delete button
 $search-res-delete-item-button-color: $user-form-checkbox-button-color;
 $search-res-delete-item-button-text-color: $user-form-checkbox-button-text-color;
-$search-res-delete-item-button-hover-color: #c96f6f;
\ No newline at end of file
+$search-res-delete-item-button-hover-color: #c96f6f;
+$search-res-item-action-button-hover-text-color: #ffffff;
+
diff --git a/test/scss/search.scss b/test/scss/search.scss
index ef8a61b..b52cf0f 100644
--- a/test/scss/search.scss
+++ b/test/scss/search.scss
@@ -97,11 +97,8 @@ body {
 				padding: 12px 10px;
 				border-radius: $input-field-border-radius;
 				transition: background-color 0.3s;
-				background-color: #e1e1e1;
-		
-				&:hover {
-					background-color: $search-res-item-hover-color;
-				}
+				background-color: $search-res-item-color;
+
 		
 				.details {
 					display: flex;
@@ -111,6 +108,7 @@ body {
 					.primary-key {
 						font-size: 16px;
 						margin-bottom: 3px;
+						color: $search-res-item-detail-primary-key-color;
 					}
 		
 					.info-row {
@@ -118,9 +116,24 @@ body {
 						gap: 10px;
 		
 						* {
-							font-size: 15px;
-							//font-weight: 500;
-							color: #666;
+							font-size: 16px;
+							color: $search-res-item-detail-info-row-color;
+						}
+					}
+				}
+						
+				&:hover {
+					background-color: $search-res-item-hover-color;
+					cursor: pointer;
+
+					.details {
+						.primary-key {
+							font-weight: bold;
+						}
+						.info-row {
+							* {
+								color: #424242;
+							}
 						}
 					}
 				}
@@ -157,7 +170,7 @@ body {
 						}
 
 						&:hover {
-							color: #fff;
+							color: $search-res-item-action-button-hover-text-color;
 						}
 					}
 				}