refactor: updated create volume modal to use `Modal`

services/frontend/src/components/modals/docker-compose/volume/CreateVolumeModal.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useMemo, useState } from "react";
 import { Formik } from "formik";
-import { XIcon } from "@heroicons/react/outline";
 
 import {
   getFinalValues,
@@ -14,6 +13,7 @@ import { classNames } from "../../../../utils/styles";
 import { toaster } from "../../../../utils";
 import { reportErrorsAndSubmit } from "../../../../utils/forms";
 import { ScrollView } from "../../../ScrollView";
+import Modal from "../../../Modal";
 
 interface ICreateVolumeModalProps {
   onHide: CallbackFunction;
@@ -35,26 +35,7 @@ const CreateVolumeModal = (props: ICreateVolumeModalProps) => {
   const initialValues = useMemo(() => getInitialValues(), []);
 
   return (
-    <div className="fixed z-50 inset-0 overflow-y-auto">
-      <div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 outline-none focus:outline-none">
-        <div
-          onClick={onHide}
-          className="opacity-25 fixed inset-0 z-40 bg-black"
-        ></div>
-        <div className="relative w-auto my-6 mx-auto max-w-5xl z-50">
-          <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
-            <div className="flex items-center justify-between px-4 py-3 border-b border-solid border-blueGray-200 rounded-t">
-              <h3 className="text-sm font-semibold">Add top level volume</h3>
-              <button
-                className="p-1 ml-auto text-black float-right outline-none focus:outline-none"
-                onClick={onHide}
-              >
-                <span className="block outline-none focus:outline-none">
-                  <XIcon className="w-4" />
-                </span>
-              </button>
-            </div>
-
+    <Modal onHide={onHide} title="Add top level volume">
       <Formik
         initialValues={initialValues}
         enableReinitialize={true}
@@ -91,10 +72,7 @@ const CreateVolumeModal = (props: ICreateVolumeModalProps) => {
               </nav>
             </div>
 
-                  <ScrollView
-                    height="500px"
-                    className="relative px-4 py-3 flex-auto"
-                  >
+            <ScrollView height="500px" className="relative px-4 py-3 flex-auto">
               {openTab === "General" && <General />}
             </ScrollView>
 
@@ -110,10 +88,7 @@ const CreateVolumeModal = (props: ICreateVolumeModalProps) => {
           </>
         )}
       </Formik>
-          </div>
-        </div>
-      </div>
-    </div>
+    </Modal>
   );
 };