Отверстал шапку и сайдбар

src/components/auth/AppInfo.jsx

@@ -1,17 +1,19 @@
 import React, { Component } from 'react';
 
+import styles from './appInfo.scss';
+
 export default class SignIn extends Component {
     render() {
-        var { name, desc } = this.props;
+        var { name, description } = this.props;
 
         return (
-            <div>
+            <div className={styles.appInfo}>
-                <div>
+                <div className={styles.logoContainer}>
-                    <h2>{name}</h2>
+                    <h2 className={styles.logo}>{name}</h2>
                 </div>
-                <div>
+                <div className={styles.descriptionContainer}>
-                    <p>
+                    <p className={styles.description}>
-                        {desc}
+                        {description}
                     </p>
                 </div>
             </div>

src/components/auth/appInfo.scss

@@ -0,0 +1,41 @@
+@import '~components/ui/colors.scss';
+@import '~components/ui/fonts.scss';
+
+.appInfo {
+    padding: 55px 15px;
+}
+
+.logoContainer {
+    position: relative;
+    padding: 15px;
+
+    &:after {
+        content: '';
+        display: block;
+
+        position: absolute;
+        left: 25px;
+        bottom: 0;
+        height: 3px;
+        width: 40px;
+
+        background: $green;
+    }
+}
+
+.logo {
+    font-family: $robotoCondensed;
+    color: #fff;
+    font-size: 22px;
+}
+
+.descriptionContainer {
+    margin: 20px 0;
+}
+
+.description {
+    font-family: $roboto;
+    color: #cccccc;
+    font-size: 13px;
+    line-height: 1.7;
+}

src/components/ui/buttons.scss

@@ -0,0 +1,24 @@
+@import './colors.scss';
+@import './fonts.scss';
+
+.button {
+    display: inline-block;
+    height: 50px;
+    padding: 0 15px;
+
+    font-family: $robotoCondensed;
+    color: #fff;
+    font-size: 18px;
+    line-height: 50px;
+    text-decoration: none;
+}
+
+.blue {
+    composes: button;
+
+    background: $blue;
+
+    &:hover {
+        background: lighter($blue);
+    }
+}

src/components/ui/colors.scss

@@ -0,0 +1,18 @@
+$green: #207e5c;
+$blue: #5b9aa9;
+$red: #e66c69;
+$violet: #6b5b8c;
+$dark_blue: #28555b;
+$light_violet: #8b5d79;
+$orange: #dd8650;
+$light: #ebe8e1;
+
+$black: #232323;
+
+@function darker($color) {
+    @return darken($color, 4%);
+}
+
+@function lighter($color) {
+    @return lighten($color, 3%);
+}

src/components/ui/fonts.scss

@@ -0,0 +1,4 @@
+// TODO: need more abstract names
+// TODO: should we host fonts from our side?
+$robotoCondensed: 'Roboto Condensed', Arial, sans-serif;
+$roboto: 'Roboto', Arial, sans-serif;

src/components/userBar/UserBar.jsx

@@ -1,18 +0,0 @@
-import React, { Component } from 'react';
-
-import { Link } from 'react-router';
-import { FormattedMessage as Message } from 'react-intl';
-
-import messages from './UserBar.messages.js';
-
-export default class UserBar extends Component {
-    render() {
-        return (
-            <div>
-                <Link to="/register">
-                    <Message {...messages.register} />
-                </Link>
-            </div>
-        );
-    }
-}

src/components/userbar/Userbar.jsx

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+
+import { Link } from 'react-router';
+import { FormattedMessage as Message } from 'react-intl';
+
+import buttons from 'components/ui/buttons.scss';
+
+import messages from './Userbar.messages.js';
+import styles from './userbar.scss';
+
+export default class Userbar extends Component {
+    render() {
+        return (
+            <div className={styles.userbar}>
+                <Link to="/register" className={buttons.blue}>
+                    <Message {...messages.register} />
+                </Link>
+            </div>
+        );
+    }
+}

src/components/userbar/userbar.scss

@@ -0,0 +1,2 @@
+.userbar {
+}

src/index.html

@@ -6,6 +6,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="msapplication-tap-highlight" content="no">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
+
+    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
 </head>
 <body>
 

src/index.scss

@@ -5,3 +5,21 @@ body,
     margin: 0;
     padding: 0;
 }
+
+a {
+    text-decoration: none;
+}
+
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+    font-weight: normal;
+    line-height: 1;
+    padding: 0;
+    margin: 0;
+}

src/pages/auth/SignInPage.jsx

@@ -9,7 +9,7 @@ export default class SignInPage extends Component {
     render() {
         var appInfo = {
             name: 'TLauncher',
-            desc: `Лучший альтернативный лаунчер для Minecraft с большим количеством версий и их модификаций, а также возмоностью входа как с лицензионным аккаунтом, так и без него.`
+            description: `Лучший альтернативный лаунчер для Minecraft с большим количеством версий и их модификаций, а также возмоностью входа как с лицензионным аккаунтом, так и без него.`
         };
 
         return (

src/pages/root/RootPage.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Link } from 'react-router';
 
-import UserBar from 'components/userBar/UserBar';
+import Userbar from 'components/userbar/Userbar';
 
 import styles from './root.scss';
 
@@ -11,13 +11,11 @@ export default function RootPage(props) {
         <div className={styles.root}>
             <div className={styles.header}>
                 <div className={styles.headerContent}>
-                    <div className={styles.logo}>
+                    <Link to="/" className={styles.logo}>
-                        <Link to="/">
+                        Ely.by
-                            Ely.by
+                    </Link>
-                        </Link>
-                    </div>
                     <div className={styles.userbar}>
-                        <UserBar />
+                        <Userbar />
                     </div>
                 </div>
             </div>

src/pages/root/root.scss

@@ -1,5 +1,8 @@
+@import '~components/ui/colors.scss';
+@import '~components/ui/fonts.scss';
+
 .root {
-    background: #ebe8e1;
+    background: $light;
     min-height: 100%;
 }
 
@@ -10,7 +13,7 @@
 
 .header {
     height: 50px;
-    background: #207e5c;
+    background: $green;
 }
 
 .headerContent {
@@ -21,7 +24,11 @@
     line-height: 50px;
     padding: 0 20px;
     display: inline-block;
-    background: #1a6449;
+    background: darker($green);
+
+    font-family: $robotoCondensed;
+    font-size: 33px;
+    color: #fff;
 }
 
 .body {
@@ -40,7 +47,7 @@
     left: 0;
     width: 300px;
 
-    background: #232323;
+    background: $black;
 }
 
 .content {

webpack.config.js

@@ -76,6 +76,7 @@ var webpackConfig = {
         }),
         new HtmlWebpackPlugin({
             template: 'src/index.html',
+            favicon: 'src/favicon.ico',
             hash: isProduction,
             filename: 'index.html',
             inject: 'body',