fixed mobile header appearance

src/components/input/Button/styles.module.scss

@@ -219,11 +219,13 @@
 }
 
 .primary {
-  background: $red;
+  @include outer_shadow;
+  background: $red_gradient_alt;
 }
 
 .secondary {
-  background: $wisegreen;
+  @include outer_shadow;
+  background: $green_gradient;
 }
 
 .lab {

src/components/main/Header/index.tsx

@@ -24,6 +24,7 @@ import { Authorized } from '~/components/containers/Authorized';
 import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
 import { selectLabUpdates, selectLabUpdatesNodes } from '~/redux/lab/selectors';
 import { selectFlow, selectFlowUpdated } from '~/redux/flow/selectors';
+import { Button } from '~/components/input/Button';
 
 const mapStateToProps = (state: IState) => ({
   user: pick(['username', 'is_user', 'photo', 'last_seen_boris'])(selectUser(state)),
@@ -84,22 +85,24 @@ const HeaderUnconnected: FC<IProps> = memo(
     return createPortal(
       <div className={classNames(styles.wrap, { [styles.is_scrolled]: is_scrolled })}>
         <div className={styles.container}>
-          <Logo />
+          <div className={classNames(styles.logo_wrapper, { [styles.logged_in]: is_user })}>
+            <Logo />
+          </div>
 
           <Filler className={styles.filler} />
 
           <div className={styles.plugs}>
-            <Link
-              className={classNames(styles.item, {
-                [styles.is_active]: pathname === URLS.BASE,
-                [styles.has_dot]: hasFlowUpdates,
-              })}
-              to={URLS.BASE}
-            >
-              ФЛОУ
-            </Link>
-
             <Authorized>
+              <Link
+                className={classNames(styles.item, {
+                  [styles.is_active]: pathname === URLS.BASE,
+                  [styles.has_dot]: hasFlowUpdates,
+                })}
+                to={URLS.BASE}
+              >
+                ФЛОУ
+              </Link>
+
               <Link
                 className={classNames(styles.item, styles.lab, {
                   [styles.is_active]: pathname === URLS.LAB,
@@ -109,20 +112,20 @@ const HeaderUnconnected: FC<IProps> = memo(
               >
                 ЛАБ
               </Link>
+
+              <Link
+                className={classNames(styles.item, styles.boris, {
+                  [styles.is_active]: pathname === URLS.BORIS,
+                  [styles.has_dot]: hasBorisUpdates,
+                })}
+                to={URLS.BORIS}
+              >
+                БОРИС
+              </Link>
             </Authorized>
 
-            <Link
-              className={classNames(styles.item, styles.boris, {
-                [styles.is_active]: pathname === URLS.BORIS,
-                [styles.has_dot]: hasBorisUpdates,
-              })}
-              to={URLS.BORIS}
-            >
-              БОРИС
-            </Link>
-
             {is_user && (
-              <div className={styles.item}>
+              <div className={classNames(styles.item, styles.notifications)}>
                 <Notifications />
               </div>
             )}
@@ -133,9 +136,9 @@ const HeaderUnconnected: FC<IProps> = memo(
           )}
 
           {!is_user && (
-            <Group horizontal className={styles.user_button} onClick={onLogin}>
-              <div>ВДОХ</div>
-            </Group>
+            <Button className={styles.user_button} onClick={onLogin} round color="secondary">
+              ВДОХ
+            </Button>
           )}
         </div>
       </div>,

src/components/main/Header/styles.module.scss

@@ -44,7 +44,7 @@
 
   @include tablet {
     flex: 1;
-    justify-content: space-around;
+    justify-content: flex-start;
   }
 }
 
@@ -56,7 +56,6 @@
 
 .user_button {
   flex: 0;
-  padding-left: $gap / 2;
   cursor: pointer;
 }
 
@@ -121,6 +120,13 @@
   @include tablet {
     padding: $gap;
 
+    &.notifications {
+      flex: 1;
+      justify-content: flex-end;
+      align-items: center;
+      margin-right: $gap;
+    }
+
     &::after {
       right: 0;
     }
@@ -132,3 +138,12 @@
     display: none;
   }
 }
+
+.logo_wrapper {
+
+  @include tablet {
+    &.logged_in {
+      display: none;
+    }
+  }
+}

src/components/main/Logo/styles.module.scss

@@ -6,8 +6,4 @@
   user-select: none;
   color: white;
   text-decoration: none;
-
-  @include tablet {
-    display: none;
-  }
 }

src/constants/api.ts

@@ -1,6 +1,8 @@
 import { IComment, INode, ITag } from '~/redux/types';
 import { ISocialProvider } from '~/redux/auth/types';
 
+console.log('base at ', process.env.REACT_APP_API_HOST);
+
 export const API = {
   BASE: process.env.REACT_APP_API_HOST,
   USER: {

src/containers/dialogs/LoginDialogButtons/index.tsx

@@ -11,9 +11,7 @@ interface IProps {
 
 const LoginDialogButtons: FC<IProps> = ({ openOauthWindow }) => (
   <Group className={styles.footer}>
-    <Button>
-      <span>Войти</span>
-    </Button>
+    <Button>Войти</Button>
 
     <Grid columns="repeat(2, 1fr)">
       <Button color="outline" iconLeft="google" type="button" onClick={openOauthWindow('google')}>

src/styles/_colors.scss

@@ -10,7 +10,7 @@ $olive: #8bc12a;
 $orange: #ff7549;
 $grass: #41800d;
 $wisegreen: #007962;
-// $wisegreen: #006868;
+$lightgreen: lighten(adjust_hue($wisegreen, -30deg), 10%);
 
 $primary: $red;
 $secondary: $wisegreen;
@@ -19,13 +19,13 @@ $red_gradient: linear-gradient(165deg, $orange -50%, $red 150%);
 $blue_gradient: linear-gradient(170deg, $blue, $dark_blue);
 $green_gradient: linear-gradient(
   170deg,
-  lighten(adjust_hue($wisegreen, 15deg), 10%) 0%,
-  $wisegreen 100%
+  $lightgreen -50%,
+  $wisegreen 150%
 );
 $purple_gradient: linear-gradient(170deg, $red, $dark_blue);
 $cyan_gradient: linear-gradient(260deg, #3c75ff -50%, #7b2653 150%);
 
-$red_gradient_alt: linear-gradient(270deg, #d2004c, #ff4545);
+$red_gradient_alt: linear-gradient(170deg, #ff4545, #d2004c);
 $purple_gradient_alt: linear-gradient(90deg, #442294, #ff4545);
 
 $main_gradient: $green_gradient;