From e3f09fd6b825b88363ea742c1b08f0db8ef4f7ed Mon Sep 17 00:00:00 2001
From: Shoaibdev7 <shoaibdev7@gmail.com>
Date: Tue, 10 Sep 2024 06:42:22 +0500
Subject: [PATCH] fix(blue-print): update edit and create type modal

---
 .../BlueprintModal/Body/Editor/index.tsx      | 41 ++++++++++++++++++-
 .../BlueprintModal/Body/Header/index.tsx      |  1 +
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx
index 22b6b2f64..d2fe9bdc1 100644
--- a/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx
+++ b/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx
@@ -389,11 +389,13 @@ export const Editor = ({
 
   return (
     <Flex>
-      <Flex direction="row" justify="flex-end">
+      <HeaderRow>
+        <HeaderText>{selectedSchema ? 'Edit Type' : 'Create Type'}</HeaderText>
         <CloseButton data-testid="close-sidebar-sub-view" onClick={onCancel}>
           <ClearIcon />
         </CloseButton>
-      </Flex>
+      </HeaderRow>
+      <LineBarWrapper />
       <Flex>
         <FormProvider {...form}>
           <form id="add-type-form" onSubmit={onSubmit}>
@@ -541,6 +543,13 @@ const CustomButton = styled(Button)`
   margin: 0 auto !important;
 `
 
+const LineBarWrapper = styled.div`
+  border-bottom: 1px solid ${colors.black};
+  width: calc(100% + 32px);
+  margin: 0 -16px 16px;
+  opacity: 0.3;
+`
+
 const ClipLoaderWrapper = styled.span`
   margin-top: 2px;
 `
@@ -563,6 +572,16 @@ const CloseButton = styled(Flex)`
   font-size: 32px;
   color: ${colors.white};
   cursor: pointer;
+
+  svg {
+    color: ${colors.GRAY6};
+  }
+
+  &:hover {
+    svg {
+      color: ${colors.white};
+    }
+  }
 `
 
 const StyledError = styled(Flex)`
@@ -580,3 +599,21 @@ const LineBar = styled.div`
   opacity: 0.5;
   margin-left: -16px;
 `
+
+const HeaderRow = styled(Flex)`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 16px;
+`
+
+const HeaderText = styled(Text)`
+  font-family: Barlow;
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 16px;
+  letter-spacing: 0.01em;
+  text-align: left;
+  color: ${colors.white};
+`
diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Header/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Header/index.tsx
index 4f01976d8..0a7562ece 100644
--- a/src/components/ModalsContainer/BlueprintModal/Body/Header/index.tsx
+++ b/src/components/ModalsContainer/BlueprintModal/Body/Header/index.tsx
@@ -42,6 +42,7 @@ const HeaderWrapper = styled(Flex)`
   border-top-right-radius: 9px;
   justify-content: space-between;
   padding: 17px;
+  border-bottom: 1px solid ${colors.black};
 `
 
 const IconWrapper = styled.div`