From f9c4d320c4799892d1bbceb77e53b3bc0e34abc9 Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Sun, 31 Jul 2022 13:22:53 +0530
Subject: [PATCH] feat(frontend): moved ports records below container name
 field in service modal

---
 .../src/components/Modal/service/General.tsx  | 48 ++++++++++---------
 1 file changed, 25 insertions(+), 23 deletions(-)

diff --git a/services/frontend/src/components/Modal/service/General.tsx b/services/frontend/src/components/Modal/service/General.tsx
index 51d86f8..5b10f15 100644
--- a/services/frontend/src/components/Modal/service/General.tsx
+++ b/services/frontend/src/components/Modal/service/General.tsx
@@ -8,7 +8,7 @@ const Root = styled("div")`
   row-gap: ${({ theme }) => theme.spacing(1)};
 `;
 
-const ImageNameGroup = styled("div")`
+const Group = styled("div")`
   display: flex;
   flex-direction: row;
   @media (max-width: 640px) {
@@ -22,31 +22,13 @@ const General = () => {
   return (
     <Root>
       <TextField label="Service name" name="serviceName" required={true} />
-      <ImageNameGroup>
+
+      <Group>
         <TextField label="Image name" name="imageName" required={true} />
         <TextField label="Image tag" name="imageTag" />
-      </ImageNameGroup>
-      <TextField label="Container name" name="containerName" required={true} />
+      </Group>
 
-      <Records
-        name="labels"
-        title="Labels"
-        fields={(index: number) => [
-          {
-            name: `labels[${index}].key`,
-            placeholder: "Key",
-            required: true,
-            type: "text"
-          },
-          {
-            name: `labels[${index}].value`,
-            placeholder: "Value",
-            required: true,
-            type: "text"
-          }
-        ]}
-        newValue={{ key: "", value: "" }}
-      />
+      <TextField label="Container name" name="containerName" required={true} />
 
       <Records
         name="ports"
@@ -86,6 +68,26 @@ const General = () => {
         }}
       />
 
+      <Records
+        name="labels"
+        title="Labels"
+        fields={(index: number) => [
+          {
+            name: `labels[${index}].key`,
+            placeholder: "Key",
+            required: true,
+            type: "text"
+          },
+          {
+            name: `labels[${index}].value`,
+            placeholder: "Value",
+            required: true,
+            type: "text"
+          }
+        ]}
+        newValue={{ key: "", value: "" }}
+      />
+
       <Records
         name="profiles"
         title="Profiles"