From c939dcbce84d8e3a1169265852369110efc453cc Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 19 Mar 2021 16:35:24 +0700
Subject: [PATCH] #23 lost fixes

---
 package.json                                  |   1 +
 src/components/boris/BorisComments/index.tsx  |  40 +++++++
 .../boris/BorisComments/styles.module.scss    |  18 +++
 src/components/boris/BorisUIDemo/index.tsx    |  51 +++++++++
 .../boris/BorisUIDemo/styles.module.scss      |  11 ++
 .../EditorPublicSwitch/styles.module.scss     | 108 +++++++++---------
 src/components/input/Button/index.tsx         |  68 +++--------
 .../input/Button/styles.module.scss           |  92 ++++++---------
 src/containers/dialogs/EditorDialog/index.tsx |   2 +-
 .../node/BorisLayout/styles.module.scss       |  16 ---
 src/sprites/Sprites.tsx                       |   4 +-
 yarn.lock                                     |  20 ++++
 12 files changed, 254 insertions(+), 177 deletions(-)
 create mode 100644 src/components/boris/BorisComments/index.tsx
 create mode 100644 src/components/boris/BorisComments/styles.module.scss
 create mode 100644 src/components/boris/BorisUIDemo/index.tsx
 create mode 100644 src/components/boris/BorisUIDemo/styles.module.scss

diff --git a/package.json b/package.json
index 5ca469e5..512261d1 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "@tippy.js/react": "^3.1.1",
     "autosize": "^4.0.2",
     "axios": "^0.21.1",
     "body-scroll-lock": "^2.6.4",
diff --git a/src/components/boris/BorisComments/index.tsx b/src/components/boris/BorisComments/index.tsx
new file mode 100644
index 00000000..7cddfd67
--- /dev/null
+++ b/src/components/boris/BorisComments/index.tsx
@@ -0,0 +1,40 @@
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import { Group } from '~/components/containers/Group';
+import { NodeCommentForm } from '~/components/node/NodeCommentForm';
+import { NodeNoComments } from '~/components/node/NodeNoComments';
+import { NodeComments } from '~/components/node/NodeComments';
+import { Footer } from '~/components/main/Footer';
+import { Card } from '~/components/containers/Card';
+import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { selectAuthUser } from '~/redux/auth/selectors';
+import { IComment, INode } from '~/redux/types';
+
+interface IProps {
+  isLoadingComments: boolean;
+  commentCount: number;
+  node: INode;
+  comments: IComment[];
+}
+
+const BorisComments: FC<IProps> = ({ isLoadingComments, node, commentCount, comments }) => {
+  const user = useShallowSelect(selectAuthUser);
+
+  return (
+    <Card className={styles.content}>
+      <Group className={styles.grid}>
+        {user.is_user && <NodeCommentForm isBefore nodeId={node.id} />}
+
+        {isLoadingComments ? (
+          <NodeNoComments is_loading count={7} />
+        ) : (
+          <NodeComments comments={comments} count={commentCount} user={user} order="ASC" />
+        )}
+      </Group>
+
+      <Footer />
+    </Card>
+  );
+};
+
+export { BorisComments };
diff --git a/src/components/boris/BorisComments/styles.module.scss b/src/components/boris/BorisComments/styles.module.scss
new file mode 100644
index 00000000..1dcd3c24
--- /dev/null
+++ b/src/components/boris/BorisComments/styles.module.scss
@@ -0,0 +1,18 @@
+@import "~/styles/variables.scss";
+
+.content {
+  flex: 4;
+  z-index: 2;
+  border-radius: $radius;
+  padding: 0;
+  background: $node_bg;
+  box-shadow: inset transparentize(mix($wisegreen, white, 60%), 0.6) 0 1px;
+
+  @include desktop {
+    flex: 2.5;
+  }
+
+  @media(max-width: 1024px) {
+    flex: 2;
+  }
+}
diff --git a/src/components/boris/BorisUIDemo/index.tsx b/src/components/boris/BorisUIDemo/index.tsx
new file mode 100644
index 00000000..bba0c86a
--- /dev/null
+++ b/src/components/boris/BorisUIDemo/index.tsx
@@ -0,0 +1,51 @@
+import React, { FC } from 'react';
+import { Card } from '~/components/containers/Card';
+import styles from './styles.module.scss';
+import markdown from '~/styles/common/markdown.module.scss';
+import { Group } from '~/components/containers/Group';
+import { Button } from '~/components/input/Button';
+
+interface IProps {}
+
+const BorisUIDemo: FC<IProps> = () => (
+  <Card className={styles.card}>
+    <div className={markdown.wrapper}>
+      <h1>UI</h1>
+      <p>
+        Простая демонстрация элементов интерфейса. Используется, в основном, как подсказка при
+        разработке
+      </p>
+
+      <h2>Кнопки</h2>
+
+      <h4>Цвета</h4>
+
+      <Group horizontal className={styles.sample}>
+        <Button>Primary</Button>
+        <Button color="secondary">Secondary</Button>
+        <Button color="outline">Outline</Button>
+        <Button color="gray">Gray</Button>
+        <Button color="link">Link</Button>
+      </Group>
+
+      <h4>Размеры</h4>
+
+      <Group horizontal className={styles.sample}>
+        <Button size="micro">Micro</Button>
+        <Button size="mini">Mini</Button>
+        <Button size="normal">Normal</Button>
+        <Button size="big">Big</Button>
+        <Button size="giant">Giant</Button>
+      </Group>
+
+      <h4>Варианты</h4>
+      <Group horizontal className={styles.sample}>
+        <Button iconRight="check">iconRight</Button>
+        <Button iconLeft="send">iconLeft</Button>
+        <Button round>Round</Button>
+      </Group>
+    </div>
+  </Card>
+);
+
+export { BorisUIDemo };
diff --git a/src/components/boris/BorisUIDemo/styles.module.scss b/src/components/boris/BorisUIDemo/styles.module.scss
new file mode 100644
index 00000000..5d9eacfd
--- /dev/null
+++ b/src/components/boris/BorisUIDemo/styles.module.scss
@@ -0,0 +1,11 @@
+.card {
+  flex: 3;
+  align-self: stretch;
+  position: relative;
+  z-index: 1;
+  padding: 20px 30px;
+}
+
+.sample {
+  flex-wrap: wrap;
+}
diff --git a/src/components/editors/EditorPublicSwitch/styles.module.scss b/src/components/editors/EditorPublicSwitch/styles.module.scss
index e41682c0..95aa2412 100644
--- a/src/components/editors/EditorPublicSwitch/styles.module.scss
+++ b/src/components/editors/EditorPublicSwitch/styles.module.scss
@@ -1,63 +1,63 @@
 @import "src/styles/variables";
 
