Merge pull request #2111 from Shoaibdev7/clean-up-blue-print-modal

[Blueprint]: Clean Up `Create and Edit` Type Node Modal
stakwork · Sep 12, 2024 · cceefcd · cceefcd
2 parents f347ce5 + 737dbe8
commit cceefcd
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 2 deletions.
diff --git 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
@@ -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`