diff --git a/public/svg-icons/CreateEdgeIcon.svg b/public/svg-icons/CreateEdgeIcon.svg
new file mode 100644
index 000000000..267c980d1
--- /dev/null
+++ b/public/svg-icons/CreateEdgeIcon.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/components/Icons/CreateEdgeIcon.tsx b/src/components/Icons/CreateEdgeIcon.tsx
new file mode 100644
index 000000000..8a637e5fb
--- /dev/null
+++ b/src/components/Icons/CreateEdgeIcon.tsx
@@ -0,0 +1,22 @@
+/* eslint-disable */
+import React from 'react'
+
+const CreateEdgeIcon: React.FC> = (props) => (
+
+)
+
+export default CreateEdgeIcon
diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Header/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Header/index.tsx
index 7ff7ac0ca..4f01976d8 100644
--- a/src/components/ModalsContainer/BlueprintModal/Body/Header/index.tsx
+++ b/src/components/ModalsContainer/BlueprintModal/Body/Header/index.tsx
@@ -53,13 +53,16 @@ const IconWrapper = styled.div`
svg {
color: ${colors.GRAY6};
- margin-left: 4px;
+ margin-left: 6px;
}
`
const Title = styled.span`
color: ${colors.white};
+ font-weight: 400;
+ font-family: Barlow;
margin-left: 15px;
+ font-size: 22px;
`
const TabsWrapper = styled.div`
diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Toolbar/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Toolbar/index.tsx
index 3c6a72c47..86c7a19cc 100644
--- a/src/components/ModalsContainer/BlueprintModal/Body/Toolbar/index.tsx
+++ b/src/components/ModalsContainer/BlueprintModal/Body/Toolbar/index.tsx
@@ -1,8 +1,9 @@
import styled from 'styled-components'
-import AddContentIcon from '~/components/Icons/AddContentIcon'
import { Flex } from '~/components/common/Flex'
-import { Text } from '~/components/common/Text'
import { colors } from '~/utils/colors'
+import PlusIcon from '~/components/Icons/PlusIcon'
+import CreateEdgeIcon from '~/components/Icons/CreateEdgeIcon'
+import DeleteIcon from '~/components/Icons/DeleteIcon'
type Props = {
onCreateNew: () => void
@@ -13,15 +14,18 @@ export const Toolbar = ({ onCreateNew, onAddEdgeNode }: Props) => (
-
+
- Add Type
-
+
+
+
+
+
+
- Add Edge
)
@@ -31,97 +35,35 @@ const Wrapper = styled(Flex).attrs({
direction: 'column',
justify: 'flex-start',
})`
- flex: 1 1 auto;
- z-index: 31;
- transition: opacity 1s;
- background: ${colors.BG2};
- max-height: 100vh;
- border-top-left-radius: 9px;
- border-bottom-left-radius: 9px;
-
- @media (max-width: 1440px) {
- max-height: 95.2vh;
- }
-
- @media (max-width: 1024px) {
- max-height: 74.8vh;
- }
-
- @media (max-width: 924px) {
- max-height: 73.1vh;
- }
+ flex: 1;
+ gap: 17px;
+ padding: 16px 0 0 16px;
`
const ActionButton = styled(Flex).attrs({
align: 'center',
justify: 'center',
p: 0,
-})`
+})<{
+ disabled?: boolean
+}>`
position: relative;
- width: 64px;
- height: 58px;
- padding: 0;
+ width: 40px;
+ height: 40px;
flex-direction: row;
color: ${colors.GRAY6};
+ background: ${({ disabled }) => (disabled ? colors.disableBtn : colors.BG1)};
cursor: pointer;
+ border-radius: 6px;
transition: ${({ theme }) => theme.transitions.create(['opacity', 'box-shadow', 'background-color'])};
- &:before {
- content: '';
- position: absolute;
- left: 0;
- top: 50%;
- transform: translateY(-50%);
- width: 4px; /* Initial width */
- height: 32px; /* Initial height on hover */
- background-color: transparent;
- transition: height 0.3s, width 0.3s, background-color 0.3s;
- }
-
- ${Text} {
- display: none;
- opacity: 0;
- width: 0;
- padding: 4px 10px;
- border-radius: 4px;
- background: #000;
- box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
- position: absolute;
- left: 90%;
- z-index: 99;
- white-space: nowrap;
- visibility: visible;
- font-size: 11px;
- font-style: normal;
- font-weight: 400;
- transition: ${({ theme }) => theme.transitions.create(['opacity', 'visually'])};
- }
-
&:hover {
- color: ${colors.white};
-
- &:before {
- width: 3px;
- height: 32px;
- background-color: ${colors.primaryBlue};
- }
-
- ${Text} {
- display: block;
- width: min-content;
- opacity: 1;
- visibility: visible;
- }
+ color: ${({ disabled }) => (disabled ? colors.GRAY6 : colors.white)};
}
&:active {
color: ${colors.white};
- background: ${colors.black};
- &:before {
- width: 3px;
- height: 100%;
- background-color: ${colors.primaryBlue};
- }
+ background: ${({ disabled }) => (disabled ? colors.BG1 : colors.black)};
}
&.root {
diff --git a/src/components/ModalsContainer/BlueprintModal/Body/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/index.tsx
index d63ce443e..3210aff65 100644
--- a/src/components/ModalsContainer/BlueprintModal/Body/index.tsx
+++ b/src/components/ModalsContainer/BlueprintModal/Body/index.tsx
@@ -138,21 +138,6 @@ export const Body = ({ Close }: BodyProps) => {
- {
- setIsAddEdgeNode(true)
- setIsCreateNew(false)
- setSelectedSchemaId('')
- setEdgeData({ refId: '', edgeType: '', source: '', target: '' })
- }}
- onCreateNew={() => {
- setIsAddEdgeNode(false)
- setIsCreateNew(true)
- setSelectedSchemaId('')
- }}
- />
-
-
{selectedSchema || isCreateNew ? (
@@ -183,6 +168,21 @@ export const Body = ({ Close }: BodyProps) => {
) : null}
+
+ {
+ setIsAddEdgeNode(true)
+ setIsCreateNew(false)
+ setSelectedSchemaId('')
+ setEdgeData({ refId: '', edgeType: '', source: '', target: '' })
+ }}
+ onCreateNew={() => {
+ setIsAddEdgeNode(false)
+ setIsCreateNew(true)
+ setSelectedSchemaId('')
+ }}
+ />
+
{graphLoading ? (
@@ -235,7 +235,6 @@ const EditorWrapper = styled(Flex)`
width: 100%;
max-width: 400px;
background: ${colors.BG1};
- border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
flex-grow: 1;
flex-shrink: 1;
diff --git a/src/utils/colors/index.tsx b/src/utils/colors/index.tsx
index fd85d365e..f1b47b02e 100644
--- a/src/utils/colors/index.tsx
+++ b/src/utils/colors/index.tsx
@@ -1,5 +1,6 @@
export const colors = {
black: 'rgb(0, 0, 0)',
+ disableBtn: 'rgba(35, 37, 47, 0.8)',
bluePressState: 'rgb(57, 97, 220)',
blueTextAccent: 'rgb(130, 180, 255)',
body: 'rgb(21, 30, 39)',