style fixes: use TW Material <Button> instead of normal <button>

src/components/inputs/mission_tasks_editor.tsx

@@ -50,12 +50,13 @@ const MissionTaskEditor: React.FC<MissionTaskEditorProps> = ({
         <div key={index} className="mt-4 border-b border-gray-200 pb-4">
           <div className="flex justify-between items-center">
             <h3 className="text-md font-semibold">{task.name}</h3>
-            <button
+            <Button
               onClick={() => handleRemoveTask(index)}
               className="text-red-500"
+              placeholder={undefined}
             >
               Remove
-            </button>
+            </Button>
           </div>
           <div className="text-sm text-gray-300 my-2">{task.description}</div>
           <div className="ml-3">

src/components/modals/agent_modal.tsx

@@ -83,14 +83,12 @@ export default function AgentModal(props: {
               <h1 className="text-xl font-medium leading-normal">
                 {agent?.role}
               </h1>
-              <button
-                type="button"
-                className="box-content rounded-none border-none hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
+              <Button
                 onClick={() => setShowModal(false)}
-                aria-label="Close"
+                placeholder={undefined}
               >
                 <Icon icon="ep:close-bold" width={20} height={20} />
-              </button>
+              </Button>
             </TEModalHeader>
             <TEModalBody>
               <div className="sm:flex">

src/components/modals/new_agent_modal.tsx

@@ -84,14 +84,12 @@ function NewAgentModal(props: {
               <h1 className="text-xl font-medium leading-normal">
                 Add new agent to you Crew
               </h1>
-              <button
-                type="button"
-                className="box-content rounded-none border-none hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
+              <Button
                 onClick={() => setShowModal(false)}
-                aria-label="Close"
+                placeholder={undefined}
               >
                 <Icon icon="ep:close-bold" width={20} height={20} />
-              </button>
+              </Button>
             </TEModalHeader>
             <TEModalBody>
               <div className="sm:flex">

src/components/modals/new_mission_modal.tsx

@@ -42,7 +42,7 @@ function NewMissionModal(props: {
   const [createMission] = useMutation(CREATE_MISSION);
   const [createMissionLoading, setCreateMissionLoading] = useState(false);
 
-  const handleCreateMission = (missionData: Mission) => {
+  const handleCreateMission = async (missionData: Mission) => {
     setCreateMissionLoading(true);
     return createMission({
       variables: {
@@ -72,14 +72,12 @@ function NewMissionModal(props: {
               <h1 className="text-xl font-medium leading-normal">
                 Create New Mission
               </h1>
-              <button
-                type="button"
-                className="box-content rounded-none border-none hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
+              <Button
                 onClick={() => setShowModal(false)}
-                aria-label="Close"
+                placeholder={undefined}
               >
                 <Icon icon="ep:close-bold" width={20} height={20} />
-              </button>
+              </Button>
             </TEModalHeader>
             <TEModalBody>
               <div>
@@ -186,9 +184,9 @@ function NewMissionModal(props: {
                   )}
                 </div>
                 <div className="my-3">
-                  <button className="mx-auto block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white">
+                  <Button color="blue" placeholder={undefined}>
                     {tempMission?.result ? "Re-Run" : "Run"}
-                  </button>
+                  </Button>
                 </div>
               </div>
             </TEModalBody>