fixed grid layout

src/components/flow/TestGrid/index.tsx

@@ -11,8 +11,8 @@ const style = require('./style.scss');
 
 export const TestGrid = () => (
   <div className={style.grid_test}>
-    <div className={classnames([style.cell, style.vert_1, style.hor_2])} key="b" />
+    <div className={classnames([style.cell, style.vert_1, style.hor_4])} key="b" />
-    <div className={classnames([style.cell, style.vert_1, style.hor_2])} key="a" />
+    <div className={classnames([style.cell, style.vert_2, style.hor_1, style.pad_last])} key="a" />
     <div className={classnames([style.cell, style.vert_1, style.hor_1])} key="c" />
     <div className={classnames([style.cell, style.vert_1, style.hor_1])} key="d" />
     <div className={classnames([style.cell, style.vert_2, style.hor_3])} key="e" />
@@ -20,7 +20,7 @@ export const TestGrid = () => (
     <div className={classnames([style.cell, style.vert_2, style.hor_1])} key="g" />
     <div className={classnames([style.cell, style.vert_2, style.hor_1])} key="h" />
     <div className={classnames([style.cell, style.vert_4, style.hor_1])} key="i" />
-    <div className={classnames([style.cell, style.vert_1, style.hor_1])} key="i" />
+    <div className={classnames([style.cell, style.vert_1, style.hor_1])} key="j" />
   </div>
 );
 

src/components/flow/TestGrid/style.scss

@@ -1,3 +1,5 @@
+$cols: $content_width / $cell;
+
 .grid {
   //display: grid;
   padding: $gap / 2;
@@ -5,12 +7,15 @@
 }
 
 .grid_test {
-  width: 1024px;
+  width: $content_width;
   display: grid;
-  grid-template-columns: repeat(5, 256px);
+  grid-template-columns: repeat($cols, 1fr);
-  grid-template-rows: repeat(2, 256px);
+  grid-template-rows: $cell * 1.2 - 4;
   grid-auto-rows: 256px;
   grid-auto-flow: row dense;
+
+  grid-column-gap: 4px;
+  grid-row-gap: 4px;
 }
 
 .cell {
@@ -18,13 +23,14 @@
   box-sizing: border-box;
   display: flex;
   flex: 0 0;
+  background: $cell_bg;
 
-  &::after {
+  //&::after {
-    content: ' ';
+  //  content: ' ';
-    background: transparentize(white, 0.9);
+  //  background: transparentize(white, 0.9);
-    width: 100%;
+  //  width: 100%;
-    height: 100%;
+  //  height: 100%;
-  }
+  //}
 }
 
 .vert_2 {
@@ -50,3 +56,7 @@
 .hor_4 {
   grid-column-end: span 4;
 }
+
+.pad_last {
+  grid-column-end: $cols + 1;
+}

src/components/main/Header/index.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 const style = require('./style.scss');
-const logo_sm = require('$sprites/logo_sm.svg');
 
 export const Header = () => (
   <div className="default_container head_container">
@@ -14,10 +13,13 @@ export const Header = () => (
         <div>boris</div>
         <div>flow</div>
       </div>
-      <div className={style.user_button}>
-        <div className={style.user_avatar} />
-        gvorcek
-      </div>
     </div>
   </div>
 );
+
+/*
+  <div className={style.user_button}>
+    <div className={style.user_avatar} />
+    gvorcek
+  </div>
+ */

src/components/main/Header/style.scss

@@ -3,7 +3,8 @@
   align-items: center;
   justify-content: flex-end;
   font-weight: 500;
-  padding: $gap $spc;
+  //padding: $gap 0;
+  height: 100px;
 }
 
 .logo {
@@ -34,6 +35,8 @@
       height: $gap;
       display: block;
     }
+
+    &:last-child::after { display: none; }
   }
 }
 

src/redux/user/reducer.ts

@@ -2,8 +2,23 @@ import { createReducer } from 'reduxsauce';
 import * as ACTIONS from "$redux/user/actions";
 import { USER_ACTIONS } from "$redux/user/constants";
 
+export interface IUserProfile {
+  id: number,
+  username: string,
+  email: string,
+  role: string,
+  activated: boolean,
+}
+
+export interface IUserFormStateLogin {
+  error: string,
+}
+
 export type IRootState = Readonly<{
-  // key: string
+  profile: IUserProfile,
+  form_state: {
+    login: IUserFormStateLogin,
+  },
 }>;
 
 type UnsafeReturnType<T> = T extends (...args: any[]) => infer R ? R : any;
@@ -20,9 +35,18 @@ const HANDLERS = {
 };
 
 const INITIAL_STATE: IRootState = {
-  // key: val,
+  profile: {
-  // key: val,
+    id: 0,
-  // key: val
+    username: '',
+    email: '',
+    role: '',
+    activated: false,
+  },
+  form_state: {
+    login: {
+      error: '',
+    }
+  }
 };
 
 export default createReducer(INITIAL_STATE, HANDLERS);

src/styles/colors.scss

@@ -1,4 +1,6 @@
-$main_bg_color: #111111;
+$main_bg_color: #161616;
 $main_text_color: white;
 
-$content_bg_color: #191919;
+$content_bg_color: #222222;
+
+$cell_bg: transparentize(white, 0.95);

src/styles/global.scss

@@ -2,8 +2,8 @@
 
 body {
   background: $main_bg_color;
-  background: $main_bg_color url("../sprites/dots.svg");
+  //background: $main_bg_color url("../sprites/dots.svg");
-  //url("http://vault48.org/pixmaps/texture.jpg");
+  background: url("http://vault48.org/pixmaps/texture.jpg");
   //background: #111111;
   color: $main_text_color;
   font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
@@ -13,14 +13,15 @@ body {
   &::before {
     content: '';
     position: absolute;
-    height: 100%;
+    height: 200px;
     width: 100%;
     top: 0;
     left: 0;
     z-index: -1;
-    background: url("../sprites/circles.svg");
+    //background: url("../sprites/circles.svg");
+    background: url("http://vault48.org/pixmaps/texture_alt.jpg");
     pointer-events: none;
-    background-size: cover;
+    //background-size: cover;
   }
 }
 
@@ -39,7 +40,7 @@ body {
 
 
 :global(.head_container) {
-  background: $main_bg_color;
+  //background: $main_bg_color;
 }
 
 :global(.footer) {

src/styles/variables.scss

@@ -1,7 +1,7 @@
 @import 'colors';
 
 $cell: 256px;
-$content_width: $cell * 5;
+$content_width: $cell * 4;
 $gap: 8px;
 $spc: $gap * 2;
 $panel_radius: 1px;