Fix css

client/src/app/pages/applications/assessment-actions/components/dynamic-assessment-button.css

@@ -0,0 +1,9 @@
+.continue-button {
+  background-color: var(--pf-v5-global--success-color--100) !important;
+  margin-right: 10px;
+}
+
+.retake-button {
+  background-color: var(--pf-v5-global--warning-color--100) !important  ;
+  margin-right: 10px;
+}

client/src/app/pages/applications/assessment-actions/components/dynamic-assessment-button.tsx

@@ -5,14 +5,11 @@ import {
   InitialAssessment,
   Questionnaire,
 } from "@app/api/models";
-import {
-  useCreateAssessmentMutation,
-  useFetchAssessmentsByAppId,
-} from "@app/queries/assessments";
+import { useCreateAssessmentMutation } from "@app/queries/assessments";
 import { Button } from "@patternfly/react-core";
 import React, { FunctionComponent } from "react";
 import { useHistory } from "react-router-dom";
-import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
+import "./dynamic-assessment-button.css";
 
 enum AssessmentAction {
   Take = "Take",
@@ -52,14 +49,12 @@ const DynamicAssessmentButton: FunctionComponent<
     }
   };
 
-  const determineButtonBackgroundColor = () => {
+  const determineButtonClassName = () => {
     const action = determineAction();
     if (action === AssessmentAction.Continue) {
-      return "#5ba353"; // Continue background color
+      return "continue-button";
     } else if (action === AssessmentAction.Retake) {
-      return "#F0AB01"; // Retake background color
-    } else {
-      return ""; // Default background color for "Take"
+      return "retake-button";
     }
   };
 
@@ -100,12 +95,9 @@ const DynamicAssessmentButton: FunctionComponent<
   return (
     <div>
       <Button
-        className={spacing.mrSm}
         type="button"
         variant="primary"
-        style={{
-          backgroundColor: determineButtonBackgroundColor(),
-        }}
+        className={determineButtonClassName()}
         onClick={() => {
           onHandleAssessmentAction();
         }}