refactor main components and IProps

src/components/common/ArcProgress/index.tsx

@@ -4,12 +4,12 @@ import { describeArc } from '~/utils/dom';
 
 import styles from './styles.module.scss';
 
-interface IProps {
+interface Props {
   size: number;
   progress?: number;
 }
 
-export const ArcProgress: FC<IProps> = ({ size, progress = 0 }) => (
+export const ArcProgress: FC<Props> = ({ size, progress = 0 }) => (
   <svg className={styles.icon} width={size} height={size}>
     <path
       d={describeArc(

src/components/common/Authorized/index.tsx

@@ -4,12 +4,12 @@ import { observer } from 'mobx-react-lite';
 
 import { useAuth } from '~/hooks/auth/useAuth';
 
-interface IProps {
+interface Props {
   // don't wait for user refetch, trust hydration
   hydratedOnly?: boolean;
 }
 
-const Authorized: FC<IProps> = observer(({ children, hydratedOnly }) => {
+const Authorized: FC<Props> = observer(({ children, hydratedOnly }) => {
   const { isUser, fetched } = useAuth();
 
   if (!isUser || (!hydratedOnly && !fetched)) return null;

src/components/common/BetterScrollDialog/index.tsx

@@ -7,7 +7,7 @@ import { LoaderCircle } from '~/components/common/LoaderCircle';
 
 import styles from './styles.module.scss';
 
-interface IProps {
+interface Props {
   children: ReactChild;
   header?: JSX.Element;
   footer?: JSX.Element;
@@ -23,7 +23,7 @@ interface IProps {
   onClose?: () => void;
 }
 
-const BetterScrollDialog: FC<IProps> = ({
+const BetterScrollDialog: FC<Props> = ({
   children,
   header,
   footer,

src/components/common/BlurWrapper/index.tsx

@@ -4,9 +4,9 @@ import classNames from 'classnames';
 
 import styles from './styles.module.scss';
 
-type IProps = AllHTMLAttributes<HTMLDivElement> & { is_blurred: boolean };
+type Props = AllHTMLAttributes<HTMLDivElement> & { is_blurred: boolean };
 
-export const BlurWrapper: FC<IProps> = ({ children, is_blurred }) => (
+export const BlurWrapper: FC<Props> = ({ children, is_blurred }) => (
   <div className={classNames(styles.blur, { [styles.is_blurred]: is_blurred })}>
     {children}
   </div>

src/components/common/BottomContainer/index.tsx

@@ -0,0 +1,11 @@
+import styles from './styles.module.scss';
+
+const BottomContainer = ({ children }) => (
+  <div className={styles.wrap}>
+    <div className={styles.content}>
+      <div className={styles.padder}></div>
+    </div>
+  </div>
+);
+
+export { BottomContainer };

src/components/common/BottomContainer/styles.module.scss

@@ -0,0 +1,39 @@
+@import 'src/styles/variables';
+
+.wrap {
+  position: fixed;
+  bottom: 0;
+  pointer-events: none;
+  touch-action: none;
+  height: $bar_height;
+  display: flex;
+  z-index: 10;
+  width: 100%;
+  left: 0;
+  align-items: center;
+  justify-content: center;
+  //padding: 0 calc(min(100vw, #{$content_width}) - 64px) 0 $gap;
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.content {
+  position: relative;
+  flex: 0 1 $content_width;
+  height: $bar_height;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.padder {
+  display: flex;
+  flex-basis: calc(min(100vw - 94px, #{$content_width}));
+  align-items: center;
+  justify-content: flex-end;
+
+  & > div {
+    pointer-events: all;
+    touch-action: auto;
+  }
+}

src/components/common/CellGrid/index.tsx

@@ -4,12 +4,12 @@ import classNames from 'classnames';
 
 import styles from './styles.module.scss';
 
-type IProps = HTMLAttributes<HTMLDivElement> & {
+type Props = HTMLAttributes<HTMLDivElement> & {
   children: any;
   size: number;
 };
 
-const CellGrid: FC<IProps> = ({ children, size, className, ...props }) => (
+const CellGrid: FC<Props> = ({ children, size, className, ...props }) => (
   <div
     className={classNames(styles.grid, className)}
     style={{ gridTemplateColumns: `repeat(auto-fit, minmax(${size}px, 1fr))` }}

src/components/common/Container/index.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+
+import classNames from 'classnames';
+
+import styles from './styles.module.scss';
+
+interface Props {
+  className?: string;
+}
+
+const Container: FC<Props> = ({ className, children }) => (
+  <div className={classNames(styles.container, className)}>{children}</div>
+);
+
+export { Container };

src/components/common/Container/styles.module.scss

@@ -0,0 +1,5 @@
+@import "src/styles/variables.scss";
+
+.container {
+  @include container;
+}

src/components/common/CoverBackdrop/index.tsx

@@ -8,11 +8,11 @@ import { getURL } from '~/utils/dom';
 
 import styles from './styles.module.scss';
 
-interface IProps {
+interface Props {
   cover: IUser['cover'];
 }
 
-const CoverBackdrop: FC<IProps> = ({ cover }) => {
+const CoverBackdrop: FC<Props> = ({ cover }) => {
   const ref = useRef<HTMLImageElement>(null);
 
   const [is_loaded, setIsLoaded] = useState(false);

src/components/common/DialogTitle/index.tsx

@@ -2,11 +2,11 @@ import { FC, ReactNode } from 'react';
 
 import styles from './styles.module.scss';
 
-interface IProps {
+interface Props {
   children: ReactNode;
 }
 
-const DialogTitle: FC<IProps> = ({ children }) => (
+const DialogTitle: FC<Props> = ({ children }) => (
   <h2 className={styles.title}>{children}</h2>
 );
 

src/components/common/Filler/index.tsx

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 
 import styles from './styles.module.scss';
 
-type IProps = HTMLAttributes<HTMLDivElement>;
+type Props = HTMLAttributes<HTMLDivElement>;
 
-export const Filler: FC<IProps> = ({ className = '', ...props }) => (
+export const Filler: FC<Props> = ({ className = '', ...props }) => (
   <div className={classNames(styles.filler, className)} {...props} />
 );

src/components/common/Footer/index.tsx

@@ -0,0 +1,14 @@
+import { FC, memo } from 'react';
+
+import styles from './styles.module.scss';
+
+interface Props {}
+
+const Footer: FC<Props> = memo(() => (
+  <footer className={styles.footer}>
+    <div className={styles.slogan}>Уделяй больше времени тишине. Спасибо</div>
+    <div className={styles.copy}>2009 - {new Date().getFullYear()}</div>
+  </footer>
+));
+
+export { Footer };

src/components/common/Footer/styles.module.scss

@@ -0,0 +1,25 @@
+@import 'src/styles/variables';
+
+.footer {
+  display: flex;
+  flex-direction: row;
+  font: $font_12_semibold;
+  background: $content_bg_dark;
+  border-radius: 0 0 $radius $radius;
+  align-items: center;
+  text-transform: uppercase;
+  color: $gray_75;
+  padding-top: 2px;
+  box-sizing: border-box;
+
+  @include outer_shadow();
+}
+
+.slogan {
+  flex: 1;
+  padding: $gap;
+}
+
+.copy {
+  padding: $gap;
+}

src/components/common/GodRays/index.tsx

@@ -0,0 +1,135 @@
+import { Component } from 'react';
+
+interface IGodRaysProps {
+  raised?: boolean;
+}
+
+export class GodRays extends Component<IGodRaysProps> {
+  state = {
+    width: 0,
+    height: 0,
+    rays: [...new Array(6)].map(() => ({
+      angle: Math.random() * 1.4 - 0.7,
+      iterator: Math.random() > 0.5 ? 1 : -1,
+      speed: Math.random() * 0.0005 + 0.0005,
+      weight: Math.random() * 300,
+      opacity: Math.random(),
+      pulsar: Math.random() > 0.5 ? 1 : -1,
+    })),
+    particles: [],
+  };
+
+  init = () => {
+    window.requestAnimationFrame(() => this.draw());
+
+    this.inc = 1;
+  };
+
+  draw = () => {
+    if (this.props.raised || !this.canvas) {
+      return setTimeout(() => window.requestAnimationFrame(this.draw), 500);
+    }
+
+    const { width, height, rays } = this.state;
+
+    const ctx = this.canvas.getContext('2d');
+
+    if (!ctx) {
+      return;
+    }
+
+    ctx.globalCompositeOperation = 'luminosity';
+    ctx.clearRect(0, 0, width, height + 100); // clear canvas
+    ctx.save();
+
+    rays.forEach(
+      ({ angle, iterator, weight, speed, pulsar, opacity }, index) => {
+        const gradient = ctx.createLinearGradient(0, 0, 0, height * 1.3);
+        gradient.addColorStop(0.2, `rgba(160, 255, 60, ${opacity * 0.1})`);
+        gradient.addColorStop(1, 'rgba(160, 255, 60, 0)');
+
+        const gradient2 = ctx.createLinearGradient(0, 0, 0, height * 1.3);
+        gradient2.addColorStop(0.2, `rgba(60, 255, 200, ${opacity * 0.2})`);
+        gradient2.addColorStop(1, 'rgba(60, 255, 200, 0)');
+
+        ctx.save();
+        ctx.translate(width / 2, -900);
+        ctx.rotate(angle);
+        ctx.translate(-width / 2, 900);
+
+        ctx.beginPath();
+        ctx.fillStyle = gradient;
+        ctx.moveTo(width / 2 - weight / 2, -900);
+        ctx.lineTo(width / 2 + weight / 2, -900);
+        ctx.lineTo(width / 2 + (weight / 2 + 300), height * 1.4);
+        ctx.lineTo(width / 2 - (weight / 2 + 300), height * 1.4);
+        ctx.fill();
+        ctx.closePath();
+
+        ctx.beginPath();
+        ctx.fillStyle = gradient2;
+        ctx.moveTo(width / 2 - weight / 6, -900);
+        ctx.lineTo(width / 2 + weight / 6, -900);
+        ctx.lineTo(width / 2 + (weight / 6 + 50), height * 1.4);
+        ctx.lineTo(width / 2 - (weight / 6 + 250), height * 1.4);
+        ctx.fill();
+        ctx.closePath();
+
+        rays[index].angle += iterator * speed;
+        rays[index].opacity += pulsar * 0.01;
+
+        if (rays[index].angle > 0.8) rays[index].iterator = -1;
+        if (rays[index].angle < -0.8) rays[index].iterator = 1;
+
+        if (rays[index].opacity >= 1) rays[index].pulsar = -1;
+        if (rays[index].opacity <= 0) rays[index].pulsar = 1;
+
+        ctx.restore();
+      },
+    );
+
+    setTimeout(() => window.requestAnimationFrame(this.draw), 1000 / 15);
+  };
+
+  componentDidMount() {
+    const { innerWidth: width, innerHeight: height } = window;
+    this.setState({ width, height });
+    this.init();
+  }
+
+  render() {
+    const { width, height } = this.state;
+
+    return (
+      <div
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          zIndex: 0,
+          opacity: 1,
+          pointerEvents: 'none',
+        }}
+      >
+        <canvas
+          width={width}
+          height={height + 100}
+          style={{
+            filter: 'blur(50px)',
+            position: 'relative',
+            top: -100,
+          }}
+          ref={(el) => {
+            this.canvas = el;
+          }}
+        />
+      </div>
+    );
+  }
+
+  canvas: HTMLCanvasElement | null | undefined;
+
+  inc;
+}

src/components/common/Grid/index.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import styles from './styles.module.scss';
 
-type IProps = HTMLAttributes<HTMLDivElement> & {
+type Props = HTMLAttributes<HTMLDivElement> & {
   horizontal?: boolean;
   vertical?: boolean;
   columns?: string;
@@ -15,7 +15,7 @@ type IProps = HTMLAttributes<HTMLDivElement> & {
   stretchy?: boolean;
 };
 
-const Grid: FC<IProps> = ({
+const Grid: FC<Props> = ({
   children,
   className = '',
   horizontal = false,

src/components/common/Group/index.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import styles from './styles.module.scss';
 
-type IProps = HTMLAttributes<HTMLDivElement> & {
+type Props = HTMLAttributes<HTMLDivElement> & {
   horizontal?: boolean;
   top?: boolean;
   bottom?: boolean;
@@ -12,7 +12,7 @@ type IProps = HTMLAttributes<HTMLDivElement> & {
   seamless?: boolean;
 };
 
-const Group: FC<IProps> = ({
+const Group: FC<Props> = ({
   children,
   className = '',
   horizontal = false,

src/components/common/Icon/index.tsx

@@ -2,12 +2,12 @@ import { FC, SVGAttributes } from 'react';
 
 import { IIcon } from '~/types';
 
-type IProps = SVGAttributes<SVGElement> & {
+type Props = SVGAttributes<SVGElement> & {
   size?: number;
   icon: IIcon;
 };
 
-export const Icon: FC<IProps> = ({ size = 20, icon, style, ...props }) => (
+export const Icon: FC<Props> = ({ size = 20, icon, style, ...props }) => (
   <svg
     width={size}
     height={size}

src/components/common/InfiniteScroll/index.tsx

@@ -2,13 +2,13 @@ import { FC, HTMLAttributes, useCallback, useEffect, useRef } from 'react';
 
 import styles from './styles.module.scss';
 
-interface IProps extends HTMLAttributes<HTMLDivElement> {
+interface Props extends HTMLAttributes<HTMLDivElement> {
   hasMore: boolean;
   scrollReactPx?: number;
   loadMore: () => void;
 }
 
-const InfiniteScroll: FC<IProps> = ({
+const InfiniteScroll: FC<Props> = ({
   children,
   hasMore,
   scrollReactPx,

src/components/common/LoaderCircle/components/LoaderCircleInner/index.tsx

@@ -6,12 +6,12 @@ import { describeArc } from '~/utils/dom';
 
 import styles from './styles.module.scss';
 
-interface IProps extends SVGAttributes<SVGElement> {
+interface Props extends SVGAttributes<SVGElement> {
   size: number;
   className?: string;
 }
 
-const LoaderCircleInner: FC<IProps> = ({ size, className, ...props }) => (
+const LoaderCircleInner: FC<Props> = ({ size, className, ...props }) => (
   <svg
     className={classNames(styles.icon, className)}
     width={size}

src/components/common/LoaderCircle/index.tsx

@@ -7,12 +7,12 @@ import { SVGProps } from '~/utils/types';
 import { LoaderCircleInner } from './components/LoaderCircleInner';
 import styles from './styles.module.scss';
 
-interface IProps extends SVGProps {
+interface Props extends SVGProps {
   size?: number;
   className?: string;
 }
 
-export const LoaderCircle: FC<IProps> = ({ size = 24, className }) => (
+export const LoaderCircle: FC<Props> = ({ size = 24, className }) => (
   <div className={classNames(styles.wrap, 'loader-circle', className)}>
     <LoaderCircleInner size={size} />
   </div>

src/components/common/Logo/index.tsx

@@ -0,0 +1,10 @@
+import { Anchor } from '~/components/common/Anchor';
+import { URLS } from '~/constants/urls';
+
+import styles from './styles.module.scss';
+
+export const Logo = () => (
+  <Anchor className={styles.logo} href={URLS.BASE}>
+    VAULT
+  </Anchor>
+);

src/components/common/Logo/styles.module.scss

@@ -0,0 +1,9 @@
+@import "src/styles/variables";
+
+.logo {
+  font: $font_24_bold;
+  display: flex;
+  user-select: none;
+  color: white;
+  text-decoration: none;
+}

src/components/common/MainPreloader/index.tsx

@@ -0,0 +1,18 @@
+import { VFC } from 'react';
+
+interface MainPreloaderProps {}
+
+const MainPreloader: VFC<MainPreloaderProps> = () => (
+  <div id="main_loader">
+    <div id="preload_shade">
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+
+    <div>СМИРЕННО</div>
+    <div>ОЖИДАЙТЕ</div>
+  </div>
+);
+
+export { MainPreloader };

src/components/common/MainPreloader/styles.module.scss

@@ -0,0 +1,60 @@
+@keyframes erdball {
+  0% {
+    transform: translate(0, 100%);
+  }
+
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
+.main_loader {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background: #222222;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  font: 600 22px 'Montserrat';
+  color: white;
+
+  & > div {
+    margin: 3px 0;
+  }
+}
+
+.preload_shade {
+  width: 120px;
+  height: 120px;
+  box-shadow: white 0 0 0 3px;
+  border-radius: 100%;
+  overflow: hidden;
+  position: relative;
+  margin-bottom: 15px !important;
+
+  & > span {
+    width: 100%;
+    height: 100%;
+    box-shadow: white 0 0 0 2px;
+    border-radius: 100%;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    animation: erdball 3s infinite;
+    will-change: transform;
+
+    &:nth-child(2) {
+      animation-delay: -1s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: -2s;
+    }
+  }
+}

src/components/common/Markdown/index.tsx

@@ -5,12 +5,12 @@ import classNames from 'classnames';
 import styles from '~/styles/common/markdown.module.scss';
 import { formatText } from '~/utils/dom';
 
-interface IProps
+interface Props
   extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   children?: string;
 }
 
-const Markdown: VFC<IProps> = ({ className, children = '', ...props }) => (
+const Markdown: VFC<Props> = ({ className, children = '', ...props }) => (
   <div
     className={classNames(styles.wrapper, className)}
     {...props}

src/components/common/ModalWrapper/index.tsx

@@ -4,11 +4,11 @@ import ReactDOM from 'react-dom';
 
 import styles from './styles.module.scss';
 
-type IProps = {
+type Props = {
   onOverlayClick: MouseEventHandler;
 };
 
-const ModalWrapper: FC<IProps> = ({ children, onOverlayClick }) => {
+const ModalWrapper: FC<Props> = ({ children, onOverlayClick }) => {
   return ReactDOM.createPortal(
     <div className={styles.fixed}>
       <div className={styles.overlay} onClick={onOverlayClick} />

src/components/common/Padder/index.tsx

@@ -4,13 +4,13 @@ import classNames from 'classnames';
 
 import styles from './styles.module.scss';
 
-type IProps = HTMLAttributes<HTMLDivElement> & {
+type Props = HTMLAttributes<HTMLDivElement> & {
   padding?: number;
   vertical?: boolean;
   horizontal?: boolean;
 };
 
-const Padder: FC<IProps> = ({
+const Padder: FC<Props> = ({
   padding,
   children,
   className,

src/components/common/Panel/index.tsx

@@ -4,12 +4,12 @@ import classNames from 'classnames';
 
 import styles from './styles.module.scss';
 
-type IProps = HTMLAttributes<HTMLDivElement> & {
+type Props = HTMLAttributes<HTMLDivElement> & {
   seamless?: boolean;
   stretchy?: boolean;
 };
 
-const Panel: FC<IProps> = ({
+const Panel: FC<Props> = ({
   className,
   children,
   seamless,

src/components/common/Sticky/index.tsx

@@ -2,11 +2,11 @@ import { DetailsHTMLAttributes, FC } from 'react';
 
 import StickyBox from 'react-sticky-box';
 
-interface IProps extends DetailsHTMLAttributes<HTMLDivElement> {
+interface Props extends DetailsHTMLAttributes<HTMLDivElement> {
   offsetTop?: number;
 }
 
-const Sticky: FC<IProps> = ({ children, offsetTop = 65 }) => (
+const Sticky: FC<Props> = ({ children, offsetTop = 65 }) => (
   <StickyBox offsetTop={offsetTop} offsetBottom={10}>
     {children}
   </StickyBox>

src/components/common/Superpower/index.tsx

@@ -4,9 +4,9 @@ import { observer } from 'mobx-react-lite';
 
 import { useAuth } from '~/hooks/auth/useAuth';
 
-interface IProps {}
+interface Props {}
 
-const Superpower: FC<IProps> = observer(({ children }) => {
+const Superpower: FC<Props> = observer(({ children }) => {
   const { isTester } = useAuth();
 
   if (!isTester) return null;

src/components/common/TagField/index.tsx

@@ -2,9 +2,9 @@ import { FC, HTMLAttributes } from 'react';
 
 import styles from './styles.module.scss';
 
-type IProps = HTMLAttributes<HTMLDivElement> & {};
+type Props = HTMLAttributes<HTMLDivElement> & {};
 
-const TagField: FC<IProps> = ({ children }) => (
+const TagField: FC<Props> = ({ children }) => (
   <div className={styles.wrap}>{children}</div>
 );