blsmedia/bot
2
0
Fork 0
Code Activity

feat(editor): 💄 UI bump

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-03-31 09:49:23 +02:00
parent c7d5373127
commit 7f5d2f4173
16 changed files with 105 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/builder/components/shared/Graph/Edges/DrawingEdge.tsx
View File

@@ -2,6 +2,7 @@ import { useEventListener } from '@chakra-ui/hooks'
import assert from 'assert'
import { useGraph, ConnectingIds } from 'contexts/GraphContext'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import { colors } from 'libs/theme'
import React, { useMemo, useState } from 'react'
import {
computeConnectingEdgePath,
@@ -91,7 +92,7 @@ export const DrawingEdge = () => {
return (
<path
d={path}
stroke="#1a5fff"
stroke={colors.blue[400]}
strokeWidth="2px"
markerEnd="url(#blue-arrow)"
fill="none"

3
apps/builder/components/shared/Graph/Edges/Edge.tsx
View File

@@ -10,6 +10,7 @@ import { Edge as EdgeProps } from 'models'
import { Portal, useDisclosure } from '@chakra-ui/react'
import { useTypebot } from 'contexts/TypebotContext'
import { EdgeMenu } from './EdgeMenu'
import { colors } from 'libs/theme'
export type AnchorsPositionProps = {
sourcePosition: Coordinates
@@ -124,7 +125,7 @@ export const Edge = ({ edge }: { edge: EdgeProps }) => {
<path
data-testid="edge"
d={path}
stroke={isPreviewing ? '#1a5fff' : '#718096'}
stroke={isPreviewing ? colors.blue[400] : colors.gray[400]}
strokeWidth="2px"
markerEnd={isPreviewing ? 'url(#blue-arrow)' : 'url(#arrow)'}
fill="none"

5
apps/builder/components/shared/Graph/Edges/Edges.tsx
View File

@@ -1,4 +1,5 @@
import { chakra } from '@chakra-ui/system'
import { colors } from 'libs/theme'
import { Edge as EdgeProps } from 'models'
import React from 'react'
import { AnswersCount } from 'services/analytics'
@@ -51,7 +52,7 @@ export const Edges = ({
>
<path
d="M7.07138888,5.50174526 L2.43017246,7.82235347 C1.60067988,8.23709976 0.592024983,7.90088146 0.177278692,7.07138888 C0.0606951226,6.83822174 0,6.58111307 0,6.32042429 L0,1.67920787 C0,0.751806973 0.751806973,0 1.67920787,0 C1.93989666,0 2.19700532,0.0606951226 2.43017246,0.177278692 L7,3 C7.82949258,3.41474629 8.23709976,3.92128809 7.82235347,4.75078067 C7.6598671,5.07575341 7.39636161,5.33925889 7.07138888,5.50174526 Z"
fill="#718096"
fill={colors.gray[400]}
/>
</marker>
<marker
@@ -66,7 +67,7 @@ export const Edges = ({
>
<path
d="M7.07138888,5.50174526 L2.43017246,7.82235347 C1.60067988,8.23709976 0.592024983,7.90088146 0.177278692,7.07138888 C0.0606951226,6.83822174 0,6.58111307 0,6.32042429 L0,1.67920787 C0,0.751806973 0.751806973,0 1.67920787,0 C1.93989666,0 2.19700532,0.0606951226 2.43017246,0.177278692 L7,3 C7.82949258,3.41474629 8.23709976,3.92128809 7.82235347,4.75078067 C7.6598671,5.07575341 7.39636161,5.33925889 7.07138888,5.50174526 Z"
fill="#1a5fff"
fill={colors.blue[400]}
/>
</marker>
<marker