From 8af5150e1f1dcee00512c4e6c4876682ec20220a Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Mon, 1 Aug 2022 18:31:35 +0530
Subject: [PATCH] feat(frontend): added scroll view to service modals

---
 .../src/components/Modal/service/Create.tsx   | 31 ++++---------------
 .../src/components/Modal/service/Edit.tsx     |  8 +++--
 2 files changed, 12 insertions(+), 27 deletions(-)

diff --git a/services/frontend/src/components/Modal/service/Create.tsx b/services/frontend/src/components/Modal/service/Create.tsx
index f91a4f1..8df7f03 100644
--- a/services/frontend/src/components/Modal/service/Create.tsx
+++ b/services/frontend/src/components/Modal/service/Create.tsx
@@ -17,6 +17,7 @@ import Deploy from "./Deploy";
 import { classNames } from "../../../utils/styles";
 import { toaster } from "../../../utils";
 import { reportErrorsAndSubmit } from "../../../utils/forms";
+import { ScrollView } from "../../ScrollView";
 
 interface IModalServiceProps {
   onHide: CallbackFunction;
@@ -29,29 +30,6 @@ const FormContainer = styled("div")`
   justify-content: space-between;
 `;
 
-const TabBody = styled("div")`
-  overflow: auto;
-
-  ::-webkit-scrollbar {
-    width: 4px;
-  }
-
-  /* Track */
-  ::-webkit-scrollbar-track {
-    background: #f1f1f1;
-  }
-
-  /* Handle */
-  ::-webkit-scrollbar-thumb {
-    background: #888;
-  }
-
-  /* Handle on hover */
-  ::-webkit-scrollbar-thumb:hover {
-    background: #555;
-  }
-`;
-
 const ModalServiceCreate = (props: IModalServiceProps) => {
   const { onHide, onAddEndpoint } = props;
   const [openTab, setOpenTab] = useState("General");
@@ -130,13 +108,16 @@ const ModalServiceCreate = (props: IModalServiceProps) => {
                       </nav>
                     </div>
 
-                    <TabBody className="relative px-4 py-3 flex-auto">
+                    <ScrollView
+                      height="500px"
+                      className="relative px-4 py-3 flex-auto"
+                    >
                       {openTab === "General" && <General />}
                       {openTab === "Environment" && <Environment />}
                       {openTab === "Data" && <Data />}
                       {openTab === "Build" && <Build />}
                       {openTab === "Deploy" && <Deploy />}
-                    </TabBody>
+                    </ScrollView>
                   </div>
 
                   <div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b">
diff --git a/services/frontend/src/components/Modal/service/Edit.tsx b/services/frontend/src/components/Modal/service/Edit.tsx
index 31d8f12..7f5a7e7 100644
--- a/services/frontend/src/components/Modal/service/Edit.tsx
+++ b/services/frontend/src/components/Modal/service/Edit.tsx
@@ -17,6 +17,7 @@ import Deploy from "./Deploy";
 import { classNames } from "../../../utils/styles";
 import { toaster } from "../../../utils";
 import { reportErrorsAndSubmit } from "../../../utils/forms";
+import { ScrollView } from "../../ScrollView";
 
 export interface IModalServiceProps {
   node: IServiceNodeItem;
@@ -103,13 +104,16 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
                       </nav>
                     </div>
 
-                    <div className="relative px-4 py-3 flex-auto">
+                    <ScrollView
+                      height="500px"
+                      className="relative px-4 py-3 flex-auto"
+                    >
                       {openTab === "General" && <General />}
                       {openTab === "Environment" && <Environment />}
                       {openTab === "Data" && <Data />}
                       {openTab === "Build" && <Build />}
                       {openTab === "Deploy" && <Deploy />}
-                    </div>
+                    </ScrollView>
 
                     <div className="flex items-center justify-end px-4 py-3 border-t border-solid border-blueGray-200 rounded-b">
                       <button