- Styling the form

src/pages/tell/tell.html

@@ -25,15 +25,15 @@
     </div>
     <ion-item>
       <ion-label stacked>Display name</ion-label>
-      <ion-input type="text" formControlName="name" name="name"></ion-input>
+      <ion-input type="text" formControlName="name" name="name" placeholder="Please enter text here"></ion-input>
     </ion-item>
     <ion-item>
       <ion-label stacked>About you</ion-label>
-      <ion-textarea formControlName="about" name="about"></ion-textarea>
+      <ion-textarea formControlName="about" name="about" placeholder="Please enter text here"></ion-textarea>
     </ion-item>
     <ion-item>
       <ion-label stacked>Your schtick with #gays</ion-label>
-      <ion-textarea formControlName="messages" name="messages"></ion-textarea>
+      <ion-textarea formControlName="messages" name="messages" placeholder="Please enter text here"></ion-textarea>
     </ion-item>
     <div padding>
       <button ion-button type="submit" block (click)="saveUserSubmission()">Submit</button>

src/pages/tell/tell.scss

@@ -1,10 +1,30 @@
 page-tell-your-story {
 
+  .item.item-block {
+    padding-left: 0;
+  }
+
+  .input-wrapper {
+    align-items: flex-start;
+  }
+
   .label {
+    font-size: 1.2rem;
     font-weight: 700;
+    margin-bottom: 4px;
+    text-align: left;
+  }
+
+  ion-input, ion-textarea {
+
+    &::placeholder {
+      color: #94949D;
+      font-size: 0.8rem;
+    }
   }
 
   .file-upload-wrapper {
+    text-align: left;
 
     .upload-trigger {
       border: 0.2rem solid #94949D;
@@ -12,7 +32,14 @@ page-tell-your-story {
       display: block;
       font-size: 7.8rem;
       height: 9.8rem;
+      text-align: left;
       width: 9.8rem;
+
+      ion-icon {
+        left: 50%;
+        position: relative;
+        transform: translate3d(-50%, 0, 0);
+      }
     }
 
     input {
@@ -22,5 +49,6 @@ page-tell-your-story {
 
   .button.button-block {
     background-color: #fdb315;
+    color: #191b1c;
   }
 }