commit before lunch

Author: SterlingChin

src/components/training/instructions.html

@@ -1,4 +1,4 @@
-<div>
+<div class='instructions-text'>
   <h2 class="font20-reg">Instructions</h2>
   <div>
     <p class="font14-reg pre-line">{{instructions}}</p>

src/components/training/output.html

@@ -1,5 +1,15 @@
 <div class='output'>
-  <p class="font14-reg val">Time: {{time}} <span class='pass'> Passed: </span>{{testPass}} <span class='fail'> Failed: </span>{{testFail}} </p>
+  <div class="font14-reg val output-header">
+    <div class='output-items'>
+      Time: <span class='white'>{{time}}</span>
+    </div>
+    <div class='pass output-items'>
+      Passed:<span class='white'>{{testPass}}</span>
+    </div>
+    <div class='fail output-items'>
+      Failed: <span class='white'>{{testFail}}</span>
+    </div>
+  </div>
   <hr>
   <span class='font14-reg val'><u>Test Results:</u></span> <br><br>
   <div class="font14-reg-nw val" ng-repeat='val in answer' ng-class="val.passed != undefined ? (val.passed ? 'pass' : 'fail') : 'white'">

src/components/training/training.html

@@ -44,7 +44,7 @@ <h2 class="font20-reg">Name of Kata</h2>
       </div> -->
       <div class="instructions" ng-style="instructionStyle">
         <div class="instructions-head">
-          <div class='instructions-selector font14-lit-gray' ng-click='showInstructions()'>Instructions</div>
+          <div class='instructions-selector font14-lit-gray' ng-click='showInstructions()'><div class='button-text'>Instructions</div></div>
           <div class='output-selector font14-lit-gray' ng-click='showOutput()'><div class='button-text'>Output</div></div>
           <!--<button class="instructions-selector font13-reg-gray" ng-click="showInstructions()">Instructions</button>
           <button class="instructions-selector font13-reg-gray" ng-click="showOutput()">Output</button>-->

src/components/training/training.scss

@@ -102,7 +102,6 @@ $white: white;
 }
 
 .instructions {
-  // height: calc(100vh - 150px);
   width: 40vw;
   overflow: scroll;
   margin: 15px;
@@ -124,6 +123,7 @@ $white: white;
   text-align: center;
   cursor: pointer;
   background-color: $grey-color2;
+  display:flex;
 }
 
 .output-selector {
@@ -132,10 +132,16 @@ $white: white;
   text-align: center;
   cursor: pointer;
   line-height: 40px;
+  display:flex;
 }
 
 .button-text {
 margin:auto;
+align-self: center;
+}
+
+.instructions-text {
+  padding: 5px 0 0 10px;
 }
 
 hr {
@@ -193,6 +199,17 @@ hr {
   margin: 0 0 0 10px;
   overflow: auto;
 }
+
+.output-header {
+  display:flex;
+  flex-direction: row;
+  align-content: left;
+}
+
+.output-items {
+  justify-content: space-between;
+}
+
 .pass {
   color: $pass;
 }