Style github activity feed

README.md

@@ -7,14 +7,14 @@ TODO:
 [ ] Create error / retry component
 [ ] Add placeholder image to Image component for error and loading states
 [ ] Fix post meta logo animation (border-radius issue)
-[ ] Style github activity
+[x] Style github activity
 [ ] Add footer
 [ ] Revert limit back to 15 (default) on /posts api
 [ ] Address React warnings
 [ ] Lint on a machine which isn't 8 years old (hurry up WWDC)
 
 Boilerplate (Copy from here back to boilerplate)
 [ ] Add pretty express stack traces when error is thrown.
-[ ] Add rendering try catch in server.js to boilerplate
-[ ] Filter out undefined components in server.js fetchComponentData
+[x] Add rendering try catch in server.js to boilerplate
+[x] Filter out undefined components in server.js fetchComponentData
 [ ] Dedupe deps

src/components/code/Code.css

@@ -1,3 +1,122 @@
-.code {
-    background: red;
+ @import '../../root.css';
+
+.root {
+    color: var(--darkgrey);
+    font-family: var(--avenirnext);
+    font-size: 16px;
+    line-height: 20px;
+    margin: 0 0 50px;
 }
+
+/* copied from <ActionText />...lame */
+.root a,
+.root a:link,
+.root a:visited {
+    text-decoration: none;
+    color: var(--blue);
+}
+
+.root a:hover,
+.root a:focus {
+    text-decoration: underline;
+}
+
+.root a:active {
+    color: var(--darkblue);
+}
+
+.root a:visited {
+    color: var(--purple);
+}
+
+.root a:visited:active {
+    color: var(--deeppurple);
+}
+
+.root > div {
+    position: relative;
+    padding: 0 0 20px 40px;
+    border-bottom: 1px solid var(--lightgrey);
+    margin: 0 0 20px;
+}
+
+.root > div:last-child {
+    border: none;
+}
+
+.root :global(.dashboard-event-icon) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: 0 30px 0 0;
+    width: 30px;
+    height: 30px;
+    color: var(--grey);
+}
+
+.root :global(.time) {
+    color: var(--grey);
+    font-size: 14px;
+}
+
+.root :global(.title) {
+    font-weight: bold;
+    margin: 0 0 10px;
+}
+
+.root :global(.simple) :global(.title),
+.root :global(.simple) :global(.time) {
+    display: inline;
+}
+
+.root :global(.details) {
+    position: relative;
+    padding: 0 0 0 40px;
+    min-height: 30px;
+    font-size: 14px;
+}
+
+.root :global(.details) :global(.gravatar) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 30px;
+    height: 30px;
+}
+
+.root :global(.commits) > ul > li {
+    margin: 0 0 6px;
+}
+
+.root :global(.commits) img {
+    vertical-align: bottom;
+    width: 20px;
+    height: 20px;
+}
+
+.root :global(.commits) :global(.message),
+.root :global(.commits) :global(.message) blockquote {
+    display: inline;
+}
+
+.root :global(.pull-info) {
+    display: inline-block;
+    padding: 3px 7px;
+    margin-top: 6px;
+    font-size: 12px;
+    color: rgba(0,0,0,0.5);
+    background: var(--lightgrey);
+    border-radius: 3px;
+}
+
+.root :global(.pull-info) svg {
+    vertical-align: middle;
+    width: 16px;
+    height: 16px;
+}
+
+.root :global(.pull-info) em {
+    font-weight: bold;
+}
+
+/*.news .alert .branch-link, .news .alert .pull-info*/

src/components/code/Code.js

@@ -8,6 +8,7 @@ import {
     getEvents,
     getHasData
 } from '../../selectors/code/code';
+import styles from './Code.css'
 
 class Code extends Component {
 
@@ -33,7 +34,7 @@ class Code extends Component {
     render() {
         const { isFetching, error, events, hasData } = this.props;
         return (
-            <div>
+            <div className={styles.root}>
                 <Helmet title="Code" />
                 {isFetching ? (
                     <div>Loading...</div>