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
-        sx={{ alignItems: emptyEnvironmentVariables ? "center" : "flex-start" }}
-      >
-        {!emptyEnvironmentVariables && (
-          <Records>
-            {environment.map((_: unknown, index: number) => (
-              <Record
-                key={index}
-                index={index}
-                formik={formik}
-                fields={[
-                  {
-                    name: `serviceConfig.environment[${index}].key`,
-                    placeholder: "Key"
-                  },
-                  {
-                    name: `serviceConfig.environment[${index}].value`,
-                    placeholder: "Value"
-                  }
-                ]}
-                onRemove={handleRemoveEnvironmentVariable}
-              />
-            ))}
-          </Records>
-        )}
+    <Root>
+      {!emptyEnvironmentVariables && (
+        <Records>
+          {environment.map((_: unknown, index: number) => (
+            <Record
+              key={index}
+              index={index}
+              formik={formik}
+              fields={[
+                {
+                  name: `serviceConfig.environment[${index}].key`,
+                  placeholder: "Key"
+                },
+                {
+                  name: `serviceConfig.environment[${index}].value`,
+                  placeholder: "Value"
+                }
+              ]}
+              onRemove={handleRemoveEnvironmentVariable}
+            />
+          ))}
+        </Records>
+      )}
 
-        {emptyEnvironmentVariables && (
-          <p className="mt-4 text-md text-gray-500 dark:text-gray-400 text-center">
-            add environment variables
-          </p>
-        )}
-      </Root>
+      {emptyEnvironmentVariables && (
+        <Description>
+          This service does not have any environment variables.
+          <br />
+          Click "+ New variable" to add a new environment variable.
+        </Description>
+      )}
 
-      <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;