Styles

packages/frontend/src/components/Ago.tsx

@@ -58,6 +58,10 @@ export class Ago extends React.Component<Ago.Props, Ago.State> {
     }
 
     public render() {
+        if (this.props.when === 0) {
+            return <span>-</span>;
+        }
+
         const ago = Math.max(this.state.now - this.props.when, 0) / 1000;
 
         let agoStr: string;

packages/frontend/src/components/Icon.css

@@ -1,6 +1,8 @@
 .Icon {
     fill: currentColor;
     height: 1em;
+    width: 1em;
+    text-align: center;
     vertical-align: middle;
     display: inline-block;
 }

packages/frontend/src/components/Tile.css

@@ -2,6 +2,32 @@
   font-size: 2.5em;
   padding: 20px;
   text-align: left;
-  width: 7em;
+  width: 230px;
   display: inline-block;
+  position: relative;
+}
+
+.Tile-label {
+  position: absolute;
+  top: 20px;
+  left: 90px;
+  right: 0;
+  font-size: 0.4em;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+.Tile-content {
+  position: absolute;
+  bottom: 20px;
+  left: 90px;
+  right: 0;
+  font-size: 0.75em;
+}
+
+.Tile .Icon {
+  padding: 0.25em;
+  border-radius: 1em;
+  background: #d64ca8;
+  color: #fff;
 }

packages/frontend/src/components/Tile.tsx

@@ -13,7 +13,9 @@ export namespace Tile {
 export function Tile(props: Tile.Props) {
     return (
         <div className="Tile">
-            <Icon src={props.icon} alt={props.title} /> {props.children}
+            <Icon src={props.icon} alt={props.title} />
+            <span className="Tile-label">{props.title}</span>
+            <span className="Tile-content">{props.children}</span>
         </div>
     );
 }