Merge branch 'master' of ssh://github.com/tryflame/buildbuddy

app/menu/menu.tsx

@@ -26,11 +26,8 @@ export default class MenuComponent extends React.Component {
           <div className="side-menu">
             <ul>
               <li><a href="/">Home</a></li>
-              <li><a href="/">Release notes</a></li>
-              <li><a href="/">Community slack</a></li>
-              <li><a href="/">Help page</a></li>
-              <li><a href="/">Github repo</a></li>
-              <li><a href="/">Contact us</a></li>
+              <li><a href="https://github.com/tryflame/buildbuddy">Github repo</a></li>
+              <li><a href="mailto:help@tryflame.com">Contact us</a></li>
             </ul>
           </div>}
       </div>

app/root/root.tsx

@@ -31,9 +31,6 @@ export default class RootComponent extends React.Component {
 
   getCurrentInvocationId() {
     let invocationPath = "/invocation/"
-    if (this.state.hash.startsWith("#" + invocationPath)) {
-      return this.state.hash.replace("#" + invocationPath, "");
-    }
     if (!this.state.path.startsWith(invocationPath)) {
       return null;
     }
@@ -45,7 +42,7 @@ export default class RootComponent extends React.Component {
     return (
       <div>
         <MenuComponent />
-        {invocationId && <InvocationComponent invocationId={invocationId} />}
+        {invocationId && <InvocationComponent invocationId={invocationId} hash={this.state.hash} />}
         {!invocationId && <HomeComponent />}
       </div>
     );

static/style.css

@@ -33,7 +33,7 @@ a {
 /** Container **/
 
 .container {
-  max-width: 800px;
+  max-width: 1000px;
   margin: 0 auto;
   width: 100%;
   padding: 0 32px;
@@ -50,9 +50,9 @@ a {
   box-sizing: border-box;
   font-weight: 700;
   font-size: 24px;
-  z-index: 1;
+  z-index: 2;
   position: relative;
-  background-color: rgba(55,71,79 ,1);
+  background-color: rgba(38,50,56 ,1);
   color: #fff;
 }
 
@@ -74,13 +74,15 @@ a {
 /** Side menu **/
 
 .side-menu {
-  position: fixed;
+  position: absolute;
   top: 64px;
   left: 0;
   bottom: 0;
   background-color: #fff;
   padding: 32px 48px;
   box-shadow: 0px 1px 4px rgba(0, 0, 0, .15);
+  border-bottom-right-radius: 8px;
+  z-index: 1;
 }
 
 .side-menu li {
@@ -104,31 +106,88 @@ a {
 .shelf .titles {
   display: flex;
   align-items: baseline;
+  flex-wrap: wrap;
 }
 
 .shelf .title {
-  font-weight: 700;
-  font-size: 24px;
+  font-weight: 600;
+  font-size: 32px;
+  margin-right: 16px;
+  margin-bottom: 8px;
 }
 
 .shelf .subtitle {
-  font-weight: 600;
-  margin-left: 8px;
-  color: #888;
+  font-size: 18px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, .8);
+  margin-bottom: 8px;
+}
+
+.shelf .invocation {
+  font-size: 16px;
+  color: #ccc;
+  margin-bottom: 8px;
 }
 
 .shelf .details {
+  font-size: 16px;
   line-height: 1.6em;
-  margin-top: 2px;
-  color: #444;
+  color: rgba(0, 0, 0, .5);
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.shelf .detail {
+  display: flex;
+  align-items: center;
+  margin-right: 32px;
+  margin-top: 8px;
+}
+
+.shelf .details img {
+  opacity: 0.5;
+  margin-right: 8px;
+}
+
+.shelf .details img:first-of-type {
+  margin-left: 0;
+}
+
+/** Tabs **/
+
+.tabs {
+  display: flex;
+  align-items: center;
+  margin-top: 16px;
+  flex-wrap: wrap;
+}
+
+.tab {
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, .15);
+  border-radius: 50px;
+  margin-left: 8px;
+  padding: 12px 32px;
+  cursor: pointer;
+  margin-top: 8px;
+  color: #ccc;
+  text-align: center;
+  flex-shrink: 0;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.tab.selected {
+  background: rgba(38,50,56 ,1);
+  color: #fff;
 }
 
 /** Card **/
 
 .card {
   box-shadow: 0px 1px 4px rgba(0, 0, 0, .15);
   margin: 32px 0;
-  padding: 24px;
+  padding: 32px;
   border-radius: 8px;
   font-size: 14px;
   display: flex;
@@ -137,7 +196,8 @@ a {
 }
 
 .card .icon {
-  margin-right: 24px;
+  margin-right: 16px;
+  padding-top: 2px;
 }
 
 .card .title {