add some additional UX to entropy exchange

Assets/Scripts/UI/MainMenuController.cs

@@ -84,6 +84,7 @@ namespace KernelPanic.UI
         private Button rootCreditExchangeMaxButton;
         private Button rootCreditExchangeConfirmButton;
         private Button rootCreditExchangeCancelButton;
+        private Button rootCreditExchangeCloseButton;
         private Button collectionUnitsButton;
         private Button collectionLanguagesButton;
         private readonly ScreenFrameController runSetupFrame = new();
@@ -214,6 +215,7 @@ namespace KernelPanic.UI
             rootCreditExchangeMaxButton = root.Q<Button>("RootCreditExchangeMaxButton");
             rootCreditExchangeConfirmButton = root.Q<Button>("RootCreditExchangeConfirmButton");
             rootCreditExchangeCancelButton = root.Q<Button>("RootCreditExchangeCancelButton");
+            rootCreditExchangeCloseButton = root.Q<Button>("RootCreditExchangeCloseButton");
             collectionUnitsButton = root.Q<Button>("CollectionUnitsButton");
             collectionLanguagesButton = root.Q<Button>("CollectionLanguagesButton");
         }
@@ -304,6 +306,16 @@ namespace KernelPanic.UI
                 rootCreditExchangeCancelButton.clicked += CloseRootCreditExchange;
             }
 
+            if (rootCreditExchangeCloseButton != null)
+            {
+                rootCreditExchangeCloseButton.clicked += CloseRootCreditExchange;
+            }
+
+            if (rootCreditExchangeModal != null)
+            {
+                rootCreditExchangeModal.RegisterCallback<KeyDownEvent>(HandleRootCreditExchangeKeyDown, TrickleDown.TrickleDown);
+            }
+
             collectionScreen.ViewChanged += SyncCollectionFrame;
             collectionUnitsButton.RegisterCallback<ClickEvent>(HandleCollectionUnitsTabClicked);
             collectionLanguagesButton.RegisterCallback<ClickEvent>(HandleCollectionLanguagesTabClicked);
@@ -363,6 +375,16 @@ namespace KernelPanic.UI
                 rootCreditExchangeCancelButton.clicked -= CloseRootCreditExchange;
             }
 
+            if (rootCreditExchangeCloseButton != null)
+            {
+                rootCreditExchangeCloseButton.clicked -= CloseRootCreditExchange;
+            }
+
+            if (rootCreditExchangeModal != null)
+            {
+                rootCreditExchangeModal.UnregisterCallback<KeyDownEvent>(HandleRootCreditExchangeKeyDown, TrickleDown.TrickleDown);
+            }
+
             collectionScreen.ViewChanged -= SyncCollectionFrame;
             collectionUnitsButton.UnregisterCallback<ClickEvent>(HandleCollectionUnitsTabClicked);
             collectionLanguagesButton.UnregisterCallback<ClickEvent>(HandleCollectionLanguagesTabClicked);
@@ -400,6 +422,17 @@ namespace KernelPanic.UI
             root.Focus();
         }
 
+        private void HandleRootCreditExchangeKeyDown(KeyDownEvent evt)
+        {
+            if (!rootCreditExchangeOpen || evt.keyCode != KeyCode.Escape)
+            {
+                return;
+            }
+
+            CloseRootCreditExchange();
+            evt.StopImmediatePropagation();
+        }
+
         private void HandleRootCreditExchangeInputChanged(ChangeEvent<string> evt)
         {
             RefreshRootCreditExchange();

Assets/UI/MainMenu.uss

@@ -1075,6 +1075,7 @@ ScrollView .unity-base-slider__dragger {
 }
 
 .root-credit-dialog {
+    position: relative;
     width: 82%;
     height: 72%;
     padding: 28px;
@@ -1090,6 +1091,35 @@ ScrollView .unity-base-slider__dragger {
     background-color: var(--kp-bg-solid);
 }
 
+.modal-close-button {
+    position: absolute;
+    top: 14px;
+    right: 14px;
+    width: 32px;
+    height: 32px;
+    padding-left: 0;
+    padding-right: 0;
+    border-left-width: 1px;
+    border-right-width: 1px;
+    border-top-width: 1px;
+    border-bottom-width: 1px;
+    border-left-color: var(--kp-amber);
+    border-right-color: var(--kp-amber);
+    border-top-color: var(--kp-amber);
+    border-bottom-color: var(--kp-amber);
+    background-color: transparent;
+    color: var(--kp-amber);
+    -unity-text-align: middle-center;
+}
+
+.modal-close-button:hover {
+    color: var(--kp-primary);
+    border-left-color: var(--kp-primary);
+    border-right-color: var(--kp-primary);
+    border-top-color: var(--kp-primary);
+    border-bottom-color: var(--kp-primary);
+}
+
 .exchange-summary {
     margin-top: 8px;
     margin-bottom: 18px;

Assets/UI/MainMenu.uxml

@@ -191,6 +191,7 @@
         </ui:VisualElement>
         <ui:VisualElement name="RootCreditExchangeModal" class="modal-overlay hidden">
             <ui:VisualElement class="root-credit-dialog">
+                <ui:Button name="RootCreditExchangeCloseButton" text="X" class="modal-close-button" focusable="false" />
                 <ui:Label text="exchange root-credits" class="starter-title" />
                 <ui:Label text="convert root-credits into entropy at 1:1. entropy cannot be converted back." class="starter-instruction" />
                 <ui:VisualElement class="exchange-summary">