Merge pull request #10 from mahdinoori2000/feature/Fix-delete-page-de…

…sign Fix and style delete page design
mahdinoori2000 · Feb 14, 2024 · 5651ead · 5651ead
2 parents e377dee + 3517f2d
commit 5651ead
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/src/components/delete/Delete.jsx b/src/components/delete/Delete.jsx
@@ -28,7 +28,9 @@ function Delete() {
         <div>
           <p>
             There are no doctors added yet!
-            <NavLink to="/doctors/add-doctor">Click here to add</NavLink>
+            <NavLink to="/doctors/add-doctor" className="link">
+              Click here to add
+            </NavLink>
           </p>
         </div>
       ) : (
@@ -58,7 +60,11 @@ function Delete() {
                       <td>{name}</td>
                       <td>{specialization}</td>
                       <td>
-                        <button type="button" onClick={() => handleDelete(id)}>
+                        <button
+                          type="button"
+                          className="delete-btn"
+                          onClick={() => handleDelete(id)}
+                        >
                           Delete
                         </button>
                       </td>

diff --git a/src/components/delete/delete.css b/src/components/delete/delete.css
@@ -63,3 +63,21 @@ th {
   height: 100%;
   border-radius: 100%;
 }
+
+.delete-btn {
+  border: 2px solid var(--bg-button-color);
+  padding: 6px;
+  color: #fff;
+  background-color: var(--bg-button-color);
+  border-radius: 24px;
+}
+
+.delete-btn:active {
+  color: red;
+  background-color: #fff;
+}
+
+.link {
+  text-decoration: underline;
+  color: var(--bg-button-color);
+}