pulled out component types from behind add component button

cms/static/sass/_unit.scss

@@ -57,14 +57,10 @@
       margin: 20px 40px;
 
       &.new-component-item {
-        padding: 0;
+        padding: 20px;
         border: none;
-        border-radius: 0;
-
-        &.adding {
-          background-color: $blue;
-          border-color: #437fbf;
-        }
+        border-radius: 3px;
+        background: $lightGrey;
 
         .new-component-button {
           display: block;
@@ -88,14 +84,20 @@
         .new-component-type, .new-component-template {
           @include clearfix;
 
+          li {
+            display: inline-block;
+          }
+
           a {
             position: relative;
-            float: left;
+            display: inline-block;
             width: 100px;
             height: 100px;
             margin-right: 10px;
             margin-bottom: 10px;
             border-radius: 8px;
+            border: 1px solid $darkGreen;
+            background: $green;
             font-size: 13px;
             line-height: 14px;
             color: #fff;
@@ -104,7 +106,7 @@
             @include transition(background-color .15s);
 
             &:hover {
-              background-color: rgba(255, 255, 255, .2);
+              background: $brightGreen;
             }
 
             .name {
@@ -124,7 +126,15 @@
           }
         }
 
-        .new-component,
+        .new-component {          
+          text-align: center;
+
+          h5 {
+            color: $green;
+          }
+          
+        }
+        
         .new-component-templates {
           display: none;
           position: absolute;

cms/templates/unit.html

@@ -32,12 +32,9 @@
             % for id in components:
             <li class="component" data-id="${id}"/>
             % endfor
-            <li class="new-component-item">
-              <a href="#" class="new-component-button new-button big">
-                <span class="plus-icon"></span>New Component
-              </a>
+            <li class="new-component-item adding">              
               <div class="new-component">
-                <h5>Select Component Type</h5>
+                <h5>Add New Component</h5>
                 <ul class="new-component-type">
                   % for type in sorted(component_templates.keys()):
                   <li>
@@ -48,7 +45,6 @@
                   </li>
                   % endfor
                 </ul>
-                <a href="#" class="cancel-button">Cancel</a>
               </div>
               % for type, templates in sorted(component_templates.items()):
               <div class="new-component-templates new-component-${type}">