Merge pull request #2078 from MahtabBukhari/Remove_side_bar_and_add_g…

…raph_buttons Remove side bar and add graph buttons
stakwork · Aug 21, 2024 · 6181050 · 6181050
2 parents 5bebe1c + f6cbd9b
commit 6181050
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 97 deletions.
diff --git a/public/svg-icons/CreateEdgeIcon.svg b/public/svg-icons/CreateEdgeIcon.svg
diff --git a/src/components/Icons/CreateEdgeIcon.tsx b/src/components/Icons/CreateEdgeIcon.tsx
@@ -0,0 +1,22 @@
+/* eslint-disable */
+import React from 'react'
+
+const CreateEdgeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg width="1em" height="1em" viewBox="0 0 23 22" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <mask id="mask0_8954_27793" maskUnits="userSpaceOnUse" x="10" y="-3" width="16" height="16">
+      <rect x="10" y="-3" width="1em" height="1em" fill="currentColor" />
+    </mask>
+    <g mask="url(#mask0_8954_27793)">
+      <path
+        d="M17.5 5.50005H14.1666C14.025 5.50005 13.9062 5.45212 13.8104 5.35625C13.7145 5.26037 13.6666 5.14157 13.6666 4.99985C13.6666 4.85812 13.7145 4.73939 13.8104 4.64367C13.9062 4.54794 14.025 4.50008 14.1666 4.50008H17.5V1.16675C17.5 1.02508 17.5479 0.906331 17.6438 0.810498C17.7396 0.714665 17.8584 0.666748 18.0002 0.666748C18.1419 0.666748 18.2606 0.714665 18.3563 0.810498C18.4521 0.906331 18.4999 1.02508 18.4999 1.16675V4.50008H21.8333C21.9749 4.50008 22.0937 4.54802 22.1895 4.64388C22.2853 4.73976 22.3333 4.85856 22.3333 5.00028C22.3333 5.14202 22.2853 5.26074 22.1895 5.35647C22.0937 5.45219 21.9749 5.50005 21.8333 5.50005H18.4999V8.83338C18.4999 8.97505 18.452 9.0938 18.3561 9.18963C18.2602 9.28547 18.1414 9.33338 17.9997 9.33338C17.858 9.33338 17.7393 9.28547 17.6435 9.18963C17.5478 9.0938 17.5 8.97505 17.5 8.83338V5.50005Z"
+        fill="currentColor"
+      />
+    </g>
+    <path
+      d="M1.33333 6C1.33333 7.47276 2.52724 8.66667 4 8.66667C5.47276 8.66667 6.66667 7.47276 6.66667 6C6.66667 4.52724 5.47276 3.33333 4 3.33333C2.52724 3.33333 1.33333 4.52724 1.33333 6ZM14.3333 19C14.3333 20.4728 15.5272 21.6667 17 21.6667C18.4728 21.6667 19.6667 20.4728 19.6667 19C19.6667 17.5272 18.4728 16.3333 17 16.3333C15.5272 16.3333 14.3333 17.5272 14.3333 19ZM3.64645 6.35355L16.6464 19.3536L17.3536 18.6464L4.35355 5.64645L3.64645 6.35355Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+export default CreateEdgeIcon
diff --git 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
@@ -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) => (
   <Wrapper>
     <ActionButton data-testid="add-schema-type" onClick={onCreateNew}>
       <IconWrapper>
-        <AddContentIcon />
+        <PlusIcon />
       </IconWrapper>
-      <Text>Add Type</Text>
     </ActionButton>
     <ActionButton data-testid="add-edge" onClick={onAddEdgeNode}>
       <IconWrapper>
-        <AddContentIcon />
+        <CreateEdgeIcon />
+      </IconWrapper>
+    </ActionButton>
+    <ActionButton disabled>
+      <IconWrapper>
+        <DeleteIcon />
       </IconWrapper>
-      <Text>Add Edge</Text>
     </ActionButton>
   </Wrapper>
 )
@@ -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
@@ -138,21 +138,6 @@ export const Body = ({ Close }: BodyProps) => {
       </Flex>
       <Flex align="stretch" direction="row" grow={1}>
         <Flex mb={-20} ml={-20}>
-          <Toolbar
-            onAddEdgeNode={() => {
-              setIsAddEdgeNode(true)
-              setIsCreateNew(false)
-              setSelectedSchemaId('')
-              setEdgeData({ refId: '', edgeType: '', source: '', target: '' })
-            }}
-            onCreateNew={() => {
-              setIsAddEdgeNode(false)
-              setIsCreateNew(true)
-              setSelectedSchemaId('')
-            }}
-          />
-        </Flex>
-        <Flex>
           {selectedSchema || isCreateNew ? (
             <EditorWrapper>
               <InnerEditorWrapper>
@@ -183,6 +168,21 @@ export const Body = ({ Close }: BodyProps) => {
             </EditorWrapper>
           ) : null}
         </Flex>
+        <Flex>
+          <Toolbar
+            onAddEdgeNode={() => {
+              setIsAddEdgeNode(true)
+              setIsCreateNew(false)
+              setSelectedSchemaId('')
+              setEdgeData({ refId: '', edgeType: '', source: '', target: '' })
+            }}
+            onCreateNew={() => {
+              setIsAddEdgeNode(false)
+              setIsCreateNew(true)
+              setSelectedSchemaId('')
+            }}
+          />
+        </Flex>
         <Wrapper direction="row" grow={1}>
           <Container>
             {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
@@ -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)',