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}>

src/containers/main/MainLayout/index.tsx

@@ -1,16 +1,17 @@
 import * as React from 'react';
 import { SidePane } from "~/components/main/SidePane";
 import * as styles from './styles.scss';
+import { Header } from "~/components/main/Header";
 
 export const MainLayout = ({ children }) => {
 
   return (
     <div className={styles.wrapper}>
+      <Header />
+
       <div className={styles.content}>
         {children}
       </div>
-
-      <SidePane />
     </div>
   );
 };

src/containers/main/MainLayout/styles.scss

@@ -1,14 +1,19 @@
 .wrapper {
   width: 100%;
-  padding: $gap $gap $gap 74px;
+  // padding: $gap $gap $gap 74px;
+  padding: 0 $gap;
   display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  flex-direction: row;
+  //align-items: flex-start;
+  //justify-content: center;
+  flex-direction: column;
   box-sizing: border-box;
+  align-items: center;
+  justify-content: flex-start;
 }
 
 .content {
-  flex: 0 1 $content_width;
+  // flex: 0 1 $content_width;
   position: relative;
+  width: 100%;
+  max-width: $content_width;
 }

src/styles/colors.scss

@@ -12,11 +12,7 @@ $blue_gradient: linear-gradient(170deg, $green, $dark_blue);
 $green_gradient: linear-gradient(170deg, $olive -20%, $grass 120%);
 $purple_gradient: linear-gradient(170deg, $red, $dark_blue);
 $cyan_gradient: linear-gradient(260deg, #3c75ff -50%, #7b2653 150%);
-//$color_yellow: complement($color_red);
-//$color_yellow: yellow;
 
-//$main_bg_color: #161616;
-//main_bg_color: #111214;
 $main_bg_color: #2b2c34;
 $main_text_color: white;
 

src/styles/global.scss

@@ -56,6 +56,7 @@ body {
 }
 
 :global(.default_container) {
+  width: 100%;
   max-width: $content_width;
   margin: auto;
 }