feat: allow change proxies sorting in group

4 files changed, 97 insertions, 0 deletions

diff --git a/src/components/shared/BaseModal.js b/src/components/shared/BaseModal.js
new file mode 100644
index 0000000..8bbdbf4
--- /dev/null
+++ b/src/components/shared/BaseModal.js
@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+import Modal from 'react-modal';
+import cx from 'classnames';
+
+import modalStyle from '../Modal.module.css';
+import s from './BaseModal.module.css';
+
+const { useMemo } = React;
+
+export default function BaseModal({ isOpen, onRequestClose, children }) {
+  const className = useMemo(
+    () => ({
+      base: cx(modalStyle.content, s.cnt),
+      afterOpen: s.afterOpen,
+      beforeClose: '',
+    }),
+    []
+  );
+  return (
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      className={className}
+      overlayClassName={cx(modalStyle.overlay, s.overlay)}
+    >
+      {children}
+    </Modal>
+  );
+}
diff --git a/src/components/shared/BaseModal.module.css b/src/components/shared/BaseModal.module.css
new file mode 100644
index 0000000..1d206e1
--- /dev/null
+++ b/src/components/shared/BaseModal.module.css
@@ -0,0 +1,17 @@
+.overlay {
+  background-color: rgba(0, 0, 0, 0.6);
+}
+.cnt {
+  position: absolute;
+  background-color: var(--bg-modal);
+  color: var(--color-text);
+  line-height: 1.4;
+  opacity: 0.6;
+  transition: all 0.3s ease;
+  transform: translate(-50%, -50%) scale(1.2);
+  box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 4px, rgba(0, 0, 0, 0.24) 0px 16px 32px;
+}
+.afterOpen {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+}
diff --git a/src/components/shared/Select.module.css b/src/components/shared/Select.module.css
new file mode 100644
index 0000000..32343ea
--- /dev/null
+++ b/src/components/shared/Select.module.css
@@ -0,0 +1,29 @@
+.select {
+  height: 30px;
+  width: 100%;
+  padding-left: 8px;
+  background-color: transparent;
+  appearance: none;
+  /* background-color: rgb(36, 36, 36); */
+  /* -webkit-appearance: none; */
+  color: var(--color-text);
+  /* color: rgb(153, 153, 153); */
+  padding-right: 20px;
+  background-image: url(data:image/svg+xml,%0A%20%20%20%20%3Csvg%20width%3D%228%22%20height%3D%2224%22%20viewBox%3D%220%200%208%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%207L7%2011H1L4%207Z%22%20fill%3D%22%23999999%22%20%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%2017L1%2013L7%2013L4%2017Z%22%20fill%3D%22%23999999%22%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20);
+  border-radius: 4px;
+  border-width: 1px;
+  border-style: solid;
+  border-image: initial;
+  border-color: var(--select-border-color);
+  transition: all 100ms ease 0s;
+  background-position: calc(100% - 8px) center;
+  background-repeat: no-repeat;
+}
+
+.select:hover,
+.select:focus {
+  border-color: rgb(52, 52, 52);
+  outline: none !important;
+  color: var(--color-text-highlight);
+  background-image: var(--select-bg-hover);
+}
diff --git a/src/components/shared/Select.tsx b/src/components/shared/Select.tsx
new file mode 100644
index 0000000..03ac084
--- /dev/null
+++ b/src/components/shared/Select.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import s from './Select.module.css';
+
+type Props = {
+  options: Array<string[]>;
+  selected: string;
+  onChange: (event: React.ChangeEvent<HTMLSelectElement>) => any;
+};
+
+export default function Select({ options, selected, onChange }: Props) {
+  return (
+    <select className={s.select} value={selected} onChange={onChange}>
+      {options.map(([value, name]) => (
+        <option key={value} value={value}>
+          {name}
+        </option>
+      ))}
+    </select>
+  );
+}