Move modals and rename classes to match file names (#1367)

## Launch Checklist

I've created a folder for modals and moved them all inside.
I removed the icons which were small files with no real benefit and
moved the icons to where they were used.
I fixed an issue with the close button position in modal.
I've added missing translation to "Links" in debug modal.

Before: 

<img width="610" height="81" alt="image"
src="https://github.com/user-attachments/assets/dd7520f6-9634-4ff1-a83d-99ceae7c9144"
/>

After:
<img width="610" height="81" alt="image"
src="https://github.com/user-attachments/assets/fe3a2ccf-6c09-42ab-bf6f-dd30d3c68e13"
/>


 - [x] Briefly describe the changes in this PR.
- [x] Include before/after visuals or gifs if this PR includes visual
changes.
 - [ ] Add an entry to `CHANGELOG.md` under the `## main` section.

src/components/modals/Modal.tsx

@@ -0,0 +1,71 @@
+import React, { PropsWithChildren } from 'react'
+import {MdClose} from 'react-icons/md'
+import AriaModal from 'react-aria-modal'
+import classnames from 'classnames';
+import { WithTranslation, withTranslation } from 'react-i18next';
+
+type ModalInternalProps = PropsWithChildren & {
+  "data-wd-key"?: string
+  isOpen: boolean
+  title: string
+  onOpenToggle(value: boolean): unknown
+  underlayClickExits?: boolean
+  className?: string
+} & WithTranslation;
+
+
+class ModalInternal extends React.Component<ModalInternalProps> {
+  static defaultProps = {
+    underlayClickExits: true
+  }
+
+  // See <https://github.com/maplibre/maputnik/issues/416>
+  onClose = () => {
+    if (document.activeElement) {
+      (document.activeElement as HTMLElement).blur();
+    }
+
+    setTimeout(() => {
+      this.props.onOpenToggle(false);
+    }, 0);
+  }
+
+  render() {
+    const t = this.props.t;
+    if(this.props.isOpen) {
+      return <AriaModal
+        titleText={this.props.title}
+        underlayClickExits={this.props.underlayClickExits}
+        data-wd-key={this.props["data-wd-key"]}
+        verticallyCenter={true}
+        onExit={this.onClose}
+        dialogClass='maputnik-modal-container'
+      >
+        <div className={classnames("maputnik-modal", this.props.className)}
+          data-wd-key={this.props["data-wd-key"]}
+        >
+          <header className="maputnik-modal-header">
+            <h1 className="maputnik-modal-header-title">{this.props.title}</h1>
+            <span className="maputnik-space"></span>
+            <button className="maputnik-modal-header-toggle"
+              title={t("Close modal")}
+              onClick={this.onClose}
+              data-wd-key={this.props["data-wd-key"]+".close-modal"}
+            >
+              <MdClose />
+            </button>
+          </header>
+          <div className="maputnik-modal-scroller">
+            <div className="maputnik-modal-content">{this.props.children}</div>
+          </div>
+        </div>
+      </AriaModal>
+    }
+    else {
+      return false;
+    }
+  }
+}
+
+const Modal = withTranslation()(ModalInternal);
+export default Modal;