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,47 +58,47 @@ const Environment = () => {
     environment && environment.length === 0 ? true : false;
 
   return (
-    <>
+    <Root>
-      <Root
+      {!emptyEnvironmentVariables && (
-        sx={{ alignItems: emptyEnvironmentVariables ? "center" : "flex-start" }}
+        <Records>
-      >
+          {environment.map((_: unknown, index: number) => (
-        {!emptyEnvironmentVariables && (
+            <Record
-          <Records>
+              key={index}
-            {environment.map((_: unknown, index: number) => (
+              index={index}
-              <Record
+              formik={formik}
-                key={index}
+              fields={[
-                index={index}
+                {
-                formik={formik}
+                  name: `serviceConfig.environment[${index}].key`,
-                fields={[
+                  placeholder: "Key"
-                  {
+                },
-                    name: `serviceConfig.environment[${index}].key`,
+                {
-                    placeholder: "Key"
+                  name: `serviceConfig.environment[${index}].value`,
-                  },
+                  placeholder: "Value"
-                  {
+                }
-                    name: `serviceConfig.environment[${index}].value`,
+              ]}
-                    placeholder: "Value"
+              onRemove={handleRemoveEnvironmentVariable}
-                  }
+            />
-                ]}
+          ))}
-                onRemove={handleRemoveEnvironmentVariable}
+        </Records>
-              />
+      )}
-            ))}
-          </Records>
-        )}
 
-        {emptyEnvironmentVariables && (
+      {emptyEnvironmentVariables && (
-          <p className="mt-4 text-md text-gray-500 dark:text-gray-400 text-center">
+        <Description>
-            add environment variables
+          This service does not have any environment variables.
-          </p>
+          <br />
-        )}
+          Click "+ New variable" to add a new environment variable.
-      </Root>
+        </Description>
+      )}
 
-      <div className="flex justify-end pt-2">
+      <AddButton
-        <button className="btn-util" onClick={handleNewEnvironmentVariable}>
+        size="sm"
-          <PlusIcon className="h-4 w-4 mr-1" />
+        variant="plain"
-          New Variable
+        onClick={handleNewEnvironmentVariable}
-        </button>
+      >
-      </div>
+        <PlusIcon className="h-4 w-4 mr-2" />
-    </>
+        New variable
+      </AddButton>
+    </Root>
   );
 };
 export default Environment;