ss

src/Components/APPOINTMENT/Appointment.scss

@@ -114,4 +114,11 @@ form{
 }
 .select{
   padding: 10px;
+}
+.danger{
+  background-color: #fc6060;
+  padding: 1px 10px;
+  margin: 5px 0;
+  color: white;
+  border-radius: 2px;
 }

src/Components/APPOINTMENT/index.js

@@ -233,7 +233,7 @@ export default function Index() {
                   <td>{appointment.date}</td>
                   <td>{appointment.doctor}</td>
                   <td>
-                    <button className="btn btn-danger" onClick={() => handelDelete(appointment._id)}>حذف</button>
+                  <button className="danger" onClick={() => handelDelete(appointment._id)}>حذف</button>
                   </td>
                 </tr>
               ))}

src/Components/LogOut/LogOut.js

@@ -20,7 +20,7 @@ export default function LogOut() {
     }
   return (
     <div>
-        <button onClick={handelLogOut} className='btn btn-danger'>Log Out</button>
+        <button onClick={handelLogOut} className='danger'>Log Out</button>
     </div>
   )
 }

src/pages/Dashboard/Dashboard.js

@@ -87,7 +87,7 @@ export default function Dashboard() {
                                         <td>{appointment.doctor}</td>
                                         <td>
                                             {/* زر لحذف الموعد عند النقر عليه */}
-                                            <button className='btn btn-danger' onClick={() => deleteAppointment(appointment._id)}>حذف</button>
+                                            <button className='danger' onClick={() => deleteAppointment(appointment._id)}>حذف</button>
                                         </td>
                                     </tr>
                                 ))}