Merge pull request #22 from officialblake/jacobs999-develop

Author: officialblake

src/App.css

@@ -573,3 +573,26 @@ canvas {
   height: 650px !important;
   overflow: visible !important;
 }
+
+/* Confirm Transition Button Styles */
+.confirm-transition-button {
+    font-size: 1.2rem !important;
+    padding: 16px 32px !important;
+    background: linear-gradient(135deg, var(--accent-color), var(--accent-light)) !important;
+    font-weight: 600 !important;
+    letter-spacing: 1.5px !important;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
+    transform: scale(1.1) !important;
+    margin: 15px 0 !important;
+}
+
+.confirm-transition-button:hover {
+    transform: scale(1.15) translateY(-2px) !important;
+    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.3) !important;
+}
+
+.confirm-transition-button:disabled {
+    transform: scale(1) !important;
+    background: var(--secondary-color) !important;
+    opacity: 0.7 !important;
+}

src/Canvas.js

@@ -177,13 +177,49 @@ const DfaNfaVisualizer = () => {
 
             link.attr({
                 line: {
-                    stroke: 'black',
-                    strokeWidth: 2,
-                    targetMarker: { type: 'path', d: 'M 10 -5 0 0 10 5 Z', fill: 'black' },
+                    stroke: 'var(--accent-color)',
+                    strokeWidth: 2.5,
+                    targetMarker: { 
+                        type: 'path', 
+                        d: 'M 12 -6 0 0 12 6 Z', 
+                        fill: 'var(--accent-color)',
+                        stroke: 'var(--accent-color)'
+                    },
+                    strokeDasharray: '0',
+                    targetMarkerSize: 12,
                 },
             });
             link.labels([{
-                attrs: { text: { text: transitionLabel, fontSize: 14, fontWeight: 'bold' } },
+                markup: [
+                    {
+                        tagName: 'rect',
+                        selector: 'body'
+                    },
+                    {
+                        tagName: 'text',
+                        selector: 'label'
+                    }
+                ],
+                attrs: { 
+                    label: { 
+                        text: transitionLabel, 
+                        fontSize: 15,
+                        fontWeight: 'bold',
+                        fontFamily: 'var(--font-family)',
+                        fill: '#000000',
+                        textAnchor: 'middle',
+                        textVerticalAnchor: 'middle'
+                    },
+                    body: {
+                        fill: '#FFFFFF',
+                        stroke: 'var(--accent-color)',
+                        strokeWidth: 2,
+                        width: 20,
+                        height: 22,
+                        x: -10,  // Half of width to center
+                        y: -11   // Half of height to center
+                    }
+                },
                 position: 0.5,
             }]);
             link.addTo(graph);
@@ -888,6 +924,7 @@ const DfaNfaVisualizer = () => {
                                 />
 
                                 <button
+                                    className="confirm-transition-button button"
                                     onClick={confirmTransition}
                                     disabled={!transitionSource || !transitionTarget || !transitionLabel}
                                 >