fix contract

src/ui/React/CodingContractPopup.tsx

@@ -3,7 +3,6 @@ import { KEY } from "../../../utils/helpers/keyCodes";
 
 import { CodingContract, CodingContractType, CodingContractTypes } from "../../CodingContracts";
 import { ClickableTag, CopyableText } from "./CopyableText";
-import { PopupCloseButton } from "./PopupCloseButton";
 
 type IProps = {
   c: CodingContract;
@@ -28,9 +27,6 @@ export function CodingContractPopup(props: IProps): React.ReactElement {
     if (event.keyCode === KEY.ENTER && value !== "") {
       event.preventDefault();
       props.onAttempt(answer);
-    } else if (event.keyCode === KEY.ESC) {
-      event.preventDefault();
-      props.onClose();
     }
   }
 
@@ -59,8 +55,9 @@ export function CodingContractPopup(props: IProps): React.ReactElement {
         onChange={onChange}
         onKeyDown={onKeyDown}
       />
-      <PopupCloseButton popup={props.popupId} onClose={() => props.onAttempt(answer)} text={"Solve"} />
-      <PopupCloseButton popup={props.popupId} onClose={props.onClose} text={"Close"} />
+      <button className={"std-button"} onClick={() => props.onAttempt(answer)}>
+        Solve
+      </button>
     </div>
   );
 }

src/ui/React/Popup.tsx

@@ -9,12 +9,12 @@ interface IProps<T> {
   content: (props: T) => React.ReactElement;
   id: string;
   props: T;
-  removePopup: (id: string) => void;
+  removePopup: () => void;
 }
 
 export function Popup<T>(props: IProps<T>): React.ReactElement {
   function keyDown(event: KeyboardEvent): void {
-    if (event.key === "Escape") props.removePopup(props.id);
+    if (event.key === "Escape") props.removePopup();
   }
 
   useEffect(() => {

src/ui/React/createPopup.tsx

@@ -39,15 +39,17 @@ export function createPopup<T>(
   id: string,
   rootComponent: (props: T) => React.ReactElement,
   props: T,
+  onClose?: () => void,
 ): HTMLElement | null {
   let container = document.getElementById(id);
   if (container == null) {
-    function onClick(this: HTMLElement, event: MouseEvent): any {
+    function onClick(this: HTMLElement, event: MouseEvent): void {
       if (!event.srcElement) return;
       if (!(event.srcElement instanceof HTMLElement)) return;
       const clickedId = (event.srcElement as HTMLElement).id;
       if (clickedId !== id) return;
       removePopup(id);
+      if (onClose) onClose();
     }
     const backgroundColor = deepestPopupId === "" ? "rgba(0,0,0,0.5)" : "rgba(0,0,0,0)";
     container = createElement("div", {
@@ -62,7 +64,18 @@ export function createPopup<T>(
   }
 
   if (deepestPopupId === "") deepestPopupId = id;
-  ReactDOM.render(<Popup content={rootComponent} id={id} props={props} removePopup={removePopup} />, container);
+  ReactDOM.render(
+    <Popup
+      content={rootComponent}
+      id={id}
+      props={props}
+      removePopup={() => {
+        removePopup(id);
+        if (onClose) onClose();
+      }}
+    />,
+    container,
+  );
 
   return container;
 }