attaching accounts and displaying errors

src/components/profile/ProfileAccountsError/index.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+import styles from './styles.scss';
+import { Group } from '~/components/containers/Group';
+import { ERROR_LITERAL } from '~/constants/errors';
+import { Button } from '~/components/input/Button';
+
+interface IProps {
+  onClose: () => void;
+  error: string;
+}
+
+const ProfileAccountsError: FC<IProps> = ({ onClose, error }) => (
+  <div className={styles.wrap}>
+    <Group className={styles.content}>
+      <div className={styles.title}>О НЕТ!</div>
+      <div className={styles.text}>{ERROR_LITERAL[error] || error}</div>
+      <Button onClick={onClose}>Оу, жаль</Button>
+    </Group>
+  </div>
+);
+
+export { ProfileAccountsError };

src/components/profile/ProfileAccountsError/styles.scss

@@ -0,0 +1,36 @@
+.wrap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  background-color: transparentize(black, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  @include can_backdrop {
+  background-color: transparentize($content_bg, 0.5);
+    backdrop-filter: blur(10px);
+  }
+}
+
+.title {
+  text-transform: capitalize;
+  font: $font_cell_title;
+}
+
+.text {
+  padding: $gap 0 $gap * 3;
+}
+
+.content {
+  max-width: 260px;
+  width: 100%;
+  color: white;
+  border-radius: $radius;
+  background-color: $content_bg;
+  padding: $gap * 2;
+  line-height: 1.2em;
+}