merge style changes from legacy

3 files changed, 80 insertions, 39 deletions

diff --git a/vnext/src/App.js b/vnext/src/App.js
index 6d254d14..7f383900 100644
--- a/vnext/src/App.js
+++ b/vnext/src/App.js
@@ -99,33 +99,28 @@ export default class App extends React.Component {
                 :
                 <div id="logo"><Link to="/">Juick</Link></div>
               }
-              <div id="search">
+              <div id="search" className="desktop">
                 <SearchBox pathname="/discover" onSearch={this.search} {...this.props} />
               </div>
               <nav id="global">
-                <ul>
-                  {user.uid > 0 ?
-                    <li>
-                      <Link to={{ pathname: '/' }}>
-                        <Icon name="ei-comment" size="s" /><span>Discuss</span>
-                        {
-                          user.unreadCount &&
-                          <span className="badge">{user.unreadCount}</span>
-                        }
-                      </Link>
-                    </li>
-                    :
-                    <li><Link to='/?media=1' rel="nofollow"><Icon name="ei-camera" size="s" />Photos</Link></li>
-                  }
-                  <li><Link to={{ pathname: '/discover' }} rel="nofollow"><Icon name="ei-search" size="s" />Discover</Link></li>
-                  <li>
-                    {user.uid > 0 ?
-                      <Link to={{ pathname: '/post' }}><Icon name="ei-pencil" size="s" />Post</Link>
-                      :
-                      <LoginButton title="Login" onAuth={this.auth} />
+                {user.uid > 0 ?
+                  <Link to={{ pathname: '/' }}>
+                    <Icon name="ei-bell" size="s" /><span>Discuss</span>
+                    {
+                      user.unreadCount &&
+                      <span className="badge">{user.unreadCount}</span>
                     }
-                  </li>
-                </ul>
+                  </Link>
+                  :
+                  <Link to='/?media=1' rel="nofollow"><Icon name="ei-camera" size="s" />Photos</Link>
+                }
+                <Link to={{ pathname: '/discover' }} rel="nofollow"><Icon name="ei-search" size="s" />Discover</Link>
+
+                {user.uid > 0 ?
+                  <Link to={{ pathname: '/post' }}><Icon name="ei-pencil" size="s" />Post</Link>
+                  :
+                  <LoginButton title="Login" onAuth={this.auth} />
+                }
               </nav>
             </div>
           </Header>
@@ -151,7 +146,26 @@ export default class App extends React.Component {
               </Switch>
             </section>
             <aside id="sidebar">
-            SIDESIDESIDE
+              <Link to="/?show=my">
+                <Icon name="ei-clock" size="s" />
+                <span className="desktop">My feed</span>
+              </Link>
+              <Link to="/pm">
+                <Icon name="ei-envelope" size="s" />
+                <span className="desktop">Messages</span>
+              </Link>
+              <Link to="/?show=discuss">
+                <Icon name="ei-bell" size="s" />
+                <span className="desktop">Discussions</span>
+              </Link>
+              <Link to={`/${user.name}/?show=recomm`} rel="nofollow">
+                <Icon name="ei-heart" size="s" />
+                <span className="desktop">Recommendations</span>
+              </Link>
+              <Link to={`/${user.name}/?show=photos`} rel="nofollow">
+                <Icon name="ei-camera" size="s" />
+                <span className="desktop">Photos</span>
+              </Link>
             </aside>
           </div>
           <div id="footer">
@@ -162,7 +176,7 @@ export default class App extends React.Component {
             <div id="footer-left">juick.com &copy; 2008-2018
                 <br />
             </div>
-        </div>
+          </div>
         </>
       </Router>
     );
diff --git a/vnext/src/components/Spinner.js b/vnext/src/components/Spinner.js
index b5ec4e0d..b5e33947 100644
--- a/vnext/src/components/Spinner.js
+++ b/vnext/src/components/Spinner.js
@@ -9,7 +9,7 @@ export default function Spinner(props) {
                 speed={2}
                 primaryColor="#f8f8f8"
                 secondaryColor="#ecebeb"
-                style={{ width: '400px', height: '160px' }}
+                style={{ height: '160px' }}
                 {...props}>
                 <rect x="56" y="6" rx="0" ry="0" width="117" height="6.4" />
                 <rect x="56" y="20" rx="0" ry="0" width="85" height="6.4" />
diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css
index 6a307b87..dfc657cf 100644
--- a/vnext/src/style/main.css
+++ b/vnext/src/style/main.css
@@ -41,6 +41,7 @@ img, hr {
     grid-template-areas: "header" "content" "footer";
     grid-template-columns: 1fr;
     grid-template-rows: auto minmax(1fr, auto) auto;
+    grid-gap: 6px;
     min-height: 100vh;
     font: -apple-system-body;
     font-family: -apple-system, Segoe UI;
@@ -50,7 +51,7 @@ img, hr {
 #header {
     grid-area: header;
     background: #fff;
-    border-bottom: 1px solid #ccc;
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);
 }
 
 #sidebar {
@@ -64,6 +65,8 @@ img, hr {
     overflow-x: hidden;
     height: 100%;
     z-index: 1;
+    display: flex;
+    flex-direction: column;
 }
 
 .nav_content {
@@ -112,7 +115,6 @@ img, hr {
 
 #ctitle {
     display: flex;
-    font-size: 14pt;
 }
 
 #ctitle img {
@@ -126,32 +128,57 @@ img, hr {
     display: flex;
 }
 
+#global a,
+#ctitle a {
+    display: flex;
+    align-items: center;
+    border-bottom: 2px solid transparent;
+}
+
 #global a {
-    color: #888;
-    display: inline-block;
-    font-size: 13pt;
+    color: #88958d;
     padding: 14px 16px;
 }
 
-#global li {
-    display: inline-block;
+#sidebar a {
+    color: #88958d;
+    display: flex;
+    padding: 14px;
+    align-items: center;
+    vertical-align: middle;
+}
+#sidebar a:hover {
+    background-color: #f8f8f8;
+    border-right: 2px solid #ff339a;
+    cursor: pointer;
 }
 
 #ctitle a {
-    padding: 4px 20px;
+    padding: 2px 20px;
 }
 
-#global a:hover, #global li:hover, #ctitle a:hover, .l a:hover .msg-button:hover {
-    background-color: #ec4b98;
-    color: #fff;
+#global a:hover,
+#ctitle a:hover,
+.l a:hover
+.msg-button:hover {
+    background-color: #f8f8f8;
+    border-bottom: 2px solid #ff339a;
     cursor: pointer;
 }
 
 .icon {
-    margin-top: -2px;
     vertical-align: middle;
 }
 
+#search input {
+    background: #FFF;
+    border: 1px solid #ccc;
+    outline: none !important;
+    padding: 4px;
+    -webkit-appearance: none;
+    border-radius: 0;
+}
+
 
 @media (--viewport-desktop) {
     #app {
@@ -189,10 +216,10 @@ img, hr {
         border: 0;
         position: static;
         grid-area: nav;
-        width: auto;
         top: inherit;
         left: inherit;
         z-index: inherit;
         overflow-x: inherit;
+        width: 240px;
     }
 }
\ No newline at end of file