tweak(ui): Switch from modal.css to tailwindcss classes (#7369)

* reverts dark theme for now

* change "Show/Hide nodes" button to be "Icon"

* swap over to light mode + fix sizing

* fix color for agent name + description text

* Change navbar to white

* Added darkmode tag for the navbar

* Added dark mode text color

* Changed to tailwind classes

---------

Co-authored-by: Bentlybro <tomnoon9@gmail.com>

rnd/autogpt_builder/src/components/ModalComponent.tsx

@@ -1,5 +1,4 @@
 import React, { FC, useEffect } from 'react';
-import './modal.css';
 import { Button } from './ui/button';
 import { Textarea } from './ui/textarea';
 
@@ -29,15 +28,15 @@ const ModalComponent: FC<ModalProps> = ({ isOpen, onClose, onSave, value }) => {
   }
 
   return (
-    <div className="modal-overlay">
-      <div className="modal">
+    <div className="fixed inset-0 bg-white bg-opacity-60 flex justify-center items-center">
+      <div className="bg-white p-5 rounded-lg w-[500px] max-w-[90%]">
         <center><h1>Enter input text</h1></center>
         <Textarea
-          className="modal-textarea"
+          className="w-full h-[200px] p-2.5 rounded border border-[#dfdfdf] text-black bg-[#dfdfdf]"
           value={tempValue}
           onChange={(e) => setTempValue(e.target.value)}
         />
-        <div className="modal-actions">
+        <div className="flex justify-end gap-2.5 mt-2.5">
           <Button onClick={onClose}>Cancel</Button>
           <Button onClick={handleSave}>Save</Button>
         </div>

rnd/autogpt_builder/src/components/modal.css

@@ -1,36 +0,0 @@
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(255, 255, 255, 0.6);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.modal {
-  background: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  width: 500px;
-  max-width: 90%;
-}
-
-.modal-textarea {
-  width: 100%;
-  height: 200px;
-  padding: 10px;
-  border-radius: 4px;
-  border: 1px solid #dfdfdf;
-  color: #000000;
-  background-color: #dfdfdf;
-}
-
-.modal-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-  margin-top: 10px;
-}