ui grid

client/src/components/atoms/AreaButton.module.scss

@@ -0,0 +1,30 @@
+@import '../../styles/variables';
+
+.areaButton {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-all;
+
+    > a {
+        display: block;
+        height: 100%;
+        padding: $spacer;
+        border: 1px solid $brand-grey-lighter;
+        border-radius: $border-radius;
+        background: $brand-white;
+        color: inherit;
+        position: relative;
+
+        &:hover,
+        &:focus {
+            color: inherit;
+            border-color: $brand-pink;
+            transform: none;
+        }
+    }
+
+    h1 {
+        font-size: $font-size-large;
+        margin-top: 0;
+    }
+}

client/src/components/atoms/AreaButton.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import styles from './AreaButton.module.scss'
+
+const AreaButton = ({ title, description, action }: { title: string; description: string, action: any }) => {
+
+    return (
+        <article className={styles.areaButton}>
+            <a href="#" onClick={action}>
+                <h1>{title}</h1>
+                <p>{description}</p>
+            </a>
+        </article>
+    )
+}
+
+export default AreaButton

client/src/routes/Publish/index.module.scss

@@ -0,0 +1,23 @@
+@import '../../styles/variables';
+
+/*
+
+.small{
+
+}
+*/
+
+.typeGrid {
+    display: grid;
+    grid-template-rows: 2fr 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: $spacer/4;
+
+    @media (min-width: $break-point--small) {
+        grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+    }
+}
+
+.typeGrid > article:first-child {
+    grid-column: 1 / span 2;
+}

client/src/routes/Publish/index.tsx

@@ -1,7 +1,9 @@
 import React, { Component } from 'react'
 import Route from '../../components/templates/Route'
+import AreaButton from '../../components/atoms/AreaButton'
 import { User } from '../../context'
 import Loader from './loader'
+import styles from './index.module.scss'
 
 interface PublishState {
     type: string
@@ -17,12 +19,12 @@ class Publish extends Component<{}, PublishState> {
     public publishContainer = () => {
         this.setState({ type: 'container' })
     }
-    public publishAlgorithm = () => {
-        this.setState({ type: 'algorithm' })
-    }
     public publishWorkflow = () => {
         this.setState({ type: 'workflow' })
     }
+    public publishAlgorithm = () => {
+        this.setState({ type: 'algorithm' })
+    }
     public render() {
         return (
             <div>
@@ -34,14 +36,12 @@ class Publish extends Component<{}, PublishState> {
                         title="Publish"
                         description="What do you want to publish?"
                     >
-                        <button onClick={this.publishDataset}>Dataset</button>
-                        <button onClick={this.publishContainer}>
-                            Container
-                        </button>
-                        <button onClick={this.publishWorkflow}>Workflow</button>
-                        <button onClick={this.publishAlgorithm}>
-                            Algorithm
-                        </button>
+                        <div className={styles.typeGrid}>
+                            <AreaButton title={'Dataset'} description={'Datasets are xxx'} action={this.publishDataset}/>
+                            <AreaButton title={'Container'} description={'Container are xxx'} action={this.publishContainer}/>
+                            <AreaButton title={'Workflow'} description={'Workflow are xxx'} action={this.publishWorkflow}/>
+                            <AreaButton title={'Algorithm'} description={'Algorithm are xxx'} action={this.publishAlgorithm}/>
+                        </div>
                     </Route>
                 )}
             </div>