Feature/sckan 345 b

frontend/src/Pages/StatementDetails.tsx

@@ -87,6 +87,7 @@ const StatementDetails = () => {
 
   const handleNavigateCancel = () => {
     setIsNavigateDialogOpen(false);
+    scrollToElement(6);
   };
 
   const scrollToElement = (index: number) => {

frontend/src/components/ProofingTab/GraphDiagram/GraphDiagram.tsx

@@ -274,7 +274,7 @@ const GraphDiagram: React.FC<GraphDiagramProps> = ({
   }, []);
 
   return (
-    <Box>
+    <Box id='graph-container'>
       <NavigationMenu
         engine={engine}
         statementId={statementId || "-1"}

frontend/src/components/ProofingTab/GraphDiagram/Widgets/DestinationNodeWidget.tsx

@@ -63,6 +63,8 @@ export const DestinationNodeWidget: React.FC<DestinationNodeProps> = ({
                 display: "flex",
                 width: "7rem",
                 height: "7rem",
+                marginTop: "1rem",
+                marginLeft: "1rem",
                 padding: "0",
                 flexDirection: "column",
                 justifyContent: "center",

frontend/src/components/ProofingTab/GraphDiagram/Widgets/ViaNodeWidget.tsx

@@ -66,6 +66,8 @@ export const ViaNodeWidget: React.FC<ViaNodeProps> = ({ model, engine }) => {
                 display: "flex",
                 width: "6.25rem",
                 height: "6.25rem",
+                marginTop: "1.5rem",
+                marginLeft: "1.5rem",
                 padding: "1.25rem 0.75rem",
                 flexDirection: "column",
                 justifyContent: "center",
@@ -135,7 +137,7 @@ export const ViaNodeWidget: React.FC<ViaNodeProps> = ({ model, engine }) => {
                         boxShadow:
                             "0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)",
                         position: "absolute",
-                        top: 0,
+                        top: "-1px",
                         width: "18rem",
                         zIndex: isActive ? zIndex : "auto",
                         maxHeight: "36rem",

frontend/src/components/ProofingTab/ProofingTab.tsx

@@ -76,12 +76,11 @@ const ProofingTab = (props: any) => {
                 paddingBottom: '1.5rem'
               }}>
                 <Typography variant="h5">Statement Display</Typography>
-                <Button startIcon={<ArrowCircleDownIcon />} variant="text" sx={{
+                <Button startIcon={<ArrowCircleDownIcon />} variant="text" disabled={true} sx={{
                   color: theme.palette.primary.dark,
                   p: 0
                 }}>Download graph</Button>
               </Box>
-
               <StatementChart statement={statement} setStatement={setStatement} />
             </Stack>
             {hasJourney && (

frontend/src/components/Sidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Box from "@mui/material/Box";
 import Drawer from "@mui/material/Drawer";
 import Toolbar from "@mui/material/Toolbar";
@@ -92,6 +92,12 @@ const Sidebar = () => {
     dispatch(setPositionChangeOnly(false));
   };
 
+  useEffect(() => {
+    document.getElementById("graph-container")?.scrollIntoView();
+    document.getElementById("graph-container")?.focus();
+  }
+  , [isDialogOpen]);
+
   return (
     <>
     <Drawer variant="permanent" sx={drawerStyle}>

frontend/src/settings.ts

@@ -16,13 +16,13 @@ export const CONFIRMATION_DIALOG_CONFIG = {
     Icon: LockIcon
   },
   Navigate: {
-    title: 'Your changes are not locked.',
-    confirmationText: 'The connectivity data have been changed. The diagram will reset to match data in the Path Builder.',
+    title: 'Changes have been made.',
+    confirmationText: 'The diagram will revert to default routing to match the Path Builder information.',
     Icon: WarningIcon
   },
   Redraw: {
     title: 'Are you sure you want to redraw the diagram?',
-    confirmationText: 'The diagram will be redrawn using default routing. return to default. Are you sure you’d like to proceed?',
+    confirmationText: 'The diagram will be redrawn using the default routing. Are you sure you’d like to proceed?',
     Icon: RestartIcon
   },
-}
+}