fix: update styling

Author: pkulkark

branching_xblock/static/css/branching_xblock.css

@@ -187,24 +187,43 @@
     text-decoration: none;
 }
 
+.branching-scenario .action-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
+
 .undo-button {
-    border: none;
+    border: 1px solid #4a5568;
     border-radius: 4px;
     padding: 0.6em 1.2em;
     font-size: 1em;
     cursor: pointer;
-    background-image: none !important;
-    margin-left: 1em;
+    background: transparent;
+    color: #1f2a37;
 }
 
 .reset-button {
-    border: 1px solid #4a5568;
+    border: 1px solid #c2410c;
     border-radius: 4px;
     padding: 0.6em 1.2em;
     font-size: 1em;
     cursor: pointer;
     background: transparent;
-    color: #1f2a37;
+    color: #c2410c;
+}
+
+.reset-button:hover,
+.reset-button:focus {
+    background: #fff7ed;
+    border-color: #9a3412;
+    color: #9a3412;
+}
+
+.reset-button:focus-visible {
+    outline: 2px solid #ea580c;
+    outline-offset: 2px;
 }
 
 .score-display {

branching_xblock/static/html/branching_xblock.html

@@ -13,12 +13,14 @@
         </div>
         <div class="choices" data-role="choices"></div>
 
-        <button class="undo-button action-secondary btn-secondary" data-role="undo" style="display: none;">
-            Go Back
-        </button>
-        <button type="button" class="reset-button action-secondary btn-secondary" data-role="reset-activity" style="display: none;">
-            Reset
-        </button>
+        <div class="action-row">
+            <button class="undo-button action-secondary btn-secondary" data-role="undo" style="display: none;">
+                Go Back
+            </button>
+            <button type="button" class="reset-button action-secondary btn-secondary" data-role="reset-activity" style="display: none;">
+                Reset
+            </button>
+        </div>
 
         <div class="score-display" data-role="score" style="display: none;"></div>
     </div>

branching_xblock/static/js/src/branching_xblock.js

@@ -160,7 +160,10 @@ function BranchingXBlock(runtime, element) {
         const canUndo = state.enable_undo && state.history.length > 0;
         $el.find('.undo-button').toggle(canUndo);
 
-        const showReset = Boolean(state.enable_reset_activity);
+        const isAtStartNode = Boolean(
+            state.current_node && state.current_node.id === state.start_node_id
+        );
+        const showReset = Boolean(state.enable_reset_activity && !isAtStartNode);
         $el.find('[data-role="reset-activity"]').toggle(showReset);
 
         const $score = $el.find('[data-role="score"]');