From 70ef1e13a73cc2bf298632f8299b2e7b6d04ca38 Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Fri, 29 Jul 2022 11:27:07 +0530
Subject: [PATCH] feat(frontend): updated submit button UI in create network
 modal

---
 .../Modal/network/CreateNetworkModal.tsx      | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/services/frontend/src/components/Modal/network/CreateNetworkModal.tsx b/services/frontend/src/components/Modal/network/CreateNetworkModal.tsx
index 31b2e7b..586b3ca 100644
--- a/services/frontend/src/components/Modal/network/CreateNetworkModal.tsx
+++ b/services/frontend/src/components/Modal/network/CreateNetworkModal.tsx
@@ -6,11 +6,20 @@ import Labels from "./Labels";
 import { CallbackFunction } from "../../../types";
 import { getInitialValues, tabs, validationSchema } from "./form-utils";
 import { classNames } from "../../../utils/styles";
+import { Button, styled } from "@mui/joy";
 
 interface ICreateNetworkModalProps {
   onCreateNetwork: CallbackFunction;
 }
 
+const Actions = styled("div")`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  padding: ${({ theme }) => theme.spacing(1)};
+`;
+
 const CreateNetworkModal: FunctionComponent<ICreateNetworkModalProps> = (
   props: ICreateNetworkModalProps
 ): ReactElement => {
@@ -61,15 +70,11 @@ const CreateNetworkModal: FunctionComponent<ICreateNetworkModalProps> = (
             {openTab === "Labels" && <Labels />}
           </div>
 
-          <div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b">
-            <button
-              className="btn-util"
-              type="button"
-              onClick={formik.submitForm}
-            >
-              Add
-            </button>
-          </div>
+          <Actions>
+            <Button size="sm" variant="solid" onClick={formik.submitForm}>
+              Save
+            </Button>
+          </Actions>
         </>
       )}
     </Formik>