added contacts

src/components/boris/BorisContactItem/index.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import { Icon } from '~/components/input/Icon';
+
+interface Props {
+  icon: string;
+  title: string;
+  subtitle: string;
+  link: string;
+}
+
+const BorisContactItem: FC<Props> = ({ icon, title, subtitle, link }) => (
+  <a className={styles.item} href={link} target="_blank">
+    <div className={styles.icon}>
+      <Icon icon={icon} size={32} />
+    </div>
+
+    <div className={styles.info}>
+      <div className={styles.title}>{title}</div>
+      <div className={styles.subtitle}>{subtitle}</div>
+    </div>
+  </a>
+);
+
+export { BorisContactItem };

src/components/boris/BorisContactItem/styles.module.scss

@@ -0,0 +1,29 @@
+@import "~/styles/variables.scss";
+
+.item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: stretch;
+  text-decoration: none;
+  color: darken(white, 50%);
+}
+
+.icon {
+  fill: currentColor;
+  height: 32px;
+}
+
+.info {
+  flex: 1;
+  margin-left: $gap;
+}
+
+.title {
+  font: $font_16_semibold;
+}
+
+.subtitle {
+  font: $font_12_medium;
+  opacity: 0.7;
+}

src/layouts/BorisLayout/index.tsx

@@ -26,6 +26,7 @@ import { Tab } from '~/components/dialogs/Tab';
 import { useHistory, useLocation } from 'react-router';
 import { Card } from '~/components/containers/Card';
 import { SidebarRouter } from '~/containers/main/SidebarRouter';
+import { BorisContactItem } from '~/components/boris/BorisContactItem';
 
 type IProps = {};
 
@@ -122,19 +123,26 @@ const BorisLayout: FC<IProps> = () => {
           <Group className={styles.stats}>
             <StickyBox className={styles.sticky} offsetTop={72} offsetBottom={10}>
               <Group className={styles.stats__container}>
-                <div className={styles.stats__about}>
+                <div className={styles.super_powers}>
-                  <h4>Господи-боженьки, где это я?</h4>
+                  {user.is_user && <BorisSuperpowers active={is_tester} onChange={setBetaTester} />}
-
-                  <p>
-                    Всё впорядке, это &mdash; главный штаб Суицидальных Роботов, строителей Убежища.
-                  </p>
-                  <p>Здесь мы сидим и слушаем всё, что вас беспокоит.</p>
-                  <p>Все виновные будут наказаны. Невиновные, впрочем, тоже. </p>
-                  <p className="grey">//&nbsp;Такова&nbsp;жизнь.</p>
                 </div>
 
-                <div>
+                <div className={styles.contacts}>
-                  {user.is_user && <BorisSuperpowers active={is_tester} onChange={setBetaTester} />}
+                  <div className={styles.contacts__title}>Где мы ещё:</div>
+
+                  <BorisContactItem
+                    icon="vk"
+                    title="Суицидальные роботы"
+                    link="https://vk.com/vault48"
+                    subtitle="паблик вконтакте"
+                  />
+
+                  <BorisContactItem
+                    icon="telegram"
+                    title="Boris[48]bot"
+                    link="https://t.me/boris48bot"
+                    subtitle="телеграм-бот"
+                  />
                 </div>
 
                 <div className={styles.stats__wrap}>

src/layouts/BorisLayout/styles.module.scss

@@ -157,3 +157,25 @@
   z-index: 1;
   flex: 3;
 }
+
+.contacts {
+  display: grid;
+  grid-auto-flow: row;
+  grid-row-gap: $gap;
+  padding: 2px 2px $gap * 3 2px;
+
+  & > *:not(:last-child) {
+    border-bottom: 1px solid #333333;
+    padding-bottom: $gap * 2;
+  }
+}
+
+.contacts__title {
+  font: $font_12_semibold;
+  text-transform: uppercase;
+  opacity: 0.3;
+}
+
+.super_powers {
+  padding: $gap * 2 0;
+}

src/sprites/Sprites.tsx

@@ -317,6 +317,14 @@ const Sprites: FC = () => (
         d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"
       />
     </g>
+
+    <g id="telegram">
+      <path fill="none" d="M0 0h24v24H0V0z" stroke="none" />
+      <path
+        stroke="none"
+        d="M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10c5.52,0,10-4.48,10-10C22,6.48,17.52,2,12,2z M16.64,8.8 c-0.15,1.58-0.8,5.42-1.13,7.19c-0.14,0.75-0.42,1-0.68,1.03c-0.58,0.05-1.02-0.38-1.58-0.75c-0.88-0.58-1.38-0.94-2.23-1.5 c-0.99-0.65-0.35-1.01,0.22-1.59c0.15-0.15,2.71-2.48,2.76-2.69c0.01-0.03,0.01-0.12-0.05-0.18c-0.06-0.05-0.14-0.03-0.21-0.02 c-0.09,0.02-1.49,0.95-4.22,2.79c-0.4,0.27-0.76,0.41-1.08,0.4c-0.36-0.01-1.04-0.2-1.55-0.37c-0.63-0.2-1.12-0.31-1.08-0.66 c0.02-0.18,0.27-0.36,0.74-0.55c2.92-1.27,4.86-2.11,5.83-2.51c2.78-1.16,3.35-1.36,3.73-1.36c0.08,0,0.27,0.02,0.39,0.12 c0.1,0.08,0.13,0.19,0.14,0.27C16.63,8.48,16.65,8.66,16.64,8.8z"
+      />
+    </g>
   </svg>
 );