some header fixes

src/components/main/Header/index.tsx

@@ -3,7 +3,9 @@ import { Logo } from "~/components/main/Logo";
 import { connect } from 'react-redux';
 import { IUserProfile, IUserState } from "~/redux/user/reducer";
 
-const style = require('./style.scss');
+import * as style from './style.scss';
+import {Filler} from "~/components/containers/Filler";
+import {Group} from "~/components/containers/Group";
 
 interface IHeaderProps {
   username?: IUserProfile['username'],
@@ -14,20 +16,21 @@ export const Component: React.FunctionComponent<IHeaderProps> = ({ username, is_
   <div className="default_container head_container">
     <div className={style.container}>
       <Logo />
-      <div className={style.spacer} />
-      {
-        is_user && username &&
-        <div className={style.user_button}>
-          <div className={style.user_avatar} />
-          {username}
-        </div>
-      }
+
+      <Filler />
+
       <div className={style.plugs}>
         <div>depth</div>
         <div>boris</div>
         <div>flow</div>
       </div>
 
+      <Filler />
+
+      <Group horizontal className={style.user_button}>
+        <div>username</div>
+        <div className={style.user_avatar} />
+      </Group>
     </div>
   </div>
 );

src/components/main/Header/style.scss

@@ -3,8 +3,7 @@
   align-items: center;
   justify-content: flex-end;
   font-weight: 500;
-  //padding: $gap 0;
-  height: 100px;
+  height: 96px;
 }
 
 
@@ -15,21 +14,30 @@
 .plugs {
   display: flex;
   user-select: none;
+  font: $font_16_medium;
+  text-transform: uppercase;
 
   > div {
-    //margin: 8px;
     display: flex;
     align-items: center;
     position: relative;
     padding: $gap;
+    cursor: pointer;
+    transition: color 0.25s;
+
+    &:hover {
+      color: $red;
+    }
 
     &::after {
       content: ' ';
       margin-left: $spc;
       background: white;
-      width: 2px;
+      width: 4px;
       height: $gap;
       display: block;
+      opacity: 0.2;
+      border-radius: 4px;
     }
 
     &:first-child {
@@ -52,19 +60,16 @@
 }
 
 .user_button {
-  padding: 0 $gap;
-  display: flex;
   align-items: center;
-  background: white;
-  color: $main_bg_color;
-  height: 20px;
   border-radius: $input_radius;
-  font-size: $text_small;
+  font: $font_16_medium;
+  text-transform: uppercase;
+  flex: 0 !important;
 }
 
 .user_avatar {
-  //width: 16px;
-  //height: 16px;
-  //background: transparentize(white, 0.5);
-  //margin-right: $gap;
+  width: 20px;
+  height: 20px;
+  background: white;
+  border-radius: $radius;
 }

src/components/main/Logo/index.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-const style = require('./style.scss');
+import * as styles from './style.scss';
 
 export const Logo = () => (
-  <div className={style.logo}>
+  <div className={styles.logo}>
     VAULT
   </div>
 );

src/components/main/Logo/style.scss

@@ -1,6 +1,9 @@
 .logo {
-  font-size: $text_sign;
-  font-weight: 800;
+  // font-family: Raleway;
+  //font-size: $text_sign;
+  //font-weight: 800;
+  font: $font_24_bold;
+  //font-family: Raleway;
   display: flex;
   user-select: none;
 }

src/components/node/Comment/index.tsx

@@ -17,6 +17,7 @@ const Comment: FC<IProps> = ({
 }) => (
     <Card
       className={classNames(styles.wrap, className, { is_empty, is_loading })}
+      seamless
       {...props}
     >
       <div className={styles.thumb}>