From 39a506cf9f6e2d3c8c0bde01e7695a78bb2ea6d8 Mon Sep 17 00:00:00 2001
From: Rachel Kim <rayykim323@gmail.com>
Date: Thu, 4 Aug 2016 13:37:58 -0700
Subject: [PATCH 1/4] little change in add new modal

---
 .../assets/src/vue/user-create-modal.vue      | 23 +++++++++++++++----
 src/kolibri                                   |  1 +
 2 files changed, 19 insertions(+), 5 deletions(-)
 create mode 160000 src/kolibri

diff --git a/kolibri/plugins/management/assets/src/vue/user-create-modal.vue b/kolibri/plugins/management/assets/src/vue/user-create-modal.vue
index 62ff130543c..2783a9e4e09 100644
--- a/kolibri/plugins/management/assets/src/vue/user-create-modal.vue
+++ b/kolibri/plugins/management/assets/src/vue/user-create-modal.vue
@@ -2,12 +2,24 @@
 
   <div class="user-creation-modal">
     <modal btntext="Add New">
-      <div class="title" slot="header">User creation</div>
+      <div class="title" slot="header">Add New Account</div>
       <div slot="body">
-        <br>Username: <input type="text" v-model="username" placeholder="Please type in your username."><br>
-        <br>Password: <input type="text" v-model="password" placeholder="Please type in your password."><br>
-        <br>First name: <input type="text" v-model="firstName" placeholder="Please type in your first name."><br>
-        <br>Last name: <input type="text" v-model="lastName" placeholder="Please type in your last name."><br>
+        <div class="name">
+          <label for="name">Name</label>
+          <input type="text" v-model="username" placeholder="Please type in your username.">
+        </div>
+        <div class="username">
+          <label>Username</label>
+          <input type="text" v-model="password" placeholder="Please type in your password.">
+        </div>
+        <div class="password">
+          <label>Password</label>
+          <input type="text" v-model="firstName" placeholder="Please type in your first name.">
+        </div>
+        <div class="confirm">
+          <label>Confirm Password</label>
+          <input type="text" v-model="lastName" placeholder="Please type in your last name.">
+        </div>
         <!-- radio buttons for selecting role -->
         <br>Learner <input type="radio" value="learner" v-model="role"><br>
         <br>Admin <input type="radio" value="admin" v-model="role"><br>
@@ -96,6 +108,7 @@
   .add-text
     float: left
     padding-top: 6px
+    
 
 </style>
 
diff --git a/src/kolibri b/src/kolibri
new file mode 160000
index 00000000000..e2464dd3ebd
--- /dev/null
+++ b/src/kolibri
@@ -0,0 +1 @@
+Subproject commit e2464dd3ebdb9109ee1db8e8c9097bede2d9d69b

From f8110c82f86a8fdf04c3d31ce517e34c3f9d78ed Mon Sep 17 00:00:00 2001
From: Rachel Kim <rayykim323@gmail.com>
Date: Thu, 4 Aug 2016 15:13:52 -0700
Subject: [PATCH 2/4] search bar icon

---
 .../management/assets/src/vue/user-roster.vue    | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/kolibri/plugins/management/assets/src/vue/user-roster.vue b/kolibri/plugins/management/assets/src/vue/user-roster.vue
index eb892b4199e..8c1fd5291bc 100644
--- a/kolibri/plugins/management/assets/src/vue/user-roster.vue
+++ b/kolibri/plugins/management/assets/src/vue/user-roster.vue
@@ -18,9 +18,10 @@
         <option value="learner"> Learners </option>
       </select>
 
-
-      <input v-model="searchFilter" type="search">
-      <svg class="search-button" src="./icons/search.svg"></svg>
+      <div class="searchbar">
+        <input v-model="searchFilter" type="search">
+        <svg class="search-button" src="./icons/search.svg"></svg>
+      </div>
 
       <div class="create">
         <user-create-modal></user-create-modal>
@@ -185,8 +186,8 @@
     border-radius: 10px
     padding: inherit
     border: 1px solid #686868
-
-
+    outline: none
+    line-height: appear
   select[name='user-filter']
     float: left
 
@@ -232,5 +233,10 @@
   .search-button
     width: 20px
     height: 20px
+    
+  .searchbar .search-button
+    position: relative
+    right: 390px
+    top: 3px
 
 </style>

