Merge pull request CodewarsClone#64 from CodewarsClone/Thurs22.2

Thurs22.2

Author: Jon Myrick

.DS_Store

@@ -31,12 +31,13 @@ height:35px;
 
 .side-menu {
   background-color: $sidebar-color;
-  height: 100%;
+  height: 100vh;
   width: 55px;
   padding: 5px;
   float: left;
   position: fixed;
   left: 0;
+  top: 0;
   transition: width 0.5s;
   z-index: 99;
 }

src/.DS_Store

@@ -4,31 +4,30 @@
       <div class="kata-name-container">
         <div class="kata-name-container-top">
           <img src="./assets/imgs/5_kyu_icon.png" alt="Difficulty" id="difficulty-icon">
-          <h3 class="font16-reg" id="kata-name">
-            Name of Kata
-          </h3>
+          <div class="font16-reg" id="kata-name">
+            {{name}}
+          </div>
         </div>
         <div class="kata-stats">
-          <p>Here's where stats go</p>
-          <p>Here's where stats go</p>
-          <p>Here's where stats go</p>
         </div>
       </div>
       <!--End kata-name-container div-->
       <div class="selection-div">
-        <select class="language-select-dropdown select-dropdown" ng-init="selectedLanguage = languages[0]" ng-model="selectedLanguage"
+        <div class='select-dropdown'>
+        <select class="language-select-dropdown " ng-init="selectedLanguage = languages[0]" ng-model="selectedLanguage"
           ng-options="x for x in languages">
-
         </select>
-        <select class="language-version-select-dropdown select-dropdown" ng-init="selectedVersion = versions[0]" ng-model="selectedVersion" ng-options="x for x in versions">
-
+        </div>
+        <div class='select-dropdown'>
+        <select class="language-version-select-dropdown" ng-init="selectedVersion = versions[0]" ng-model="selectedVersion" ng-options="x for x in versions">
         </select>
-      </div>
+        </div>
       <div class="assorted-options">
         <div class="view-options">Here's where view options go</div>
         <div class="view-options">Here's where view options go</div>
         <div class="view-options">Here's where view options go</div>
       </div>
+      </div>
     </div>
     <div class="kata">
       <!-- <div class="instructions">

src/assets/.DS_Store

@@ -19,24 +19,23 @@ $green-color: #5F8120;
 
 // STUFF ALONG THE TOP
 .training-top {
-  background-color: green;
-  height: 100px;
+  height: 60px;
   margin-top: 50px;
   display: flex;
   justify-content: space-between;;
   align-items: center;
+  padding: 15px;
 }
 
 .kata-name-container {
-  background-color: blue;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  align-items: center;
+  align-items: left;
+  width: 40vw;
 }
 
 .kata-name-container-top {
-  background-color: blue;
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -60,6 +59,22 @@ $green-color: #5F8120;
   height: 30px;
   width: 50px;
   margin-right: 5px;
+
+}
+
+.select-dropdown {
+  height: 52px;
+  width: 175px;
+  background-color: $button1;
+  flex-direction: row;
+  margin: 7.5px;
+}
+
+.selection-div {
+  display: flex;
+  justify-content: space-around;
+  flex-direction: row;
+  width: 60vw;
 }