fixed mobile header appearance

.env.development

@@ -1,2 +1,3 @@
-REACT_APP_API_HOST: http://localhost:3334/
+#REACT_APP_API_HOST: http://localhost:3334/
-REACT_APP_REMOTE_CURRENT: https://pig.staging.vault48.org/static/
+REACT_APP_API_HOST=https://pig.staging.vault48.org/
+REACT_APP_REMOTE_CURRENT=https://pig.staging.vault48.org/static/

package.json

@@ -13,6 +13,7 @@
     "axios": "^0.21.1",
     "body-scroll-lock": "^2.6.4",
     "classnames": "^2.2.6",
+    "color2k": "^1.2.4",
     "connected-react-router": "^6.5.2",
     "date-fns": "^2.4.1",
     "flexbin": "^0.2.0",
@@ -70,13 +71,13 @@
     ]
   },
   "devDependencies": {
-    "@types/throttle-debounce": "^2.1.0",
     "@craco/craco": "5.8.0",
     "@types/classnames": "^2.2.7",
     "@types/marked": "^1.2.2",
     "@types/node": "^11.13.22",
     "@types/ramda": "^0.26.33",
     "@types/react-redux": "^7.1.11",
+    "@types/throttle-debounce": "^2.1.0",
     "@types/yup": "^0.29.11",
     "craco-alias": "^2.1.1",
     "craco-fast-refresh": "^1.0.2",

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}>
+            <Button className={styles.user_button} onClick={onLogin} round color="secondary">
-              <div>ВДОХ</div>
+              ВДОХ
-            </Group>
+            </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>
+    <Button>Войти</Button>
-      <span>Войти</span>
-    </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%,
+  $lightgreen -50%,
-  $wisegreen 100%
+  $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;

yarn.lock

@@ -3290,6 +3290,11 @@ color-string@^1.5.4:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
+color2k@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/color2k/-/color2k-1.2.4.tgz#af34950ac58e23cf224a01cb8dd0c9911a79605e"
+  integrity sha512-DiwdBwc0BryPFFXoCrW8XQGXl2rEtMToODybxZjKnN5IJXt/tV/FsN02pCK/b7KcWvJEioz3c74lQSmayFvS4Q==
+
 color@^3.0.0:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/color/-/color-3.1.3.tgz#ca67fb4e7b97d611dcde39eceed422067d91596e"