From a46cadb568137a7f481b70fe7be4c9bb5f0ed1b1 Mon Sep 17 00:00:00 2001
From: Mike Fitzpatrick <mike@fitz.guru>
Date: Tue, 29 May 2018 22:28:39 -0400
Subject: [PATCH] - More styling

---
 src/pages/tell/tell.html |  7 +++++--
 src/pages/tell/tell.scss | 39 +++++++++++++++++++--------------------
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/pages/tell/tell.html b/src/pages/tell/tell.html
index 55af9ae..b7d57d2 100644
--- a/src/pages/tell/tell.html
+++ b/src/pages/tell/tell.html
@@ -12,9 +12,12 @@
 <ion-content padding>
   <p class="intro">Submit your story using the following form. Nicholas may be in touch to clarify what you’ve written and he reserves the right to vet stories for accuracy and appropriateness.</p>
   <form [formGroup]="userSubmissionForm" novalidate>
-    <div class="item item-block item-input item-label-stacked">
+    <div class="item item-block item-input item-label-stacked file-upload-wrapper">
       <div class="input-wrapper">
-        <label class="label" for="pic-upload">Upload a photo</label>
+        <label class="label">Upload a photo</label>
+        <label class="upload-trigger" for="pic-upload">
+          <ion-icon name="person"></ion-icon>
+        </div>
         <div class="input">
           <input type="file" id="pic-upload" formControlName="pic" name="pic" class="file-input" />
         </div>
diff --git a/src/pages/tell/tell.scss b/src/pages/tell/tell.scss
index e925d2f..3dbe953 100644
--- a/src/pages/tell/tell.scss
+++ b/src/pages/tell/tell.scss
@@ -1,27 +1,26 @@
 page-tell-your-story {
 
-  ion-col {
+  .label {
+    font-weight: 700;
+  }
 
-    &.cruise {
-      background-size: cover;
-      border: 1px solid #000000;
-      box-sizing: border-box;
-      padding: 0 0 37.5% !important;
-      position: relative;
+  .file-upload-wrapper {
 
-      .placename {
-        bottom: 0.25rem;
-        box-sizing: border-box;
-        color: #acacac;
-        display: inline-block;
-        left: 0.5rem;
-        overflow: hidden;
-        position: absolute;
-        right: 0.25rem;
-        text-overflow: ellipsis;
-        text-shadow: rgba(0, 0, 0, 1);
-        white-space: nowrap;
-      }
+    .upload-trigger {
+      border: 0.2rem solid #94949D;
+      color: #94949D;
+      display: block;
+      font-size: 7.8rem;
+      height: 9.8rem;
+      width: 9.8rem;
+    }
+
+    input {
+      display: none;
     }
   }
+
+  .button.button-block {
+    background-color: #fdb315;
+  }
 }