lots of UI changes, and keyboard command support

src/views/components/common/Panel/Panel.module.scss

@@ -0,0 +1,24 @@
+@import 'src/views/styles/base.module.scss';
+
+.container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    top: 0;
+
+    &.overlay {
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 2147483647;
+    }
+}
+
+.body {
+    overflow-y: auto;
+    z-index: 2147483647;
+    background-color: rgb(52, 53, 65);
+    box-shadow: 0px 12px 30px 0px #323e5f29;
+    transition: box-shadow 0.15s;
+}

src/views/components/common/Panel/Panel.tsx

@@ -0,0 +1,31 @@
+import classNames from 'classnames';
+import React, { PropsWithChildren } from 'react';
+import styles from './Panel.module.scss';
+
+interface Props {
+    testId?: string;
+    style?: React.CSSProperties;
+    className?: string;
+    overlay?: boolean;
+}
+
+/**
+ *
+ */
+export default function Panel(props: PropsWithChildren<Props>) {
+    return (
+        <div
+            style={props.style}
+            className={classNames(
+                styles.container,
+                {
+                    [styles.overlay]: props.overlay,
+                },
+                props.className
+            )}
+            data-testid={props.testId}
+        >
+            <div className={styles.body}>{props.children}</div>
+        </div>
+    );
+}