Merge remote-tracking branch 'origin/master'

src/components/flow/TestGrid/style.scss

@@ -24,6 +24,7 @@ $cols: $content_width / $cell;
   display: flex;
   flex: 0 0;
   background: $cell_bg;
+  border-radius: 4px;
 
   @include outer_shadow();
   //&::after {

src/components/login/LoginForm/style.scss

@@ -17,7 +17,7 @@
   align-items: center;
   justify-content: center;
   //background: url('../../../sprites/splotchy.svg');
-  background-size: cover;
+  // background-size: cover;
   //@include outer_shadow();
 }
 

src/components/main/GodRays/index.tsx

@@ -40,22 +40,22 @@ export class GodRays extends React.Component<IGodRaysProps> {
 
     rays.map(({ angle, iterator, weight, speed, pulsar, opacity }, index) => {
       const gradient = ctx.createLinearGradient(0, 0, 0, height * 1.3);
-      gradient.addColorStop(0.2, `rgba(255, 255, 255, ${opacity * 0.1})`);
-      gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
+      gradient.addColorStop(0.2, `rgba(255, 60, 40, ${opacity * 0.1})`);
+      gradient.addColorStop(1, `rgba(255, 60, 40, 0)`);
 
       const gradient2 = ctx.createLinearGradient(0, 0, 0, height * 1.3);
-      gradient2.addColorStop(0.2, `rgba(255, 255, 255, ${opacity * 0.2})`);
-      gradient2.addColorStop(1, "rgba(255, 255, 255, 0)");
+      gradient2.addColorStop(0.2, `rgba(255, 40, 100, ${opacity * 0.2})`);
+      gradient2.addColorStop(1, "rgba(255, 40, 100, 0)");
 
       ctx.save();
-      ctx.translate(width / 2, -600);
+      ctx.translate(width / 2, -900);
       ctx.rotate(angle);
-      ctx.translate(-width / 2, 600);
+      ctx.translate(-width / 2, 900);
 
       ctx.beginPath();
       ctx.fillStyle = gradient;
-      ctx.moveTo(((width / 2) - (weight / 2)), -600);
-      ctx.lineTo(((width / 2) + (weight / 2)), -600);
+      ctx.moveTo(((width / 2) - (weight / 2)), -900);
+      ctx.lineTo(((width / 2) + (weight / 2)), -900);
       ctx.lineTo(((width / 2) + (weight / 2 + 300)), height * 1.4);
       ctx.lineTo(((width / 2) - (weight / 2 + 300)), height * 1.4);
       ctx.fill();
@@ -63,8 +63,8 @@ export class GodRays extends React.Component<IGodRaysProps> {
 
       ctx.beginPath();
       ctx.fillStyle = gradient2;
-      ctx.moveTo(((width / 2) - (weight / 6)), -600);
-      ctx.lineTo(((width / 2) + (weight / 6)), -600);
+      ctx.moveTo(((width / 2) - (weight / 6)), -900);
+      ctx.lineTo(((width / 2) + (weight / 6)), -900);
       ctx.lineTo(((width / 2) + (weight / 6 + 50)), height * 1.4);
       ctx.lineTo(((width / 2) - (weight / 6 + 250)), height * 1.4);
       ctx.fill();

src/components/main/SidePane/index.tsx

@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react';
+import * as styles from './styles.scss';
+import classNames from 'classnames';
+
+export const SidePane = ({ }) => {
+  const [left, setLeft] = useState(0);
+
+  const moveThis = () => {
+    const shift = ((document.body.getBoundingClientRect().width - 1024) / 2) - 54 - 10;
+    setLeft(shift);
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', moveThis)
+
+    return () => { window.removeEventListener('resize', moveThis); }
+  });
+
+  useEffect(moveThis, []);
+
+  return (
+    <div className={styles.pane} style={{ left }}>
+      <div className={classNames(styles.group, 'logo')} />
+      <div className={styles.group}>
+        <div className={styles.btn} />
+        <div className={styles.btn} />
+        <div className={styles.btn} />
+        <div className={styles.btn} />
+      </div>
+
+      <div className={styles.flexy} />
+
+      <div className={styles.group}>
+        <div className={styles.btn} />
+      </div>
+    </div>
+  );
+};

src/components/main/SidePane/styles.scss

@@ -0,0 +1,44 @@
+.pane {
+  width: 54px;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  padding: $gap / 2 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.group {
+  width: 54px;
+  border-radius: 4px;
+  margin: ($gap / 2) 0;
+  background: #191919;
+  box-sizing: border-box;
+  box-shadow: #111111 0 0 0 1px;
+
+  &:global(.logo) {
+    color: white;
+    height: (54px * 1.5) + $gap / 2;
+    background: url('http://vault48.org/pixmaps/logo.png') no-repeat -20px -40px #191919;
+    // #c1543d
+    background-size: 140px;
+    font-weight: 600;
+    font-family: Raleway;
+    font-size: 14px;
+    text-align: center;
+    padding-top: 66px;
+    box-shadow: inset #111111 0 -1px, inset #222222 0 1px;
+  }
+}
+
+.btn {
+  height: 54px;
+  box-shadow: inset #111111 0 -1px, inset #222222 0 1px;
+  border-radius: 4px;
+}
+
+.flexy {
+  flex: 1;
+}

src/containers/LoginLayout/style.scss

@@ -24,7 +24,7 @@
   display: flex;
   align-items: stretch;
   justify-content: stretch;
-  background: rgba(0,0,0,0.1);
+  // background: rgba(0,0,0,0.1);
 
-  @include outer_shadow();
+  // @include outer_shadow();
 }

src/containers/MainLayout/index.tsx

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

src/containers/MainLayout/style.scss

@@ -1,4 +1,4 @@
 .wrapper {
   width: 100%;
-  //padding: $gap 0;
+  padding: $gap 0;
 }

src/styles/colors.scss

@@ -10,7 +10,7 @@ $main_text_color: white;
 $content_bg_color: #222222;
 $content_bg_secondary: darken($content_bg_color, 3%);
 
-$cell_bg: transparentize(white, 0.98);
+$cell_bg: #222222;
 
 $text_normal: 16px;
 $text_small: 14px;

src/styles/global.scss

@@ -60,7 +60,7 @@ body {
 }
 
 :global(.content_container) {
-  background: $content_bg_color;
+  // background: $content_bg_color;
 }
 
 

src/styles/variables.scss

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

tsconfig.json

@@ -5,6 +5,7 @@
     "sourceMap": true,
     "noImplicitAny": false,
     "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
     "module": "commonjs",
     "target": "es6",
     "jsx": "react",