Right side of kata library looking pretty good.

Author: Steven-Nagie

.gitignore

@@ -4,4 +4,5 @@ config.js
 test.js
 dist/
 .DS_Store/
-src/dist/
+src/dist/
+src/notes.txt

src/assets/imgs/bookmarked_icon.png

@@ -2,12 +2,14 @@
 
 angular.module('app').controller('homeCtrl', function($scope, $state, mainService) {
 
-    $scope.getUser = () => {
-        mainService.getUser().then(response => {
-            mainService.user = response.data[0];
-            console.log(mainService.user);
-        })
-    }
+  console.log(mainService.user);
+
+    // $scope.getUser = () => {
+    //     mainService.getUser().then(response => {
+    //         mainService.user = response.data[0];
+    //         console.log(mainService.user);
+    //     })
+    // }
 
     $scope.getRandomKata = (userid) => {
         mainService.getRandomKata(userid).then(response => {
@@ -20,7 +22,7 @@ angular.module('app').controller('homeCtrl', function($scope, $state, mainServic
     // If there is a button you can link the button to $scope.getRandomKata
 
     $scope.init = () => {
-        $scope.getUser();
+        // $scope.getUser();
         $scope.getRandomKata(mainService.user.id);
     }
 

src/assets/imgs/collections_icon.png

@@ -8,7 +8,7 @@
 
     <div class="kata-list-top">
       <div class="section-selector-kata font13-reg-gray" ng-click="showLibrary()"><img id="arrow-icon-kata-list" src="./assets/imgs/arrow_icon.png"/>Library</div>
-      <div class="section-selector-kata font13-reg-gray" ng-click="showCollections()">Collections</div>
+      <div class="section-selector-kata font13-reg-gray" ng-click="showCollections()"><img id="arrow-icon-kata-list" src="./assets/imgs/collections_icon.png"/>Collections</div>
     </div>
 
       <library  ></library>

src/assets/imgs/completion_icon.png

@@ -91,21 +91,30 @@ $grey-color: #C0C0C0;
 .kata-sort-div {
   display: flex;
   flex-direction: row;
-  
+
 }
 
 .kata-list-right {
   width: 85vw;
-  background-color: blue;
 }
 
 /************* INDIVIDUAL KATA DIV *********/
 .individual-kata {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-bottom: 1px solid $grey-color;
   height: 118px;
+  border-bottom: 1px solid $selectedButton;
+}
+
+
+
+.kata-bottom-border-hr {
+  background-image: -webkit-linear-gradient(left, transparent, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.1) 80%, transparent);
+  background-image: -moz-linear-gradient(left, transparent, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.1) 80%, transparent);
+  background-image: -ms-linear-gradient(left, transparent, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.1) 80%, transparent);
+  background-image: -o-linear-gradient(left, transparent, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.1) 80%, transparent);
+  background-image: -linear-gradient(left, transparent, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.1) 80%, transparent);
 }
 
 .indv-kata-top {
@@ -118,11 +127,22 @@ $grey-color: #C0C0C0;
   margin-left: 10px;
 }
 
+#kata-name:hover {
+  color: $blue-color;
+}
+
 .kata-stats {
   display: flex;
   align-items: center;
 }
 
+.kata-stats-icon {
+  margin-top: 10px;
+  margin-left: 5px;
+  height: 10px;
+  width: 10px;
+}
+
 .kata-stats-info {
   color: $grey-color;
   margin-top: 10px;