Add suggestions design, small design fixes

.gitignore

@@ -2,5 +2,4 @@ node_modules
 *.log
 *.log*
 build
-dist
-Wexond*
+dist

src/app.scss

@@ -33,4 +33,6 @@ $tabs-hover-color: rgba(0,0,0,0.08);
 @import 'components/Controls/style.scss';
 @import 'components/AddTab/style.scss';
 @import 'components/Bar/style.scss';
-@import 'components/AddressBar/style.scss';
+@import 'components/AddressBar/style.scss';
+@import 'components/Suggestions/style.scss';
+@import 'components/Suggestion/style.scss';

src/components/App/index.jsx

@@ -4,6 +4,7 @@ import SystemBar from '../SystemBar'
 import Tabs from '../Tabs'
 import Pages from '../Pages'
 import Bar from '../Bar'
+import Suggestions from '../Suggestions'
 
 import Store from '../../store'
 
@@ -22,6 +23,7 @@ export default class App extends Component {
           <Tabs></Tabs>
         </SystemBar>
         <Bar ref={(r) => { this.bar = r }}></Bar>
+        <Suggestions></Suggestions>
         <Pages></Pages>
       </div>
     )

src/components/App/style.scss

@@ -1,6 +1,7 @@
 body {
   @include Body1;
   @include cursor-default;
+  color: rgba(0, 0, 0, $primary-opacity-light);
   padding: 0;
   margin: 0;
   overflow: hidden;

src/components/Bar/style.scss

@@ -4,7 +4,7 @@
   top: $system-bar-height;
   width: 100%;
   height: $bar-height;
-  z-index: 2;
+  z-index: 3;
   background-color: white;
   box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.29);
 
@@ -28,7 +28,7 @@
     }
 
     &.disabled {
-      opacity: $disabled-opacity-light;
+      opacity: 0.2;
       pointer-events: none;
     }
 

src/components/Suggestion/index.jsx

@@ -0,0 +1,28 @@
+import Component from 'inferno-component'
+
+import { observer } from 'inferno-mobx'
+import Store from '../../store'
+
+@observer
+export default class Suggestion extends Component {
+  render () {
+    return (
+      <div className='suggestion'>
+        <div className='container'>
+          <div className='favicon'>
+
+          </div>
+          <div className='title'>
+            Nersent 
+          </div>
+          <div className='dash'>
+          &mdash;
+          </div>
+          <div className='address'>
+            http://www.nersent.tk/
+          </div>
+        </div>
+      </div>
+    )
+  }
+}

src/components/Suggestion/style.scss

@@ -0,0 +1,41 @@
+.suggestion {
+    padding: 8px;
+    border-radius: 2px;
+    width: 100%;
+
+    &:hover {
+        background-color: #EEEEEE;
+    }
+
+    .container {
+        display: flex;
+        flex-flow: row;
+        align-items: center;
+        width: calc(100% - (112px + 32px));
+        margin-left: 100px;
+
+        .favicon {
+            width: 16px;
+            height: 16px;
+            border: 1px dashed rgba(0, 0, 0, $dividers-opacity-light);
+        }
+
+        .title {
+            margin-left: 16px;
+        }
+
+        .address {
+            color: #2196F3;
+            @include Caption;
+            margin-top: 1px;
+        }
+
+        .dash {
+            opacity: $disabled-opacity-light;
+            margin-left: 6px;
+            margin-right: 6px;
+            @include Caption;
+            margin-top: 1px;
+        }
+    }
+}

src/components/Suggestions/index.jsx

@@ -3,12 +3,14 @@ import Component from 'inferno-component'
 import { observer } from 'inferno-mobx'
 import Store from '../../store'
 
+import Suggestion from '../Suggestion'
+
 @observer
 export default class Suggestions extends Component {
   render () {
     return (
       <div className='suggestions'>
-
+        <Suggestion />
       </div>
     )
   }

src/components/Suggestions/style.scss

@@ -0,0 +1,7 @@
+.suggestions {
+    padding: 8px 0 8px 0;
+    z-index: 3;
+    background-color: white;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.13), 0 4px 6px rgba(0,0,0,0.2);
+    display: flex;
+}

src/components/SystemBar/style.scss

@@ -6,7 +6,7 @@
   background-color: #EEE;
   height: $system-bar-height;
   width: 100%;
-  z-index: 3;
+  z-index: 4;
 
   & .border-bottom {
     position: absolute;

src/defaults/wexond-urls.js

@@ -0,0 +1,3 @@
+export default {
+    newtab: "wexond://newtab"
+}