-.wrap {
-  @include outer_shadow();
-  @include editor_round_button();
-
-  transition: all 0.5s;
-  fill: $content_bg;
-  background-color: $olive;
-
-  &.promoted {
-    background-color: lighten($content_bg, 4%);
-    fill: $red;
+@keyframes move_1 {
+  0% {
+    transform: scale(0) translate(0, 0);
+    opacity: 0;
   }
 
-  &:hover {
+  50% {
+    transform: scale(1)  translate(5px, -5px);
     opacity: 1;
+  }
 
-    .tooltip {
-      opacity: 1;
+  100% {
+    transform: scale(1.2) translate(-5px, -10px);
+    opacity: 0;
+  }
+}
+
+
+@keyframes move_2 {
+  0% {
+    transform: scale(0) translate(0, 0);
+    opacity: 0;
+  }
+
+  50% {
+    transform: scale(1)  translate(-5px, -5px);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(1.6) translate(5px, -10px);
+    opacity: 0;
+  }
+}
+
+.button {
+
+}
+
+.lab_wrapper {
+  position: relative;
+  bottom: -2px;
+
+  .button:hover & {
+    &:before,&:after {
+      content: ' ';
+      position: absolute;
+      top: 1px;
+      left: 10px;
+      width: 2px;
+      height: 2px;
+      box-shadow: white 0 0 0 2px;
+      border-radius: 4px;
+      animation: move_1 0.5s infinite linear;
+    }
+
+    &:after {
+      animation: move_2 0.5s -0.25s infinite linear;
     }
   }
-
-  input {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    z-index: 1;
-    cursor: pointer;
-  }
-}
-
-.icon {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.tooltip {
-  border-radius: 2px;
-  background: darken($content_bg, 6%);
-  padding: $gap;
-  position: absolute;
-  font: $font_12_semibold;
-  bottom: 100%;
-  right: 0;
-  transform: translate(0, -$gap);
-  text-align: center;
-  touch-action: none;
-  pointer-events: none;
-  opacity: 0;
-  width: 100px;
-  user-select: none;
-  transition: all 0.1s;
 }
diff --git a/src/components/input/Button/index.tsx b/src/components/input/Button/index.tsx
index 1f2a02a6..e0f3965d 100644
--- a/src/components/input/Button/index.tsx
+++ b/src/components/input/Button/index.tsx
@@ -1,30 +1,20 @@
 import classnames from 'classnames';
-import React, {
-  ButtonHTMLAttributes,
-  DetailedHTMLProps,
-  FC,
-  createElement,
-  memo,
-  useRef,
-} from 'react';
+import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC, memo, useMemo } from 'react';
 import styles from './styles.module.scss';
 import { Icon } from '~/components/input/Icon';
 import { IIcon } from '~/redux/types';
-import { usePopper } from 'react-popper';
+import Tippy from '@tippy.js/react';
+import 'tippy.js/dist/tippy.css';
 
 type IButtonProps = DetailedHTMLProps<
   ButtonHTMLAttributes<HTMLButtonElement>,
   HTMLButtonElement
 > & {
   size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro' | 'small';
-  color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray';
+  color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray' | 'lab';
   iconLeft?: IIcon;
   iconRight?: IIcon;
-  seamless?: boolean;
-  transparent?: boolean;
   title?: string;
-  non_submitting?: boolean;
-  is_loading?: boolean;
   stretchy?: boolean;
   iconOnly?: boolean;
   label?: string;
@@ -39,10 +29,6 @@ const Button: FC<IButtonProps> = memo(
     iconLeft,
     iconRight,
     children,
-    seamless = false,
-    transparent = false,
-    non_submitting = false,
-    is_loading,
     title,
     stretchy,
     disabled,
@@ -52,45 +38,27 @@ const Button: FC<IButtonProps> = memo(
     round,
     ...props
   }) => {
-    const tooltip = useRef<HTMLSpanElement | null>(null);
-    const pop = usePopper(tooltip?.current?.parentElement, tooltip.current, {
-      placement: 'top',
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: [0, 5],
-          },
-        },
-      ],
-    });
-
-    return createElement(
-      seamless || non_submitting ? 'div' : 'button',
-      {
-        className: classnames(styles.button, className, styles[size], styles[color], {
-          seamless,
-          transparent,
+    const computedClassName = useMemo(
+      () =>
+        classnames(styles.button, className, styles[size], styles[color], {
           disabled,
-          is_loading,
           stretchy,
           icon: ((iconLeft || iconRight) && !title && !children) || iconOnly,
           has_icon_left: !!iconLeft,
           has_icon_right: !!iconRight,
           round,
         }),
-        ...props,
-      },
-      [
-        iconLeft && <Icon icon={iconLeft} size={20} key={0} className={styles.icon_left} />,
-        title ? <span>{title}</span> : children || null,
-        iconRight && <Icon icon={iconRight} size={20} key={2} className={styles.icon_right} />,
-        !!label && (
-          <span ref={tooltip} className={styles.tooltip} style={pop.styles.popper} key="tooltip">
-            {label}
-          </span>
-        ),
-      ]
+      [round, disabled, className, stretchy, iconLeft, iconRight, size, color]
+    );
+
+    return (
+      <Tippy content={label || ''} enabled={!!label}>
+        <button className={computedClassName} {...props}>
+          {iconLeft && <Icon icon={iconLeft} size={20} key={0} className={styles.icon_left} />}
+          {!!title ? <span>{title}</span> : children}
+          {iconRight && <Icon icon={iconRight} size={20} key={2} className={styles.icon_right} />}
+        </button>
+      </Tippy>
     );
   }
 );
diff --git a/src/components/input/Button/styles.module.scss b/src/components/input/Button/styles.module.scss
index 255b3594..0489151c 100644
--- a/src/components/input/Button/styles.module.scss
+++ b/src/components/input/Button/styles.module.scss
@@ -34,11 +34,9 @@
   align-items: center;
   justify-content: center;
 
-  position: relative;
-
   filter: grayscale(0);
 
-  transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s;
+  transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s, background-color 0.5s;
   opacity: 0.8;
 
   @include outer_shadow();
@@ -79,30 +77,6 @@
     }
   }
 
-  &:global(.seamless) {
-    background: transparent;
-    color: black;
-    box-shadow: none;
-    fill: black;
-    stroke: black;
-    padding: 0;
-  }
-
-  &:global(.transparent) {
-    background: transparent;
-    color: white;
-    box-shadow: transparentize(black, 0.5) 0 0 4px;
-    padding: 0;
-    fill: black;
-    stroke: black;
-  }
-
-  &:global(.red) {
-    fill: $red;
-    stroke: $red;
-    color: $red;
-  }
-
   &:global(.stretchy) {
     flex: 1;
   }
@@ -111,8 +85,6 @@
   &:global(.grey) {
     background: transparentize(white, 0.9);
     color: white;
-    // background: lighten(white, 0.5);
-    // filter: grayscale(100%);
   }
 
   &:global(.disabled) {
@@ -145,14 +117,6 @@
     padding-right: $gap;
   }
 
-  &.primary {
-    background: $red_gradient;
-  }
-
-  &.secondary {
-    background: $green_gradient;
-  }
-
   &.outline {
     background: transparent;
     box-shadow: inset transparentize(white, 0.8) 0 0 0 2px;
@@ -184,32 +148,58 @@
   font: $font_12_semibold;
   padding: 0 15px;
   border-radius: $radius / 2;
+
+  &:global(.round) {
+    border-radius: 10px;
+  }
 }
+
 .mini {
   height: 28px;
   border-radius: $radius / 2;
+
+  &:global(.round) {
+    border-radius: 14px;
+  }
 }
+
 .small {
   height: 32px;
-  // border-radius: $radius / 2;
 
   svg {
     width: 24px;
     height: 24px;
   }
+
+  &:global(.round) {
+    border-radius: 16px;
+  }
 }
+
 .normal {
   height: 38px;
+
+  &:global(.round) {
+    border-radius: 19px;
+  }
 }
 
 .big {
   height: 40px;
+
+  &:global(.round) {
+    border-radius: 20px;
+  }
 }
 
 .giant {
   height: 50px;
   padding: 0 15px;
   min-width: 50px;
+
+  &:global(.round) {
+    border-radius: 25px;
+  }
 }
 
 .disabled {
@@ -228,20 +218,14 @@
   height: 20px;
 }
 
-.tooltip {
-  padding: 5px 10px;
-  background-color: darken($content_bg, 4%);
-  z-index: 2;
-  border-radius: $input_radius;
-  text-transform: none;
-  opacity: 0;
-  pointer-events: none;
-  touch-action: none;
-  transition: opacity 0.1s;
-  border: 1px solid transparentize(white, 0.9);
-
-  .button:hover & {
-    opacity: 1;
-    font: $font_14_semibold;
-  }
+.primary {
+  background: $red;
+}
+
+.secondary {
+  background: $wisegreen;
+}
+
+.lab {
+  background: $blue;
 }
diff --git a/src/containers/dialogs/EditorDialog/index.tsx b/src/containers/dialogs/EditorDialog/index.tsx
index a5a42243..564b5dfc 100644
--- a/src/containers/dialogs/EditorDialog/index.tsx
+++ b/src/containers/dialogs/EditorDialog/index.tsx
@@ -95,7 +95,7 @@ const EditorDialogUnconnected: FC<IProps> = ({
           maxLength={256}
         />
 
-        <Button title="Сохранить" iconRight="check" />
+        <Button title="Сохранить" iconRight="check" color={data.is_promoted ? 'primary' : 'lab'} />
       </Group>
     </Padder>
   );
diff --git a/src/containers/node/BorisLayout/styles.module.scss b/src/containers/node/BorisLayout/styles.module.scss
index f6e3c8ad..44c56d9b 100644
--- a/src/containers/node/BorisLayout/styles.module.scss
+++ b/src/containers/node/BorisLayout/styles.module.scss
@@ -7,22 +7,6 @@
   flex-direction: column;
 }
 
-.content {
-  flex: 4;
-  z-index: 2;
-  border-radius: $radius;
-  padding: 0;
-  background: $node_bg;
-  box-shadow: inset transparentize(mix($wisegreen, white, 60%), 0.6) 0 1px;
-
-  @include desktop {
-    flex: 2.5;
-  }
-
-  @media(max-width: 1024px) {
-    flex: 2;
-  }
-}
 
 .grid {
   padding: $gap;
diff --git a/src/sprites/Sprites.tsx b/src/sprites/Sprites.tsx
index b8123f8e..f822d726 100644
--- a/src/sprites/Sprites.tsx
+++ b/src/sprites/Sprites.tsx
@@ -257,12 +257,12 @@ const Sprites: FC<{}> = () => (
 
     <g id="waves" stroke="none">
       <path fill="none" d="M0 0h24v24H0V0z" />
-      <path d="M17 16.99c-1.35 0-2.2.42-2.95.8-.65.33-1.18.6-2.05.6-.9 0-1.4-.25-2.05-.6-.75-.38-1.57-.8-2.95-.8s-2.2.42-2.95.8c-.65.33-1.17.6-2.05.6v1.95c1.35 0 2.2-.42 2.95-.8.65-.33 1.17-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.42 2.95-.8c.65-.33 1.18-.6 2.05-.6.9 0 1.4.25 2.05.6.75.38 1.58.8 2.95.8v-1.95c-.9 0-1.4-.25-2.05-.6-.75-.38-1.6-.8-2.95-.8zm0-4.45c-1.35 0-2.2.43-2.95.8-.65.32-1.18.6-2.05.6-.9 0-1.4-.25-2.05-.6-.75-.38-1.57-.8-2.95-.8s-2.2.43-2.95.8c-.65.32-1.17.6-2.05.6v1.95c1.35 0 2.2-.43 2.95-.8.65-.35 1.15-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.43 2.95-.8c.65-.35 1.15-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.58.8 2.95.8v-1.95c-.9 0-1.4-.25-2.05-.6-.75-.38-1.6-.8-2.95-.8zm2.95-8.08c-.75-.38-1.58-.8-2.95-.8s-2.2.42-2.95.8c-.65.32-1.18.6-2.05.6-.9 0-1.4-.25-2.05-.6-.75-.37-1.57-.8-2.95-.8s-2.2.42-2.95.8c-.65.33-1.17.6-2.05.6v1.93c1.35 0 2.2-.43 2.95-.8.65-.33 1.17-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.43 2.95-.8c.65-.32 1.18-.6 2.05-.6.9 0 1.4.25 2.05.6.75.38 1.58.8 2.95.8V5.04c-.9 0-1.4-.25-2.05-.58zM17 8.09c-1.35 0-2.2.43-2.95.8-.65.35-1.15.6-2.05.6s-1.4-.25-2.05-.6c-.75-.38-1.57-.8-2.95-.8s-2.2.43-2.95.8c-.65.35-1.15.6-2.05.6v1.95c1.35 0 2.2-.43 2.95-.8.65-.32 1.18-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.43 2.95-.8c.65-.32 1.18-.6 2.05-.6.9 0 1.4.25 2.05.6.75.38 1.58.8 2.95.8V9.49c-.9 0-1.4-.25-2.05-.6-.75-.38-1.6-.8-2.95-.8z"/>
+      <path d="M17 16.99c-1.35 0-2.2.42-2.95.8-.65.33-1.18.6-2.05.6-.9 0-1.4-.25-2.05-.6-.75-.38-1.57-.8-2.95-.8s-2.2.42-2.95.8c-.65.33-1.17.6-2.05.6v1.95c1.35 0 2.2-.42 2.95-.8.65-.33 1.17-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.42 2.95-.8c.65-.33 1.18-.6 2.05-.6.9 0 1.4.25 2.05.6.75.38 1.58.8 2.95.8v-1.95c-.9 0-1.4-.25-2.05-.6-.75-.38-1.6-.8-2.95-.8zm0-4.45c-1.35 0-2.2.43-2.95.8-.65.32-1.18.6-2.05.6-.9 0-1.4-.25-2.05-.6-.75-.38-1.57-.8-2.95-.8s-2.2.43-2.95.8c-.65.32-1.17.6-2.05.6v1.95c1.35 0 2.2-.43 2.95-.8.65-.35 1.15-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.43 2.95-.8c.65-.35 1.15-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.58.8 2.95.8v-1.95c-.9 0-1.4-.25-2.05-.6-.75-.38-1.6-.8-2.95-.8zm2.95-8.08c-.75-.38-1.58-.8-2.95-.8s-2.2.42-2.95.8c-.65.32-1.18.6-2.05.6-.9 0-1.4-.25-2.05-.6-.75-.37-1.57-.8-2.95-.8s-2.2.42-2.95.8c-.65.33-1.17.6-2.05.6v1.93c1.35 0 2.2-.43 2.95-.8.65-.33 1.17-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.43 2.95-.8c.65-.32 1.18-.6 2.05-.6.9 0 1.4.25 2.05.6.75.38 1.58.8 2.95.8V5.04c-.9 0-1.4-.25-2.05-.58zM17 8.09c-1.35 0-2.2.43-2.95.8-.65.35-1.15.6-2.05.6s-1.4-.25-2.05-.6c-.75-.38-1.57-.8-2.95-.8s-2.2.43-2.95.8c-.65.35-1.15.6-2.05.6v1.95c1.35 0 2.2-.43 2.95-.8.65-.32 1.18-.6 2.05-.6s1.4.25 2.05.6c.75.38 1.57.8 2.95.8s2.2-.43 2.95-.8c.65-.32 1.18-.6 2.05-.6.9 0 1.4.25 2.05.6.75.38 1.58.8 2.95.8V9.49c-.9 0-1.4-.25-2.05-.6-.75-.38-1.6-.8-2.95-.8z" />
     </g>
 
     <g id="lab" stroke="none">
       <path fill="none" d="M0 0h24v24H0V0z" />
-      <path d="M13,11.33L18,18H6l5-6.67V6h2 M15.96,4H8.04C7.62,4,7.39,4.48,7.65,4.81L9,6.5v4.17L3.2,18.4C2.71,19.06,3.18,20,4,20h16 c0.82,0,1.29-0.94,0.8-1.6L15,10.67V6.5l1.35-1.69C16.61,4.48,16.38,4,15.96,4L15.96,4z"/>
+      <path d="M13,11.33L18,18H6l5-6.67V6h2 M15.96,4H8.04C7.62,4,7.39,4.48,7.65,4.81L9,6.5v4.17L3.2,18.4C2.71,19.06,3.18,20,4,20h16 c0.82,0,1.29-0.94,0.8-1.6L15,10.67V6.5l1.35-1.69C16.61,4.48,16.38,4,15.96,4L15.96,4z" />
     </g>
 
     <g id="search">
diff --git a/yarn.lock b/yarn.lock
index a3992a4e..b2d4bc5e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1594,6 +1594,14 @@
   dependencies:
     "@babel/runtime" "^7.10.2"
 
+"@tippy.js/react@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@tippy.js/react/-/react-3.1.1.tgz#027e4595e55f31430741fe8e0d92aaddfbe47efd"
+  integrity sha512-KF45vW/jKh/nBXk/2zzTFslv/T46zOMkIoDJ56ymZ+M00yHttk58J5wZ29oqGqDIUnobWSZD+cFpbR4u/UUvgw==
+  dependencies:
+    prop-types "^15.6.2"
+    tippy.js "^5.1.1"
+
 "@types/aria-query@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.0.tgz#14264692a9d6e2fa4db3df5e56e94b5e25647ac0"
@@ -8330,6 +8338,11 @@ pnp-webpack-plugin@1.6.4:
   dependencies:
     ts-pnp "^1.1.6"
 
+popper.js@^1.16.0:
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
+  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
+
 portfinder@^1.0.26:
   version "1.0.28"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
@@ -10972,6 +10985,13 @@ tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 
+tippy.js@^5.1.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-5.2.1.tgz#e08d7332c103a15e427124d710d881fca82365d6"
+  integrity sha512-66UT6JRVn3dXNCORE+0UvUK3JZqV/VhLlU6HTDm3FmrweUUFUxUGvT8tUQ7ycMp+uhuLAwQw6dBabyC+iKf/MA==
+  dependencies:
+    popper.js "^1.16.0"
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"