diff --git a/ui100/src/AccessEdge.tsx b/ui100/src/AccessEdge.tsx index 48f16b1f..2c542fe2 100644 --- a/ui100/src/AccessEdge.tsx +++ b/ui100/src/AccessEdge.tsx @@ -2,7 +2,11 @@ import {BaseEdge, EdgeProps} from "@xyflow/react"; const AccessEdge = (props: EdgeProps) => { const { sourceX, sourceY, targetX, targetY, id, markerEnd } = props; - const edgePath = `M ${sourceX} ${sourceY} L ${sourceX} ${sourceY + 20} L ${targetX} ${targetY + 20} L ${targetX} ${targetY}`; + const edgePath = `M ${sourceX} ${sourceY} ` + + `L ${sourceX} ${sourceY + 20} ` + + `L ${sourceX + (targetX - sourceX) / 2} ${sourceY + 50 + ((sourceX - targetX) * .05) + (targetY - sourceY) / 2} ` + + `L ${targetX} ${targetY + 20} ` + + `L ${targetX} ${targetY}`; return ; } diff --git a/ui100/src/AccessPanel.tsx b/ui100/src/AccessPanel.tsx index 1c81f255..6fe7d5d2 100644 --- a/ui100/src/AccessPanel.tsx +++ b/ui100/src/AccessPanel.tsx @@ -124,10 +124,13 @@ const AccessPanel = ({ access }: AccessPanelProps) => { - + {String(access.data.label)} + +
A private access frontend with the token {access.id}
+
diff --git a/ui100/src/AccountPanel.tsx b/ui100/src/AccountPanel.tsx index e937b915..fab278c1 100644 --- a/ui100/src/AccountPanel.tsx +++ b/ui100/src/AccountPanel.tsx @@ -11,7 +11,7 @@ interface AccountPanelProps { account: Node; } -const AccountPanel = ({ account}: AccountPanelProps) => { +const AccountPanel = ({ account }: AccountPanelProps) => { const user = useStore((state) => state.user); const customProps = { @@ -24,10 +24,13 @@ const AccountPanel = ({ account}: AccountPanelProps) => { return ( - + {String(account.data.label)} + +
Your zrok account identified by the email {user.email}
+
diff --git a/ui100/src/EnvironmentPanel.tsx b/ui100/src/EnvironmentPanel.tsx index fed12971..e5d7a662 100644 --- a/ui100/src/EnvironmentPanel.tsx +++ b/ui100/src/EnvironmentPanel.tsx @@ -128,10 +128,13 @@ const EnvironmentPanel = ({environment}: EnvironmentPanelProps) => { return ( <> - + {String(environment.data.label)} + +
An environment on a host with address {detail ? detail.address : ''}
+
diff --git a/ui100/src/SharePanel.tsx b/ui100/src/SharePanel.tsx index 8970f177..88056902 100644 --- a/ui100/src/SharePanel.tsx +++ b/ui100/src/SharePanel.tsx @@ -130,12 +130,15 @@ const SharePanel = ({ share }: SharePanelProps) => { return ( <> - + - {String(share.data.label)} + {String(share.data.label)} + + +
A {detail ? detail.shareMode : ''}{detail && detail.reserved ? ', reserved ' : ''} share with the token {share.id}
- + diff --git a/ui100/src/TabularView.tsx b/ui100/src/TabularView.tsx index eea0c813..61901f10 100644 --- a/ui100/src/TabularView.tsx +++ b/ui100/src/TabularView.tsx @@ -162,6 +162,9 @@ const TabularView = () => { } }, positionToolbarAlertBanner: "bottom", + mrtTheme: (theme) => ({ + matchHighlightColor: 'rgba(155, 243, 22, 1)' + }), }); return (