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,85 +35,60 @@ const CreateVolumeModal = (props: ICreateVolumeModalProps) => {
   const initialValues = useMemo(() => getInitialValues(), []);
 
   return (
-    <div className="fixed z-50 inset-0 overflow-y-auto">
+    <Modal onHide={onHide} title="Add top level volume">
-      <div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 outline-none focus:outline-none">
+      <Formik
-        <div
+        initialValues={initialValues}
-          onClick={onHide}
+        enableReinitialize={true}
-          className="opacity-25 fixed inset-0 z-40 bg-black"
+        onSubmit={handleCreate}
-        ></div>
+        validationSchema={validationSchema}
-        <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">
+        {(formik) => (
-            <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>
+            <div className="border-b border-gray-200 px-4 md:px-8">
-              <button
+              <nav
-                className="p-1 ml-auto text-black float-right outline-none focus:outline-none"
+                className="-mb-px flex space-x-4 md:space-x-8"
-                onClick={onHide}
+                aria-label="Tabs"
               >
-                <span className="block outline-none focus:outline-none">
+                {tabs.map((tab) => (
-                  <XIcon className="w-4" />
+                  <a
-                </span>
+                    key={tab.name}
-              </button>
+                    href={tab.href}
+                    className={classNames(
+                      tab.name === openTab
+                        ? "border-indigo-500 text-indigo-600"
+                        : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
+                      "whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
+                      tab.hidden ? "hidden" : ""
+                    )}
+                    aria-current={tab.current ? "page" : undefined}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      setOpenTab(tab.name);
+                    }}
+                  >
+                    {tab.name}
+                  </a>
+                ))}
+              </nav>
             </div>
 
-            <Formik
+            <ScrollView height="500px" className="relative px-4 py-3 flex-auto">
-              initialValues={initialValues}
+              {openTab === "General" && <General />}
-              enableReinitialize={true}
+            </ScrollView>
-              onSubmit={handleCreate}
-              validationSchema={validationSchema}
-            >
-              {(formik) => (
-                <>
-                  <div className="border-b border-gray-200 px-4 md:px-8">
-                    <nav
-                      className="-mb-px flex space-x-4 md:space-x-8"
-                      aria-label="Tabs"
-                    >
-                      {tabs.map((tab) => (
-                        <a
-                          key={tab.name}
-                          href={tab.href}
-                          className={classNames(
-                            tab.name === openTab
-                              ? "border-indigo-500 text-indigo-600"
-                              : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
-                            "whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
-                            tab.hidden ? "hidden" : ""
-                          )}
-                          aria-current={tab.current ? "page" : undefined}
-                          onClick={(e) => {
-                            e.preventDefault();
-                            setOpenTab(tab.name);
-                          }}
-                        >
-                          {tab.name}
-                        </a>
-                      ))}
-                    </nav>
-                  </div>
-
-                  <ScrollView
-                    height="500px"
-                    className="relative px-4 py-3 flex-auto"
-                  >
-                    {openTab === "General" && <General />}
-                  </ScrollView>
 
-                  <div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b">
+            <div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b">
-                    <button
+              <button
-                      className="btn-util"
+                className="btn-util"
-                      type="button"
+                type="button"
-                      onClick={reportErrorsAndSubmit(formik)}
+                onClick={reportErrorsAndSubmit(formik)}
-                    >
+              >
-                      Add
+                Add
-                    </button>
+              </button>
-                  </div>
+            </div>
-                </>
+          </>
-              )}
+        )}
-            </Formik>
+      </Formik>
-          </div>
+    </Modal>
-        </div>
-      </div>
-    </div>
   );
 };