From 4bed11c7ee0e859ca6ab7d026027b6db81ac6872 Mon Sep 17 00:00:00 2001
From: Jernej Pregelj <jernej.pregelj88@gmail.com>
Date: Fri, 3 May 2019 16:10:01 +0200
Subject: [PATCH] finished, still missing texts, images

---
 .../components/atoms/AreaButton.module.scss   | 13 +++++++++-
 client/src/components/atoms/AreaButton.tsx    | 11 +++++---
 client/src/routes/Publish/index.module.scss   | 26 ++++++++++++-------
 client/src/routes/Publish/index.tsx           |  8 +++---
 4 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/client/src/components/atoms/AreaButton.module.scss b/client/src/components/atoms/AreaButton.module.scss
index 8b36834..20c241c 100644
--- a/client/src/components/atoms/AreaButton.module.scss
+++ b/client/src/components/atoms/AreaButton.module.scss
@@ -12,9 +12,10 @@
         border: 1px solid $brand-grey-lighter;
         border-radius: $border-radius;
         background: $brand-white;
-        color: inherit;
         position: relative;
         cursor: pointer;
+        font-size: .85rem;
+        color: #41474e;
 
         &:hover,
         &:focus {
@@ -22,6 +23,16 @@
             border-color: $brand-pink;
             transform: none;
         }
+
+        img {
+            width: 110px;
+            padding-right: $spacer;
+            float: left;
+        }
+
+        > div {
+            display: inline;
+        }
     }
 
     h1 {
diff --git a/client/src/components/atoms/AreaButton.tsx b/client/src/components/atoms/AreaButton.tsx
index 84fc94c..9ae5d1c 100644
--- a/client/src/components/atoms/AreaButton.tsx
+++ b/client/src/components/atoms/AreaButton.tsx
@@ -4,10 +4,13 @@ import styles from './AreaButton.module.scss'
 const AreaButton = ({ title, description, action }: { title: string; description: string, action: any }) => {
 
     return (
-        <div className={styles.areaButton}>
-            <div onClick={action}>
-                <h1>{title}</h1>
-                <p>{description}</p>
+        <div className={styles.areaButton} onClick={action}>
+            <div>
+                <img src="https://placeimg.com/150/150/any" alt="{title}"/>
+                <div className="text">
+                    <h1>{title}</h1>
+                    <>{description}</>
+                </div>
             </div>
         </div>
     )
diff --git a/client/src/routes/Publish/index.module.scss b/client/src/routes/Publish/index.module.scss
index 41e374b..ff7832e 100644
--- a/client/src/routes/Publish/index.module.scss
+++ b/client/src/routes/Publish/index.module.scss
@@ -2,19 +2,25 @@
 
 .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) {
-    .typeGrid > div:first-child {
-        grid-column: 1 / span 2;
-    }
-}
+    @media (min-width: $break-point--small) {
+        & > div:first-child {
+            grid-column: 1 / span 2;
+            height: 100%;
+            min-height: 235px;
 
-@media (max-width: $break-point--small) {
-    .typeGrid > div {
-        grid-column: 1 / span 2;
+            img {
+                width: 200px;
+            }
+        }
     }
+
+    @media (max-width: $break-point--small) {
+        & > div {
+            grid-column: 1 / span 2;
+        }
+    }
+
 }
diff --git a/client/src/routes/Publish/index.tsx b/client/src/routes/Publish/index.tsx
index 7b40eb2..6c828d7 100644
--- a/client/src/routes/Publish/index.tsx
+++ b/client/src/routes/Publish/index.tsx
@@ -40,10 +40,10 @@ class Publish extends Component<{}, PublishState> {
                         description="What do you want to publish?"
                     >
                         <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}/>
+                            <AreaButton title={'Dataset'} description={'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ipsum leo, posuere vitae sem vel, feugiat facilisis libero. Vestibulum eu elit sed lacus egestas laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.'} action={this.publishDataset}/>
+                            <AreaButton title={'Container'} description={'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ipsum leo, posuere vitae sem vel.'} action={this.publishContainer}/>
+                            <AreaButton title={'Workflow'} description={'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ipsum leo, posuere vitae sem vel.'} action={this.publishWorkflow}/>
+                            <AreaButton title={'Algorithm'} description={'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ipsum leo, posuere vitae sem vel.'} action={this.publishAlgorithm}/>
                         </div>
                     </Route>
                 )}