Replace styles on new-user form

app/components/click-choice-buttons.js

@@ -3,6 +3,7 @@ import Ember from 'ember';
 const { $, Component, on } = Ember;
 
 export default Component.extend({
+  classNames: ['click-choice-buttons'],
   firstChoicePicked: true,
 
   buttonContent1: null,

app/components/new-user.js

@@ -58,5 +58,5 @@ const Validations = buildValidations({
 });
 
 export default Component.extend(NewUser, Validations, {
-
+  classNames: ['new-user'],
 });

app/styles/_variables.scss

@@ -74,6 +74,7 @@ $base-link-color: $base-accent-color;
 $hover-link-color: darken($base-accent-color, 15);
 
 // Neat Breakpoints
+$small-screen: em(320);
 $medium-screen: em(640);
 $large-screen: em(860);
 $giant-screen: em(1480);

app/styles/app.scss

@@ -60,4 +60,6 @@
 @import 'components/school-manager';
 @import 'components/assign-students';
 @import 'components/pre-fill';
+@import 'mixins';
+@import 'newcomponents';
 @import 'layout/layout';

app/styles/components/_global.scss

@@ -307,29 +307,6 @@ select:hover {
   width: 1px;
 }
 
-//scrollbar style */
-::-webkit-scrollbar {
-  width: 9px;
-}
-
-::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, .02);
-  border-radius: 5px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, .2);
-  border-radius: 5px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, .4);
-}
-
-::-webkit-scrollbar-thumb:window-inactive {
-  background: rgba(0, 0, 0, .05);
-}
-
 .list-reset {
   ul {
     list-style-position: inside;

app/styles/mixins.scss

@@ -0,0 +1 @@
+@import 'mixins/ilios-form';

app/styles/mixins/ilios-form.scss

@@ -0,0 +1,53 @@
+@mixin ilios-form () {
+  label {
+    @include fill-parent;
+    display: block;
+    font-weight: bold;
+    margin-top: 1em;
+  }
+
+  input[type=text],
+  input[type=password],
+  select {
+    @include fill-parent;
+    background-position: right 4px bottom .75em;
+    height: 2.5em;
+  }
+
+  input {
+    @include fill-parent;
+    background: $white;
+    border: 1px solid $input-box-grey;
+    border-radius: $base-border-radius;
+  }
+}
+
+@mixin ilios-form-item () {
+  @include fill-parent;
+  height: 6em;
+
+  @include media($large-screen) {
+    @include span-columns(4);
+  }
+
+}
+
+@mixin ilios-form-last-item () {
+  @include fill-parent;
+
+  @include media($large-screen) {
+    @include span-columns(8);
+  }
+}
+
+@mixin ilios-form-buttons () {
+  @include fill-parent;
+  clear: both;
+  margin-top: 2em;
+  padding: 1em 0;
+
+  button {
+    margin-right: 1em;
+  }
+
+}

app/styles/newcomponents.scss

@@ -0,0 +1 @@
+@import 'newcomponents/new-user';

app/styles/newcomponents/new-user.scss

@@ -0,0 +1,27 @@
+.new-user {
+  .new-user-form {
+    @include ilios-form;
+    @include fill-parent;
+    display: block;
+
+    .click-choice-buttons {
+      @include fill-parent;
+      @include clearfix;
+      display: block;
+      margin-bottom: .5em;
+      min-height: 1em;
+    }
+
+    .item {
+      @include ilios-form-item;
+
+      &.last {
+        @include ilios-form-last-item;
+      }
+    }
+
+    .buttons {
+      @include ilios-form-buttons;
+    }
+  }
+}

app/templates/components/new-directory-user.hbs

@@ -128,9 +128,9 @@
   <div id='new-directory-user-search-tools'>
     {{one-way-input
       value=searchTerms
-      update=(action attrs.setSearchTerms)
+      update=this.attrs.setSearchTerms
       onenter=(action "findUsersInDirectory")
-      onescape=(action attrs.setSearchTerms '')
+      onescape=(action this.attrs.setSearchTerms '')
     }}
     <button type='search' {{action 'findUsersInDirectory'}}>{{t 'user.searchDirectory'}}</button>
   </div>