Create components based on visual design

src/components/Breadcrumbs.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import './Breadcrumbs.less';
+
+function Breadcrumbs({ items }) {
+  return (
+    <ul className="breadcrumbs">
+      {items.map((item, i) => (
+        <li key={i}>
+          <a href={item.link}>{item.name}</a>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default Breadcrumbs;

src/components/Breadcrumbs.less

@@ -0,0 +1,34 @@
+.breadcrumbs {
+    margin: 0;
+    padding: 0;
+
+    color: #818a8a;
+    text-transform: uppercase;
+    font-size: 13px;
+    font-weight: 500;
+    letter-spacing: 1px;
+
+    a {
+        color: #818a8a;
+    }
+
+    > li {
+        display: inline-block;
+
+        margin: 0;
+        padding: 0;
+        list-style: none;
+
+        &:not(:last-child) {
+            padding-right: 8px;
+
+            &:after {
+                content: '';
+                display: inline-block;
+                background: url(/breadcrumbs-arrow.svg) no-repeat 10px 0;
+                width: 20px;
+                height: 8px;
+            }
+        }
+    }
+}

src/components/Experiment/Actions.js

@@ -7,7 +7,7 @@ function Selector({ markSimilar, markMaybe, markDifferent }) {
       <Button bsSize="large" bsStyle="success" onClick={markSimilar}>
         Identical
       </Button>
-      <Button bsSize="large" onClick={markMaybe}>
+      <Button bsSize="large" bsStyle="warning" onClick={markMaybe}>
         Similar
       </Button>
       <Button bsSize="large" bsStyle="danger" onClick={markDifferent}>

src/components/Experiment/Progress.js

@@ -7,7 +7,7 @@ function Progress({ percent, className = '' }) {
     <div className={`ex-progress ${className}`}>
       <div className="ex-progress__percent">{percent}%</div>
       <div className="ex-progress__bar">
-        <ProgressBar striped bsStyle="info" now={percent} />
+        <ProgressBar now={percent} />
       </div>
     </div>
   );

src/components/Experiment/Progress.less

@@ -4,7 +4,13 @@
     display: flex;
 
     &__percent {
-        padding-right: 5px;
+        color: #a0a2a2;
+        text-transform: uppercase;
+        font-size: 13px;
+        font-weight: 500;
+        letter-spacing: 1px;
+        padding-right: 8px;
+        padding-top: 1px;
     }
 
     &__bar {
@@ -15,6 +21,15 @@
         .progress {
             height: 10px;
             margin: 0;
+
+            background: #666a6a;
+            border-radius: 0;
+        }
+
+        .progress-bar {
+            background: #a0a2a2;
+            background-image: none;
+            box-shadow: none;
         }
     }
 }

src/components/Experiment/Selector.js

@@ -1,18 +1,57 @@
-import React from 'react';
+import React, { Component } from 'react';
+import './Selector.less';
 
-function Selector({ options, value, select }) {
-  return (
-    <div>
-      Previous:{' '}
-      <select value={value} onChange={e => select(e.target.value)}>
-        {options.map(opt => (
-          <option value={opt.value} key={opt.value}>
-            {opt.name}
-          </option>
-        ))}
-      </select>
-    </div>
-  );
+class Selector extends Component {
+  constructor(props) {
+    super(props);
+
+    this.titleEl = null;
+    this.state = {
+      titleWidth: 0,
+    };
+  }
+
+  componentDidMount() {
+    this.setState({ titleWidth: this.titleEl.offsetWidth });
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.title === prevProps.title) {
+      return;
+    }
+    this.setState({ titleWidth: this.titleEl.offsetWidth });
+  }
+
+  render() {
+    const { title, value, onChange, options } = this.props;
+
+    return (
+      <div className="selector">
+        <span
+          className="selector__title"
+          ref={e => {
+            this.titleEl = e;
+          }}
+        >
+          {title}
+        </span>
+        <select
+          value={value}
+          onChange={onChange}
+          ref={e => {
+            this.select = e;
+          }}
+          style={{ paddingLeft: this.state.titleWidth }}
+        >
+          {options.map(opt => (
+            <option value={opt.value} key={opt.value}>
+              {opt.name}
+            </option>
+          ))}
+        </select>
+      </div>
+    );
+  }
 }
 
 export default Selector;

src/components/Experiment/Selector.less

@@ -0,0 +1,41 @@
+.selector {
+    position: relative;
+    display: inline-block;
+
+    padding: 0 0;
+    background: #0c0d0e url('/dropdown-arrow.svg') no-repeat;
+    background-size: 11px;
+    background-position: right 20px top 15px;
+    color: #979a9a;
+    text-transform: uppercase;
+    font-size: 15px;
+    font-weight: 300;
+    letter-spacing: 2px;
+    cursor: pointer;
+
+    &__title {
+        position: absolute;
+        top: 0;
+        left: 0;
+        line-height: 39px;
+        padding: 0 10px 0 20px;
+        z-index: 0;
+    }
+
+    select {
+        position: relative;
+        background: transparent;
+        border: none;
+        outline: none;
+        display: inline-block;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        border-radius: 0;
+        height: 39px;
+        padding-right: 40px;
+        text-align: center;
+        cursor: pointer;
+        z-index: 1;
+    }
+}

src/components/PageHeader.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Navbar, Nav, NavItem } from 'react-bootstrap';
+import './PageHeader.less';
 
 function PageHeader({ username, avatarUrl }) {
   return (
-    <Navbar fluid>
+    <Navbar fluid className="header">
       <Navbar.Header>
         <Navbar.Brand>
           <h1>

src/components/PageHeader.less

@@ -1,5 +1,32 @@
-@import '../../node_modules/bootstrap/less/variables.less';
+.header.navbar {
+    &-default {
+        margin: 0;
+        background-color: #2c3132;
+        border-radius: 0;
+        border: none;
+    }
 
-@navbar-borders: 2px;
-// @navbar-height is only min-height, update this rule if you make header bigger
-@navbar-total-height: @navbar-height + @navbar-margin-bottom + @navbar-borders;
+    h1.navbar-brand {
+        margin: 0 0 0 -15px;
+
+        a {
+            color: #808b8c;
+            font-size: 12px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            font-weight: 300;
+            text-decoration: none;
+
+            img {
+                width: 30px;
+                margin-right: 10px;
+                vertical-align: -4px;
+            }
+        }
+
+        a:hover {
+            text-decoration: none;
+            color: #fff;
+        }
+    }
+}

src/index.js

@@ -11,6 +11,7 @@ import rootReducer, { middlewares } from './state';
 import { enhancer as routerEnhancer } from './state/routes';
 import { logIn } from './state/user';
 import TokenService from './services/token';
+import './override.less';
 import './index.less';
 import App from './App';
 

src/override.less

@@ -0,0 +1,81 @@
+// bootstrap overrides
+// we may later change how we build the app and move it to bootstrap variables
+
+.btn {
+    text-transform: uppercase;
+    font-size: 15px;
+    font-weight: 300;
+    letter-spacing: 2px;
+    padding-right: 22px;
+    padding-left: 22px;
+}
+
+.btn,
+.btn-lg,
+.btn-group-lg > .btn {
+    border-radius: 0;
+}
+
+.btn-default {
+    background: none;
+    color: #808b8c;
+    border: none;
+    padding-top: 10px;
+}
+
+.btn-default:hover {
+    background: none;
+    color: #fff;
+}
+
+.btn-success {
+    color: #004c2a;
+    background-color: #66ffba;
+    border: none;
+}
+
+.btn-danger {
+    color: #61312c;
+    background-color: #f37b6f;
+    border: none;
+}
+
+.btn-warning {
+    color: #191b1c;
+    background-color: #808b8c;
+    border: none;
+}
+
+.btn-warning:hover,
+.btn-danger:hover,
+.btn-success:hover,
+.btn-info:hover,
+.btn-warning:focus,
+.btn-danger:focus,
+.btn-success:focus,
+.btn-info:focus {
+    color: #d8dcdc;
+    background-color: #0c0d0e;
+}
+
+.btn-success:hover,
+.btn-success:focus {
+    color: #66ffba;
+}
+.btn-danger:hover,
+.btn-danger:focus {
+    color: #f37b6f;
+}
+
+.btn-info {
+    color: #006166;
+    background-color: #00f3ff;
+    border: none;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+.btn-info:hover,
+.btn-info:focus {
+    color: #00f3ff;
+}