removed redux completely

src/components/dialogs/BetterScrollDialog/index.tsx

@@ -0,0 +1,73 @@
+import React, { FC, MouseEventHandler, useEffect, useRef } from 'react';
+import styles from './styles.module.scss';
+import { clearAllBodyScrollLocks, disableBodyScroll } from 'body-scroll-lock';
+import { Icon } from '~/components/input/Icon';
+import { LoaderCircle } from '~/components/input/LoaderCircle';
+
+interface IProps {
+  children: React.ReactChild;
+  header?: JSX.Element;
+  footer?: JSX.Element;
+  backdrop?: JSX.Element;
+  size?: 'medium' | 'big';
+  width?: number;
+  error?: string;
+  is_loading?: boolean;
+  overlay?: JSX.Element;
+
+  onOverlayClick?: MouseEventHandler<HTMLDivElement>;
+  onRefCapture?: (ref: any) => void;
+  onClose?: () => void;
+}
+
+const BetterScrollDialog: FC<IProps> = ({
+  children,
+  header,
+  footer,
+  backdrop,
+  width = 600,
+  error,
+  onClose,
+  is_loading,
+  overlay = null,
+}) => {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    disableBodyScroll(ref.current, { reserveScrollBarGap: true });
+
+    return () => clearAllBodyScrollLocks();
+  }, [ref]);
+
+  return (
+    <div className={styles.wrap} ref={ref}>
+      {backdrop && <div className={styles.backdrop}>{backdrop}</div>}
+
+      <div className={styles.container} style={{ maxWidth: width }}>
+        {onClose && (
+          <div className={styles.close} onClick={onClose}>
+            <Icon icon="close" />
+          </div>
+        )}
+        {header && <div className={styles.header}>{header}</div>}
+
+        <div className={styles.body}>
+          {children}
+          {error && <div className={styles.error}>{error}</div>}
+        </div>
+
+        {!!is_loading && (
+          <div className={styles.shade}>
+            <LoaderCircle size={48} />
+          </div>
+        )}
+
+        {overlay}
+
+        {footer && <div className={styles.footer}>{footer}</div>}
+      </div>
+    </div>
+  );
+};
+
+export { BetterScrollDialog };

src/components/dialogs/BetterScrollDialog/styles.module.scss

@@ -0,0 +1,144 @@
+@import "src/styles/variables";
+
+.wrap {
+  width: 100vw;
+  height: 100vh;
+  background: transparentize(darken($content_bg, 4%), 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 70px 20px 40px 20px;
+  box-sizing: border-box;
+
+  @include tablet {
+    padding: 70px 5px 5px 5px;
+  }
+}
+
+.container {
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  flex-direction: column;
+  min-width: $cell;
+  max-width: 400px;
+  max-height: 100%;
+  max-height: calc(100vh - 75px);
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+
+  & > div:nth-child(2) {
+    border-top-left-radius: $dialog_radius;
+    border-top-right-radius: $dialog_radius;
+  }
+
+  & > div:last-child {
+    border-bottom-left-radius: $dialog_radius;
+    border-bottom-right-radius: $dialog_radius;
+  }
+}
+
+.header,
+.footer {
+  @include outer_shadow();
+
+  // padding: 10px;
+  background: darken($content_bg, 2%);
+}
+
+.body {
+  @include outer_shadow();
+
+  position: relative;
+  overflow: auto;
+  flex: 1;
+  background: $content_bg;
+}
+
+@keyframes appear {
+  0% {
+    top: -48px;
+  }
+  100% {
+    top: -58px;
+  }
+}
+
+.close {
+  background: darken($content_bg, 2%);
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  top: -58px;
+  right: 50%;
+  transform: translate(50%, 0);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  cursor: pointer;
+  transition: transform 0.25s, background-color 0.25s;
+  animation: appear 0.5s forwards;
+
+  &:hover {
+    background-color: $red;
+    transform: translate(50%, -5px);
+  }
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.error {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 40px;
+  pointer-events: none;
+  background: linear-gradient(0deg, $red 50%, transparentize($red, 1));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0 0 $radius $radius;
+  z-index: 11;
+}
+
+.backdrop {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.shade {
+  position: absolute;
+  background: transparentize($content_bg, 0.3);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $radius;
+  animation: appear 1s forwards;
+
+  svg {
+    fill: white;
+  }
+}

src/components/dialogs/DialogTitle/index.tsx

@@ -1,5 +1,5 @@
-import React, { FC, ReactNode } from "react";
-import styles from "./styles.module.scss";
+import React, { FC, ReactNode } from 'react';
+import styles from './styles.module.scss';
 
 interface IProps {
   children: ReactNode;

src/components/dialogs/ModalWrapper/index.tsx

@@ -1,6 +1,6 @@
-import React, { FC, MouseEventHandler } from "react";
-import ReactDOM from "react-dom";
-import styles from "./styles.module.scss";
+import React, { FC, MouseEventHandler } from 'react';
+import ReactDOM from 'react-dom';
+import styles from './styles.module.scss';
 
 type IProps = {
   onOverlayClick: MouseEventHandler;

src/components/dialogs/Tabs/index.tsx

@@ -1,6 +1,6 @@
-import React, { createContext, FC, useContext, useMemo, useState, VFC } from "react";
-import styles from "./styles.module.scss";
-import classNames from "classnames";
+import React, { createContext, FC, useContext, useMemo, useState, VFC } from 'react';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
 
 interface TabProps {
   items: string[];