Fixed

frontend/src/app/components/alerts/Alert.jsx

@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 import styles from "./styles.module.css";
 import BoxedCheckIcon from "../icons/boxedCheck";
+import SecondaryButton from "../buttons/secondaryButton/SecondaryButton";
+import PrimaryButton from "../buttons/primarybutton/PrimaryButton";
 const Alert = (props) => {
   const [hide, setHide] = useState(false);
   const handleHide = () => {
@@ -27,8 +29,8 @@ const Alert = (props) => {
           </p>
         </div>
         <div className={styles.actionButtons}>
-          <button onClick={handleHide}>Confirm</button>
-          <button onClick={handleHide}>Cancel</button>
+          <PrimaryButton text="Confirm" onClick={handleHide} />
+          <SecondaryButton text="Cancel" onClick={handleHide} />
         </div>
       </div>
     </div>

frontend/src/app/components/alerts/styles.module.css

@@ -101,30 +101,10 @@
   padding-top: 12px;
   justify-content: center;
   align-items: flex-end;
+
   gap: 10px;
   align-self: stretch;
 }
 .actionButtons > button {
-  display: flex;
-  height: 36px;
-  padding: 8px 16px;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-  flex: 1 0 0;
-  border-radius: 6px;
-  border: 0.5px solid #8187ff;
-  background: rgba(83, 89, 242, 0.25);
-  color: #fff;
-  font-family: Inter;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  cursor: pointer;
-}
-.actionButtons > button:nth-child(2) {
-  border-radius: 6px;
-  border: 0.5px solid #4e537e;
-  background-color: transparent;
+  width: 100%;
 }