Add Escape key handlers to close modals and adjust hover colors in footer buttons

Author: robertpiosik

packages/ui/src/components/editor/panel/modals/AutoClosingModal/AutoClosingModal.tsx

@@ -29,6 +29,7 @@ export const AutoClosingModal: React.FC<Props> = (props) => {
       onKeyDown={(e) => {
         if (e.key == 'Escape') {
           e.stopPropagation()
+          props.on_close()
         }
       }}
     >

packages/ui/src/components/editor/panel/modals/EditCheckpointDescriptionModal/EditCheckpointDescriptionModal.tsx

@@ -17,6 +17,7 @@ export const EditCheckpointDescriptionModal: React.FC<Props> = (props) => {
       onKeyDown={(e) => {
         if (e.key == 'Escape') {
           e.stopPropagation()
+          props.on_cancel()
         }
       }}
     >

packages/ui/src/components/editor/panel/modals/ProgressModal/ProgressModal.tsx

@@ -87,6 +87,7 @@ export const ProgressModal: React.FC<Props> = (props) => {
       onKeyDown={(e) => {
         if (e.key == 'Escape') {
           e.stopPropagation()
+          props.on_cancel?.()
         }
       }}
     >

packages/ui/src/components/editor/panel/modals/QRCodeModal/QRCodeModal.tsx

@@ -15,6 +15,7 @@ export const QRCodeModal: React.FC<Props> = (props) => {
       onKeyDown={(e) => {
         if (e.key == 'Escape') {
           e.stopPropagation()
+          props.on_close()
         }
       }}
     >

packages/vscode/src/views/panel/frontend/components/Layout/Footer/Footer.module.scss

@@ -56,7 +56,7 @@
       }
 
       &:hover {
-        background-color: color-mix(in srgb, #f7d600, black 10%);
+        background-color: color-mix(in srgb, #f7d600, transparent 20%);
       }
     }
 
@@ -68,7 +68,7 @@
       }
 
       &:hover {
-        background-color: color-mix(in srgb, #ff4500, black 10%);
+        background-color: color-mix(in srgb, #ff4500, transparent 10%);
       }
     }
 
@@ -80,7 +80,7 @@
       }
 
       &:hover {
-        background-color: color-mix(in srgb, #5765f2, black 10%);
+        background-color: color-mix(in srgb, #5765f2, transparent 10%);
       }
     }
   }