upper menu fading in and out

Author: SterlingChin

src/assets/scss/styles.scss

@@ -16,6 +16,7 @@ $blue-color: #6795DE;
 $orange-color: #CF4B32;
 $clone-wars-color: rgb(217, 217, 217);
 $grey-color: #C0C0C0;
+$green-color: #5F8120;
 // Thin 100 Italic
 // Light 300
 // Light 300 Italic

src/components/directive.js

@@ -7,20 +7,22 @@ angular.module('app').directive('animateDir', function () {
     link: function (scope, elems, attrs) {
       $(document).ready(function () {
         $('.side-menu').on('mouseenter', function () {
-          console.log('this is working');
-          // $('.side-menu-container').css('width', '160px');
           $('.side-menu').css('width', '215px');
           setTimeout(function(){
           $('.menu-items').css('display','flex');
           },200);
         });
         $('.side-menu').on('mouseleave', function () {
-          console.log("it's all gone");
           $('.side-menu').css('width', '55px');
           $('.menu-items').css('display','none');
         });
         $('.top-menu').on('mouseenter', function () {
-          console.log('You have entered the twilight zone');
+          $('.top-menu').css('background-color', '#222222')
+        });
+
+        $('.top-menu').on('mouseleave', function () {
+        console.log('I left the div');
+          $('.top-menu').css('background-color', 'rgba(0,0,0,0)')
         });
 
         $('.solutions-icon').on('mouseclick', function () {

src/components/menus/menu.scss

@@ -15,6 +15,7 @@ $blue-color: #6795DE;
 $orange-color: #CF4B32;
 $clone-wars-color: rgb(217, 217, 217);
 $grey-color: #C0C0C0;
+
 .view {
   flex-direction: row;
 }
@@ -84,6 +85,6 @@ height:35px;
   position: fixed;
   top: 0px;
   right: 0px;
-  width: 150px;
+  width: 300px;
   height: 50px;
 }

src/components/training/training.html

@@ -76,6 +76,7 @@ <h2 class="font20-reg">Name of Kata</h2>
           <div class='button-div'>
             <button ng-click="testExamples()" class="test-examples-button font12-reg-blue">RUN EXAMPLES</button>
             <button ng-click="testSuite()" class="test-suite-button font12-reg-black"><i class="fa fa-caret-right fa-lg" style="margin-right: 2px" aria-hidden="true"></i>ATTEMPT</button>
+            <button ng-click="submitAnswer()" class="submit-button font12-reg-black"><i class="fa fa-caret-right fa-lg" style="margin-right: 2px" aria-hidden="true"></i>SUBMIT</button>
           </div>
         </div>
       </div>

src/components/training/training.scss

@@ -15,7 +15,7 @@ $blue-color: #6795DE;
 $orange-color: #CF4B32;
 $clone-wars-color: rgb(217, 217, 217);
 $grey-color: #C0C0C0;
-
+$green-color: #5F8120;
 
 // STUFF ALONG THE TOP
 .training-top {
@@ -127,6 +127,15 @@ hr {
   margin:15px;
 }
 
+.submit-button {
+  border: 1px solid $green-color;
+  border-radius: 4%;
+  width: 113px;
+  height: 30px;
+  background-color: $green-color;
+  margin:15px;
+}
+
 .button-div {
   display:flex;
   justify-content: right;