21-23 · lesnitsky · Nov 14, 2018 · Nov 14, 2018 · Nov 16, 2018 · Nov 16, 2018
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 .DS_Store
 node_modules
-.build
+.build
+.cache
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -1 +1,3 @@
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
+<link href="https://fonts.googleapis.com/css?family=Rosario" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
diff --git a/src/components/BannedCharacters/BannedCharacters.js b/src/components/BannedCharacters/BannedCharacters.js
@@ -23,20 +23,20 @@ const BannedCharacters = ({ bannedCharacters = [], highlightedCharacters = [] })
     }
 
     return (
-        <div class="banned-characters">
-            <span class="label">Banned chars: </span>
-            { content }
+        <div className="banned-characters">
+            <span className="label">Banned chars: </span>
+            {content}
 
             <style jsx>{`
                 .banned-characters {
                     display: inline-flex;
                     align-items: center;
                     min-height: 35px;
+                    font-family: 'Roboto', sans-serif;
                 }
 
                 .label {
-                    font-weight: 600;
-                    font-family: sans-serif;
+                    font-weight: lighter;
                     font-size: ${DisplayConstants.FONT_SIZE}px;
                     color: ${Colors.LABEL};
                     display: inline-block;
@@ -54,22 +54,22 @@ const BannedCharacter = (char, isHighlighted) => {
 
     return (
         <div className={bannedCharacterClasses}>
-            { char }
+            {char}
 
             <style jsx>{`
             .banned-character {
                 box-sizing: border-box;
                 font-family: monospace;
                 font-weight: 600;
-                font-size: ${DisplayConstants.FONT_SIZE}px;
+                font-size: 16px;
                 color: ${Colors.CHARACTER};
                 margin: 0 5px;
                 background-color: ${Colors.CHARACTER_BACKGROUND};
                 min-width: 25px;
                 min-height: 25px;
                 border-radius: 4px;
                 text-align: center;
-                display: inline-flex;
+                display: flex;
                 align-items: center;
                 justify-content: center;
                 transition: background 0.1s, transform 150ms;

diff --git a/src/components/BannedCharacters/banned-characters-style-constants.js b/src/components/BannedCharacters/banned-characters-style-constants.js
@@ -1,12 +1,12 @@
 export const Colors = {
-    LABEL: '#b3decc',
+    LABEL: '#badece',
     CHARACTER: '#ffffff',
     CHARACTER_BACKGROUND: '#3a706a',
     HIGHLIGHTED_CHARACTER_BACKGROUND: '#775957',
     HIGHLIGHTED_CHARACTER_BORDER: 'rgba(238,84,84,0.45)',
 };
 
 export const DisplayConstants = {
-    FONT_SIZE: 16,
+    FONT_SIZE: 24,
     HIGHLIGHTED_CHAR_SCALE_COEFFICIENT: 1.5,
 };
diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
@@ -3,9 +3,9 @@ import Icon from 'react-fontawesome';
 
 const Button = ({ iconLeft, iconRight, text, disabled, onClick }) => (
     <button onClick={onClick} disabled={disabled}>
-        { iconLeft ? <Icon name={iconLeft} /> : null }
-        <span>{ text }</span>
-        { iconRight ? <Icon name={iconRight} /> : null }
+        {iconLeft ? <Icon name={iconLeft} /> : null}
+        <span>{text}</span>
+        {iconRight ? <Icon name={iconRight} /> : null}
 
         <style jsx>{`
         button {
@@ -24,8 +24,8 @@ const Button = ({ iconLeft, iconRight, text, disabled, onClick }) => (
         }
 
         span {
-            margin-left: 5px;
-            margin-right: 5px;
+            margin-left: 10px;
+            margin-right: 10px;
         }
 
         span:first-child {

diff --git a/src/components/Countdown/TimeRemainingText.js b/src/components/Countdown/TimeRemainingText.js
@@ -7,7 +7,7 @@ class TimeRemainingText extends Component {
     update() {
         this.fontSize = this.props.size / COMPONENT_SIZE_TO_FONT_SIZE_RATIO;
 
-        this.props.ctx.font = `${this.fontSize}px sans-serif`;
+        this.props.ctx.font = `${this.fontSize}px Roboto, sans-serif`;
         this.props.ctx.fillStyle = this.props.textFillColor;
         this.props.ctx.textBaseline = 'middle';
 

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -1,33 +1,56 @@
 import { h } from 'preact';
 import Icon from 'react-fontawesome';
 
-const Header = ({ productName, username, backgroundImageUrl }) => (
+import { CONTENT_INSET_PADDING } from '../../constants/layout-constants';
+import { Button } from '../Button/Button';
+
+const Header = ({ productName, username, backgroundImageUrl, onLogoutButtonClick }) => (
     <header style={{ backgroundImage: `url(${backgroundImageUrl})` }}>
-        <span>{ productName }</span>
-
-        { username ?
-            <span>
-                <Icon name="user" />
-                <span className="username">{ username }</span>
-            </span>
-            : null
-        }
+        <div className="content-container">
+            <span className="title">{productName}</span>
+
+            {username ?
+                <span className="username">
+                    <Icon name="user" />
+                    <span>{username}</span>
+
+                    <Button text="Logout" iconRight="sign-out" onClick={onLogoutButtonClick} />
+                </span>
+                : null
+            }
+        </div>
         <style jsx>{`
             header {
-                padding: 10px;
-                flex: 0;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
+                font-family: 'Rosario', sans-serif;
                 background-size: auto 100%;
                 color: white;
                 box-sizing: border-box;
                 border-bottom: 1px solid #49837e;
-                flex-basis: 50px;
+            }
+
+            .content-container {
+                height: 70px;
+                flex: 0;
+                display: flex;
+                flex-basis: 70px;
+                padding: 0 ${CONTENT_INSET_PADDING}px;
+                align-items: center;
+                justify-content: space-between;
+            }
+
+            .title {
+                font-size: 24px;
+                font-weight: bold;
             }
 
             .username {
+                font-size: 18px;
+            }
+
+            .username > span {
                 margin-left: 10px;
+                margin-right: 15px;
+                text-transform: capitalize;
             }
         `}</style>
     </header>

diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -1,8 +1,9 @@
 import { h } from 'preact';
+import { CONTENT_MAX_WIDTH } from '../constants/layout-constants';
 
 const Layout = ({ children }) => (
     <div class="react-root">
-        { children }
+        {children}
         <style jsx global>{`
             html {
                 font-size: 16px;
@@ -13,7 +14,7 @@ const Layout = ({ children }) => (
             }
 
             body {
-                margin: 0;
+                margin: 0 auto;
                 height: 100%;
             }
 
@@ -24,6 +25,11 @@ const Layout = ({ children }) => (
                 align-items: stretch;
                 height: 100%;
             }
+
+            .content-container {
+                max-width: ${CONTENT_MAX_WIDTH}px;
+                margin: 0 auto;
+            }
         `}</style>
     </div>
 );

diff --git a/src/components/PearlThread/PearlThread.js b/src/components/PearlThread/PearlThread.js
@@ -3,16 +3,17 @@ import { h, Component } from 'preact';
 import classNames from 'classnames';
 import Icon from 'react-fontawesome';
 import { Colors } from './pearl-thread-style-constants';
+import { CONTENT_MAX_WIDTH } from '../../constants/layout-constants';
 
 const FuturePearl = ({ index }) => (
     <span>
-        { index }
+        {index}
         <style jsx>{`
             span {
                 color: rgba(255, 255, 255, 0.5);
-                padding: 5px;
                 cursor: pointer;
-                margin-left: -5px;
+                transform: translateX(-100%);
+                position: absolute;
             }
         `}</style>
     </span>
@@ -24,14 +25,16 @@ const PastPearl = () => (
 
         <style jsx>{`
             .pearl {
-                padding: 2px;
+                display: block;
+                text-align: center;
+                line-height: 24px;
                 border-radius: 50%;
-                width: 25px;
-                height: 25px;
-                box-sizing: border-box;
-                border: 2px solid rgba(255, 255, 255, 0.3);
+                width: 24px;
+                height: 24px;
+                border: 2px solid #79a19e;
                 border-radius: 50%;
                 cursor: pointer;
+                font-size: 12px;
             }
         `}</style>
     </span>
@@ -50,13 +53,23 @@ const TitlePearl = ({ isFirst, isLast, title }) => {
 
     return (
         <span className="title" style={style}>
-            { title }
+            {title}
 
             <style jsx>{`
                 .title {
                     position: absolute;
                     text-align: center;
                     cursor: pointer;
+                    font-size: 14px;
+                    white-space: nowrap;
+                    padding: 7px 15px;
+                    background: #3d7875;
+                    border-radius: 20px;
+                    border: 2px solid #79a19e;
+                    margin-top: -4px;
+                    box-sizing: border-box;
+                    z-index: 1;
+                    text-transform: capitalize;
                 }
             `}</style>
         </span>
@@ -77,7 +90,7 @@ const Pearl = ({ isPast, index, title, isFirst, isLast, onClick = _.noop }) => {
     return (
         <div className="pearl-container">
             <span onClick={() => onClick(index)}>
-                { content }
+                {content}
             </span>
 
             <style jsx>{`
@@ -87,6 +100,7 @@ const Pearl = ({ isPast, index, title, isFirst, isLast, onClick = _.noop }) => {
                     width: 0;
                     height: 0;
                     color: #f8d940;
+                    font-family: 'Rosario', sans-serif;
                 }
             `}</style>
         </div>
@@ -98,10 +112,10 @@ const PearlThread = ({ itemsCount, activeIndex = 0, activeTitle, onPearlClick })
     const safeProgressPercentage = Math.min(progressPercentage, 100);
 
     return (
-        <div className="pearl-thread">
+        <div className="pearl-thread content-container">
             <div className="progress-bar" style={{ width: `${safeProgressPercentage}%` }} ></div>
             <div className="pearls-container">
-                { new Array(itemsCount).fill(0).map((_, index) => (
+                {new Array(itemsCount).fill(0).map((_, index) => (
                     <Pearl
                         isPast={index < activeIndex}
                         title={activeIndex === index ? activeTitle : null}
@@ -110,13 +124,14 @@ const PearlThread = ({ itemsCount, activeIndex = 0, activeTitle, onPearlClick })
                         isLast={index === itemsCount - 1}
                         onClick={onPearlClick}
                     />
-                )) }
+                ))}
             </div>
 
             <style jsx>{`
                 .pearl-thread {
                     min-height: 60px;
                     padding: 0 20px;
+                    max-width: ${CONTENT_MAX_WIDTH}px;
                 }
 
                 .puzzle-progress-container {

diff --git a/src/components/PuzzleTitle/PuzzleTitle.js b/src/components/PuzzleTitle/PuzzleTitle.js
@@ -5,12 +5,13 @@ const margin = '0 0.3em 0 0;';
 
 const PuzzleTitle = ({ index, title }) => (
     <p>
-        <span className="puzzle-index">#{ index + 1 }</span>
-        <span className="puzzle-title">{ title }</span>
+        <span className="puzzle-index">#{index + 1}</span>
+        <span className="puzzle-title">{title}</span>
 
         <style jsx>{`
             p {
-                font-size: 1.5rem;
+                font-size: 48px;
+                font-family: 'Rosario', sans-serif;
             }
 
             .puzzle-index {

diff --git a/src/constants/layout-constants.js b/src/constants/layout-constants.js
@@ -0,0 +1,2 @@
+export const CONTENT_INSET_PADDING = 20;
+export const CONTENT_MAX_WIDTH = 1280;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const CONTENT_INSET_PADDING = 20;
		export const CONTENT_MAX_WIDTH = 1280;