feat(frontend): updated UI for environment variables tab

services/frontend/src/components/Modal/Service/Environment.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 import { PlusIcon } from "@heroicons/react/outline";
-import { styled } from "@mui/joy";
+import { Button, styled } from "@mui/joy";
 import { useFormikContext } from "formik";
 import Record from "../../Record";
 import { IService } from "../../../types";
@@ -8,6 +8,7 @@ import { IService } from "../../../types";
 const Root = styled("div")`
   display: flex;
   flex-direction: column;
+  align-items: center;
 `;
 
 const Records = styled("div")`
@@ -16,6 +17,17 @@ const Records = styled("div")`
   row-gap: ${({ theme }: { theme: any }) => theme.spacing(1)};
 `;
 
+const AddButton = styled(Button)`
+  width: 140px;
+  margin-top: ${({ theme }) => theme.spacing(2)};
+`;
+
+const Description = styled("p")`
+  margin-top: ${({ theme }) => theme.spacing(2)};
+  text-align: center;
+  color: #7a7a7a;
+`;
+
 const Environment = () => {
   const formik = useFormikContext<{
     serviceConfig: IService;
@@ -46,10 +58,7 @@ const Environment = () => {
     environment && environment.length === 0 ? true : false;
 
   return (
-    <>
-      <Root
-        sx={{ alignItems: emptyEnvironmentVariables ? "center" : "flex-start" }}
-      >
+    <Root>
       {!emptyEnvironmentVariables && (
         <Records>
           {environment.map((_: unknown, index: number) => (
@@ -74,19 +83,22 @@ const Environment = () => {
       )}
 
       {emptyEnvironmentVariables && (
-          <p className="mt-4 text-md text-gray-500 dark:text-gray-400 text-center">
-            add environment variables
-          </p>
+        <Description>
+          This service does not have any environment variables.
+          <br />
+          Click "+ New variable" to add a new environment variable.
+        </Description>
       )}
-      </Root>
 
-      <div className="flex justify-end pt-2">
-        <button className="btn-util" onClick={handleNewEnvironmentVariable}>
-          <PlusIcon className="h-4 w-4 mr-1" />
-          New Variable
-        </button>
-      </div>
-    </>
+      <AddButton
+        size="sm"
+        variant="plain"
+        onClick={handleNewEnvironmentVariable}
+      >
+        <PlusIcon className="h-4 w-4 mr-2" />
+        New variable
+      </AddButton>
+    </Root>
   );
 };
 export default Environment;