From 01296cf983b6bdb898dae52c6f326dbe6f0cee6c Mon Sep 17 00:00:00 2001
From: Rachel Kim <rayykim323@gmail.com>
Date: Thu, 4 Aug 2016 17:13:16 -0700
Subject: [PATCH 3/4] still working on search

---
 .../management/assets/src/vue/user-roster.vue | 37 ++++++++++++-------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/kolibri/plugins/management/assets/src/vue/user-roster.vue b/kolibri/plugins/management/assets/src/vue/user-roster.vue
index cd850017ef7..a35f763faea 100644
--- a/kolibri/plugins/management/assets/src/vue/user-roster.vue
+++ b/kolibri/plugins/management/assets/src/vue/user-roster.vue
@@ -19,8 +19,8 @@
       </select>
 
       <div class="searchbar">
-        <input v-model="searchFilter" type="search">
         <svg class="search-button" src="./icons/search.svg"></svg>
+        <input v-model="searchFilter" type="search">
       </div>
 
       <div class="create">
@@ -185,15 +185,11 @@
     float: right
 
   input[type='search']
-    float: left
-    margin: 0 0 10px 10px
-    width: 400px
-    height: 25px
-    border-radius: 10px
-    padding: inherit
-    border: 1px solid #686868
-    outline: none
-    line-height: appear
+    width: 372px
+    // border-radius: 10px
+    // padding: inherit
+    // border: 1px solid #686868
+
   select[name='user-filter']
     float: left
 
@@ -239,10 +235,25 @@
   .search-button
     width: 20px
     height: 20px
-    
+
   .searchbar .search-button
+    display: inline-block
+    float: left
+
+  .searchbar:after
+    content: ''
+    display: table
+    clear: both
+    // position: relative
+    // right: 390px
+    // top: 3px
+
+  .searchbar
+    border-radius: 10px
+    padding: inherit
+    border: 1px solid #686868
+    width: 400px
+    float: left
     position: relative
-    right: 390px
-    top: 3px
 
 </style>

From 18dd79a60710c3d2f13096ccfed1d00825075394 Mon Sep 17 00:00:00 2001
From: Rachel Kim <rayykim323@gmail.com>
Date: Fri, 5 Aug 2016 14:00:34 -0700
Subject: [PATCH 4/4] search

---
 .../management/assets/src/vue/user-roster.vue | 39 ++++++++++++-------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/kolibri/plugins/management/assets/src/vue/user-roster.vue b/kolibri/plugins/management/assets/src/vue/user-roster.vue
index a35f763faea..052b802a94d 100644
--- a/kolibri/plugins/management/assets/src/vue/user-roster.vue
+++ b/kolibri/plugins/management/assets/src/vue/user-roster.vue
@@ -18,10 +18,10 @@
         <option value="learner"> Learners </option>
       </select>
 
-      <div class="searchbar">
-        <svg class="search-button" src="./icons/search.svg"></svg>
-        <input v-model="searchFilter" type="search">
-      </div>
+      <input
+        v-model="searchFilter"
+        type="search"
+        placeholder="Search for a user...">
 
       <div class="create">
         <user-create-modal></user-create-modal>
@@ -29,7 +29,6 @@
 
     </div>
 
-
     <hr>
 
     <table class="roster">
@@ -185,10 +184,18 @@
     float: right
 
   input[type='search']
-    width: 372px
-    // border-radius: 10px
-    // padding: inherit
-    // border: 1px solid #686868
+    display: inline-block
+    border: 1px solid #ccc
+    box-shadow: inset 0 1px 3px #ddd
+    border-radius: 2em
+    padding: 0.5em 1em
+    vertical-align: middle
+    box-sizing: border-box
+    position: relative
+    left: 10px
+    &:focus
+      outline: none
+      border-color: $core-text-annotation
 
   select[name='user-filter']
     float: left
@@ -239,21 +246,25 @@
   .searchbar .search-button
     display: inline-block
     float: left
+    position: relative
+    left: 5px
+    top: 1px
 
   .searchbar:after
     content: ''
     display: table
     clear: both
-    // position: relative
-    // right: 390px
-    // top: 3px
 
   .searchbar
-    border-radius: 10px
+    border-radius: 5px
     padding: inherit
     border: 1px solid #686868
-    width: 400px
+    width: 40%
+    min-width: 200px
+    max-width: 300px
+    height: 25px
     float: left
     position: relative
+    left: 10px
 
 </style>