feat(frontend): updated UI for labels tab

services/frontend/src/components/Modal/Service/Labels.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.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 Labels = () => {
   const formik = useFormikContext<{
     serviceConfig: IService;
@@ -42,8 +54,7 @@ const Labels = () => {
   const emptyLabels = labels && labels.length === 0 ? true : false;
 
   return (
-    <>
+    <Root>
-      <Root sx={{ alignItems: emptyLabels ? "center" : "flex-start" }}>
       {!emptyLabels && (
         <Records>
           {labels.map((_: unknown, index: number) => (
@@ -67,19 +78,18 @@ const Labels = () => {
         </Records>
       )}
       {emptyLabels && (
-          <p className="mt-4 text-md text-gray-500 dark:text-gray-400 text-center">
+        <Description>
-            add labels
+          This service does not have any labels.
-          </p>
+          <br />
+          Click "+ New label" to add a new label.
+        </Description>
       )}
-      </Root>
 
-      <div className="flex justify-end pt-2">
+      <AddButton size="sm" variant="plain" onClick={handleNewLabel}>
-        <button className="btn-util" onClick={handleNewLabel}>
+        <PlusIcon className="h-4 w-4 mr-2" />
-          <PlusIcon className="h-4 w-4 mr-1" />
+        New label
-          New Labels
+      </AddButton>
-        </button>
+    </Root>
-      </div>
-    </>
   );
 };