From 5b7077d25645568f0294a04d2d22b3f09b034277 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 3 Dec 2019 17:36:34 +0700
Subject: [PATCH] fixed attach icons

---
 src/components/main/Header/index.tsx      |  25 +++--
 src/components/main/Header/style.scss     | 108 ++++++++++++----------
 src/components/node/CommentForm/index.tsx |   4 +-
 3 files changed, 78 insertions(+), 59 deletions(-)

diff --git a/src/components/main/Header/index.tsx b/src/components/main/Header/index.tsx
index fed058b0..42d5170e 100644
--- a/src/components/main/Header/index.tsx
+++ b/src/components/main/Header/index.tsx
@@ -4,22 +4,25 @@ import { push as historyPush } from 'connected-react-router';
 import { Link } from 'react-router-dom';
 import { Logo } from '~/components/main/Logo';
 
-import * as style from './style.scss';
 import { Filler } from '~/components/containers/Filler';
 import { selectUser } from '~/redux/auth/selectors';
 import { Group } from '~/components/containers/Group';
-import * as MODAL_ACTIONS from '~/redux/modal/actions';
-import * as AUTH_ACTIONS from '~/redux/auth/actions';
 import { DIALOGS } from '~/redux/modal/constants';
-import { pick } from 'ramda';
+import pick from 'ramda/es/pick';
+import path from 'ramda/es/path';
 import { UserButton } from '../UserButton';
 import { Notifications } from '../Notifications';
 import { URLS } from '~/constants/urls';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 
+import * as style from './style.scss';
+import * as MODAL_ACTIONS from '~/redux/modal/actions';
+import * as AUTH_ACTIONS from '~/redux/auth/actions';
+
 const mapStateToProps = state => ({
   user: pick(['username', 'is_user', 'photo'])(selectUser(state)),
+  pathname: path(['router', 'location', 'pathname'], state),
 });
 
 const mapDispatchToProps = {
@@ -32,11 +35,10 @@ const mapDispatchToProps = {
 type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
 const HeaderUnconnected: FC<IProps> = memo(
-  ({ user, user: { username, is_user }, showDialog, authLogout, authOpenProfile }) => {
+  ({ user, user: { is_user }, showDialog, pathname, authLogout, authOpenProfile }) => {
     const [is_scrolled, setIsScrolled] = useState(false);
 
     const onLogin = useCallback(() => showDialog(DIALOGS.LOGIN), [showDialog]);
-    // const onProfileClick = useCallback(() => authOpenProfile(username), [authOpenProfile, user]);
 
     const onScroll = useCallback(() => {
       const active = window.scrollY > 32;
@@ -61,13 +63,20 @@ const HeaderUnconnected: FC<IProps> = memo(
           <Filler />
 
           <div className={style.plugs}>
-            <Link className={style.item} to={URLS.BASE}>
+            <Link
+              className={classNames(style.item, { [style.is_active]: pathname === URLS.BASE })}
+              to={URLS.BASE}
+            >
               ФЛОУ
             </Link>
 
-            <Link className={style.item} to={URLS.BORIS}>
+            <Link
+              className={classNames(style.item, { [style.is_active]: pathname === URLS.BORIS })}
+              to={URLS.BORIS}
+            >
               БОРИС
             </Link>
+
             {is_user && (
               <div className={style.item}>
                 <Notifications />
diff --git a/src/components/main/Header/style.scss b/src/components/main/Header/style.scss
index be051064..bc3f6afb 100644
--- a/src/components/main/Header/style.scss
+++ b/src/components/main/Header/style.scss
@@ -46,55 +46,6 @@
   user-select: none;
   text-transform: uppercase;
   align-items: center;
-
-  & > a.item,
-  & > div.item {
-    font: $font_16_medium;
-    display: flex;
-    align-items: center;
-    position: relative;
-    padding: $gap;
-    cursor: pointer;
-    transition: color 0.25s;
-    text-decoration: none;
-    color: white;
-    white-space: nowrap;
-
-    &:hover {
-      color: $red;
-    }
-
-    &:first-child {
-      padding-left: $spc + $gap;
-    }
-
-    &::after {
-      content: ' ';
-      margin-left: $spc;
-      background: white;
-      width: 4px;
-      height: $gap;
-      display: block;
-      opacity: 0.2;
-      border-radius: 4px;
-    }
-
-    &:last-child {
-      // padding-right: 0;
-
-      // &::after {
-      // display: none;
-      // }
-    }
-
-    @include tablet {
-      padding: $gap / 2;
-
-      &::after {
-        margin-left: $gap;
-      }
-    }
-  }
 }
 
 .profile {
@@ -108,3 +59,62 @@
   padding-left: $gap / 2;
   cursor: pointer;
 }
+
+.item {
+  font: $font_16_medium;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: $gap $gap * 2;
+  cursor: pointer;
+  transition: color 0.25s;
+  text-decoration: none;
+  color: white;
+  white-space: nowrap;
+
+  &:hover {
+    color: $red;
+  }
+
+  &::after {
+    content: ' ';
+    margin-left: $spc;
+    background: white;
+    width: 4px;
+    height: $gap;
+    display: block;
+    opacity: 0.2;
+    border-radius: 4px;
+    position: absolute;
+    right: -2px;
+  }
+
+  &::before {
+    content: ' ';
+    position: absolute;
+    bottom: 0;
+    height: 3px;
+    width: 50%;
+    right: 50%;
+    background: white;
+    transform: translate(50%, 0) scaleX(0);
+    opacity: 0;
+    border-radius: 3px;
+    transition: transform 0.5s, opacity 0.25s;
+  }
+
+  &.is_active {
+    &::before {
+      transform: translate(50%, 0) scaleX(1);
+      opacity: 1;
+    }
+  }
+
+  @include tablet {
+    padding: $gap;
+
+    &::after {
+      margin-left: $gap;
+    }
+  }
+}
diff --git a/src/components/node/CommentForm/index.tsx b/src/components/node/CommentForm/index.tsx
index 7d47f583..545d5289 100644
--- a/src/components/node/CommentForm/index.tsx
+++ b/src/components/node/CommentForm/index.tsx
@@ -244,11 +244,11 @@ const CommentFormUnconnected: FC<IProps> = ({
 
       <Group horizontal className={styles.buttons}>
         <ButtonGroup>
-          <Button iconLeft="image" size="small" color="gray" iconOnly>
+          <Button iconLeft="photo" size="small" color="gray" iconOnly>
             <input type="file" onInput={onInputChange} multiple accept="image/*" />
           </Button>
 
-          <Button iconRight="enter" size="small" color="gray" iconOnly>
+          <Button iconRight="audio" size="small" color="gray" iconOnly>
             <input type="file" onInput={onInputChange} multiple accept="audio/*" />
           </Button>
         </ButtonGroup>