nice documents view

frontend/src/Documents/Docs.scss

@@ -0,0 +1,38 @@
+@import "~@blueprintjs/core/lib/scss/variables";
+#overview {
+    max-width: 100%;
+    width: 50rem;
+    margin: 0 auto;
+    margin-top: 3.5rem;
+    max-height: 100%;
+    display: flex;
+    flex-direction: column;
+    .separator {
+        margin: 2rem 0;
+        width: 100%;
+        border-bottom: 1px $light-gray1 dashed;
+    }
+    .section {
+        width: 100%;
+    }
+    .list {
+        display: flex;
+        .card {
+            height: 15rem;
+            width: 10.5rem;
+            margin: 1rem;
+            padding: 0rem;
+
+            overflow: hidden;
+            h4 {
+                padding: 1rem;
+                padding-bottom: 1.5rem;
+                border-bottom: 1px $light-gray4 solid;
+                box-shadow: 0 0 5px $light-gray3;
+            }
+            .textPreview {
+                padding: 0.5rem;
+            }
+        }
+    }
+}

frontend/src/Documents/DocsList.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { IDocumentJSON } from "~../../src/entity/Document";
+
+import { DocumentCard } from "./DocumentCard";
+
+export function DocsList({ docs }: { docs: IDocumentJSON[] }) {
+    const cards = docs.map(doc => <DocumentCard key={doc.id} doc={doc} />);
+    return <div className="list">{cards}</div>;
+}

frontend/src/Documents/DocumentCard.tsx

@@ -0,0 +1,12 @@
+import { Card, H4 } from "@blueprintjs/core";
+import * as React from "react";
+import { IDocumentJSON } from "~../../src/entity/Document";
+
+export function DocumentCard({ doc }: { doc: IDocumentJSON }) {
+    return (
+        <Card className="card" interactive={true}>
+            <H4>{doc.name}</H4>
+            <div className="textPreview">{doc.content}</div>
+        </Card>
+    );
+}

frontend/src/Documents/List.tsx

@@ -1,5 +0,0 @@
-import * as React from "react";
-
-export function List() {
-    return <div />;
-}

frontend/src/Documents/Overview.tsx

@@ -1,4 +1,6 @@
-import { H1 } from "@blueprintjs/core";
+import "./Docs.scss";
+
+import { H3 } from "@blueprintjs/core";
 import * as React from "react";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
@@ -6,6 +8,8 @@ import { IDocumentJSON } from "~../../src/entity/Document";
 import { fetchDocsStart } from "~redux/docs/actions";
 import { IAppState } from "~redux/reducers";
 
+import { DocsList } from "./DocsList";
+
 export interface IOverviewComponentProps {
     recent: IDocumentJSON[] | null;
     all: IDocumentJSON[] | null;
@@ -29,16 +33,23 @@ export class OverviewComponent extends React.PureComponent<
     }
 
     public render() {
-        let docsList;
         if (this.props.all) {
-            docsList = this.props.all.map(doc => (
-                <div key={doc.id}>
-                    <H1>{doc.name}</H1>
-                    <p>{doc.content}</p>
+            return (
+                <div id="overview">
+                    <div className="section">
+                        <H3>Recent</H3>
+                        <DocsList docs={this.props.recent} />
+                    </div>
+                    <span className="separator" />
+                    <div className="section">
+                        <H3>All documents</H3>
+                        <DocsList docs={this.props.all} />
+                    </div>
                 </div>
-            ));
+            );
+        } else {
+            return <div>Loading</div>;
         }
-        return docsList || <div>Loading</div>;
     }
 }