Merge pull request #2110 from MuhammadUmer44/Update-Add-Edge-Modal-Bl…

…uePrint

Fixed: Ontology - `Add Edge` Modal Design Should Match Figma [BluePrint]

src/components/ModalsContainer/BlueprintModal/Body/AddEdgeNode/Title/ToNode/index.tsx

@@ -1,24 +1,27 @@
 import { FC, useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
+import styled from 'styled-components'
 import { OPTIONS } from '~/components/AddItemModal/SourceTypeStep/constants'
 import { TOption } from '~/components/AddItemModal/SourceTypeStep/types'
 import { FormData } from '~/components/ModalsContainer/BlueprintModal/Body/Editor'
 import { AutoComplete, TAutocompleteOption } from '~/components/common/AutoComplete'
 import { getNodeSchemaTypes } from '~/network/fetchSourcesData'
+import { colors } from '~/utils'
 
 type Props = {
   onSelect: (type: string) => void
   dataTestId?: string
   hideSelectAll?: boolean
   edgeLink?: string
+  placeholder?: string
 }
 
 const defaultValues = {
   type: '',
   parent: '',
 }
 
-export const ToNode: FC<Props> = ({ onSelect, dataTestId, edgeLink, hideSelectAll }) => {
+export const ToNode: FC<Props> = ({ onSelect, dataTestId, edgeLink, hideSelectAll, placeholder }) => {
   const form = useForm<FormData>({
     mode: 'onChange',
     defaultValues,
@@ -88,13 +91,42 @@ export const ToNode: FC<Props> = ({ onSelect, dataTestId, edgeLink, hideSelectAl
   }
 
   return (
-    <AutoComplete
+    <StyledAutoComplete
       dataTestId={dataTestId}
       disabled={!!edgeLink}
       isLoading={optionsIsLoading}
       onSelect={handleSelect}
       options={options || OPTIONS}
+      placeholder={placeholder}
       selectedValue={resolvedParentValue()}
     />
   )
 }
+
+const StyledAutoComplete = styled(AutoComplete)`
+  .MuiInputBase-input {
+    font-family: Barlow;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 16px;
+    letter-spacing: 0.01em;
+    text-align: left;
+    color: ${colors.white};
+    padding-right: -8px;
+
+    &::placeholder {
+      font-family: Barlow;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 16px;
+      letter-spacing: 0.01em;
+      text-align: left;
+      color: ${colors.GRAY7};
+      opacity: 1;
+    }
+  }
+
+  && .MuiInput-input.MuiInputBase-input {
+    padding-left: 0;
+  }
+`

src/components/ModalsContainer/BlueprintModal/Body/AddEdgeNode/Title/index.tsx

@@ -2,9 +2,10 @@ import { FC } from 'react'
 import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
 import { Text } from '~/components/common/Text'
-import { ToNode } from './ToNode'
 import { TextInput } from '~/components/common/TextInput'
 import { requiredRule } from '~/constants'
+import { colors } from '~/utils'
+import { ToNode } from './ToNode'
 
 type Props = {
   selectedType: string
@@ -27,35 +28,30 @@ export const TitleEditor: FC<Props> = ({
   const hideSelectAllInTarget = selectedFromNode === 'all'
 
   return (
-    <Flex>
-      <Flex align="center" direction="row" justify="space-between" mb={35}>
-        <Flex align="center" direction="row">
-          <StyledText>{edgeLinkData?.refId ? 'Edit Edge' : 'Add Edge'}</StyledText>
-        </Flex>
-      </Flex>
-
+    <Flex mt={8}>
       <Flex mb={25}>
-        <Flex mb={12}>
-          <Text>Source</Text>
+        <Flex mb={5}>
+          <StyledLabel>Source</StyledLabel>
         </Flex>
         <ToNode
           dataTestId="from_node"
           edgeLink={edgeLinkData?.source}
           hideSelectAll={hideSelectAllInSource}
           onSelect={setSelectedFromNode}
+          placeholder="Source Name"
         />
       </Flex>
 
       <Flex mb={10}>
-        <Flex mb={12}>
-          <Text>Edge Name</Text>
+        <Flex mb={5}>
+          <StyledLabel>Edge Name</StyledLabel>
         </Flex>
         <Flex mb={12}>
           <TextInput
             id="cy-item-name"
             maxLength={250}
             name="type"
-            placeholder="Enter type name"
+            placeholder="Enter Edge Name"
             rules={{
               ...requiredRule,
             }}
@@ -65,21 +61,28 @@ export const TitleEditor: FC<Props> = ({
       </Flex>
 
       <Flex mb={25}>
-        <Flex mb={12}>
-          <Text>Destination</Text>
+        <Flex mb={5}>
+          <StyledLabel>Destination</StyledLabel>
         </Flex>
         <ToNode
           dataTestId="to_node"
           edgeLink={edgeLinkData?.target}
           hideSelectAll={hideSelectAllInTarget}
           onSelect={setSelectedToNode}
+          placeholder="Select Destination"
         />
       </Flex>
     </Flex>
   )
 }
 
-const StyledText = styled(Text)`
-  font-size: 22px;
-  font-weight: 600;
+const StyledLabel = styled(Text)`
+  font-family: Barlow;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0.01em;
+  text-align: left;
+  margin-left: 1px;
+  color: ${colors.mainBottomIcons};
 `

src/components/ModalsContainer/BlueprintModal/Body/AddEdgeNode/index.tsx

@@ -1,8 +1,9 @@
-import { Body } from './Body'
+import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
+import { Text } from '~/components/common/Text'
 import ClearIcon from '~/components/Icons/ClearIcon'
-import styled from 'styled-components'
 import { colors } from '~/utils'
+import { Body } from './Body'
 
 export type Props = {
   setIsAddEdgeNode: (b: boolean) => void
@@ -17,11 +18,13 @@ export const AddEdgeNode = ({ setIsAddEdgeNode, edgeData, setGraphLoading }: Pro
 
   return (
     <Flex>
-      <Flex direction="row" justify="flex-end">
+      <HeaderFlex align="center" direction="row" justify="space-between">
+        <StyledText>{edgeData?.refId ? 'Edit Edge' : 'Add Edge'}</StyledText>
         <CloseButton data-testid="close-sidebar-sub-view" onClick={onCancel}>
           <ClearIcon />
         </CloseButton>
-      </Flex>
+      </HeaderFlex>
+      <LineBar />
       <Body edgeLinkData={edgeData} onCancel={onCancel} setGraphLoading={setGraphLoading} />
     </Flex>
   )
@@ -31,4 +34,36 @@ const CloseButton = styled(Flex)`
   font-size: 32px;
   color: ${colors.white};
   cursor: pointer;
+
+  svg {
+    color: ${colors.GRAY6};
+  }
+
+  &:hover {
+    svg {
+      color: ${colors.white};
+    }
+  }
+`
+
+const HeaderFlex = styled(Flex)`
+  margin-bottom: 16px;
+`
+
+const LineBar = styled.div`
+  border-bottom: 1px solid ${colors.black};
+  width: calc(100% + 32px);
+  margin: 0 -16px 16px;
+  opacity: 0.3;
+`
+
+const StyledText = styled(Text)`
+  font-family: Barlow;
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 16px;
+  letter-spacing: 0.01em;
+  text-align: left;
+  margin-left: 2px;
+  color: ${colors.white};
 `

src/components/common/AutoComplete/index.tsx

@@ -25,6 +25,8 @@ type Props = {
   disabled?: boolean
   dataTestId?: string
   dataId?: string
+  placeholder?: string
+  className?: string
 }
 
 const defaultProps = {
@@ -43,6 +45,8 @@ export const AutoComplete: FC<Props> = ({
   disabled = false,
   dataTestId,
   dataId,
+  placeholder,
+  className,
 }) => {
   const inputRef = useRef<HTMLInputElement>(null)
   const [open, setOpen] = useState<boolean>(false)
@@ -65,6 +69,7 @@ export const AutoComplete: FC<Props> = ({
         autoFocus
         autoHighlight
         blurOnSelect
+        className={className}
         data-testid={dataId}
         disableClearable
         disabled={disabled}
@@ -108,6 +113,7 @@ export const AutoComplete: FC<Props> = ({
                 <>{isLoading ? <CircularProgress color="inherit" size={20} /> : params.InputProps.endAdornment}</>
               ),
             }}
+            placeholder={placeholder}
             size="medium"
             variant="standard"
           />