Some small styling fixes for skills lists

app/styles/_buttons.scss

@@ -56,6 +56,17 @@
   &.large {
     font-size: $body-font-size-large;
     padding: 15px 40px;
+
+    &.skill {
+      padding: 8px 14px;
+    }
+  }
+
+  &.normal {
+    &.skill {
+      font-size: $body-font-size-normal;
+      padding: 8px 11px;
+    }
   }
 
   &.on-solid {
@@ -86,8 +97,8 @@
     padding: 6px 14px;
 
     &.skill {
-      padding: 6px 9px;
-      font-size: $body-font-size-normal;
+      padding: 4px 6px;
+      font-size: $body-font-size-small;
     }
   }
 
@@ -133,7 +144,7 @@
       vertical-align: middle;
       width: 18px;
 
-      &.small {
+      &.normal, &.small {
         height: 10px;
         width: 12px;
 
@@ -153,7 +164,7 @@
 
     &.x-mark {
       @include sprite($x-mark);
-      &.small {
+      &.normal, &.small {
         @include sprite($x-mark-small);
       }
     }

app/styles/components/project-skills-list.scss

@@ -1,30 +1,31 @@
 .project-skills-list {
   $color: $gray--dark;
+  font-size: $body-font-size-small;
 
   &__header {
-    text-align: center;
+    margin-bottom: 0.6em;
     position: relative;
+    text-align: center;
     overflow: hidden;
     width: 100%;
-    margin-bottom: 1em;
 
     span {
+      color: $color;
       display: inline-block;
-      vertical-align: baseline;
-      zoom: 1;
       *display: inline;
-      *vertical-align: auto;
-      position: relative;
       padding: 0 1em;
-      color: $color;
+      position: relative;
+      vertical-align: baseline;
+      *vertical-align: auto;
+      zoom: 1;
 
       &:before, &:after {
+        border-top: 1px solid $color;
         content: '';
         display: block;
-        width: 1000px;
         position: absolute;
         top: 0.73em;
-        border-top: 1px solid $color;
+        width: 1000px;
       }
 
       &:before { right: 100%; }

app/styles/components/skills-list.scss

@@ -9,3 +9,9 @@
     }
   }
 }
+
+.task-skills-list {
+  .skill {
+    margin-bottom: 5px;
+  }
+}

app/styles/components/skills-typeahead.scss

@@ -1,24 +1,16 @@
 .skills-typeahead-container {
-  @include span-columns(12);
-
-  margin-top: 15px;
-  margin-bottom: 30px;
-}
-
-.skills-typeahead-area {
-
+  margin: 0.6em 0;
 }
 
 .skills-typeahead {
   &--centered {
-    margin: 0 auto;    
+    margin: 0 auto;
   }
 
   position: relative;
-  width: 400px;
 
   input {
-    min-width: 400px;
+    width: 100%;
   }
 
   .dropdown-menu {

app/styles/templates/project/tasks/task.scss

@@ -10,3 +10,13 @@
 .task-sidebar {
   @include span-columns(3);
 }
+
+.task-sidebar-section {
+  &__header {
+    h2 {
+      color: $text--dark;
+      font-size: 16px;
+      font-weight: 600;
+    }
+  }
+}

app/styles/templates/start/skills.scss

@@ -4,16 +4,32 @@
   flex-direction: column;
   //justify-content: center;
   margin-bottom: 2em;
+
+  @include shift(3.5);
+  @include span-columns(5);
+
+  @include media($lg-screen) {
+    @include shift(2);
+    @include span-columns(8);
+  }
+
+  @include media($md-screen) {
+    @include shift(0);
+    @include span-columns(12);
+  }
 }
 
 .skills__list {
   text-align: center;
+
   button {
-    margin: 0 .5em 1em 0;
+    margin: 0 5px 5px 0;
   }
+
   div {
     display: inline-block;
   }
+
   p {
     color: $text--lightest;
     font-style: italic;

app/templates/components/project-details.hbs

@@ -26,7 +26,7 @@
         <button class="clear small" disabled>Request sent</button>
       {{/if}}
     {{else}}
-      {{link-to "Sign up" "signup" class="button default small"}} to join this project.
+      {{link-to "Join project" "signup" class="button default small"}}
     {{/if}}
   {{/if}}
 </aside>

app/templates/components/project-skills-list.hbs

@@ -7,6 +7,6 @@
   {{project-skill-item skill=skill onClicked=onSkillClicked}}
 {{else}}
   <div class="project-skills-list__fallback">
-    There are no more project skills to be added.
+    You've added all the project's skills.
   </div>
 {{/each}}

app/templates/components/skills-typeahead.hbs

@@ -3,7 +3,7 @@
   focus-in="focus"
   focus-out="blur"
   getKeyDown=(action "getKeyDown")
-  placeholder="Start typing a skill, like Ruby or PhotoShop"
+  placeholder="Search skills"
   value=query
 }}
 

app/templates/components/task-new-form.hbs

@@ -18,6 +18,6 @@
     {{/each}}
   </div>
   <div class="input-group">
-    <input tabindex="4" class="button right" name="submit" type="submit" value="Submit new task" {{action save}} />
+    <input tabindex="4" class="button default right" name="submit" type="submit" value="Submit new task" {{action save}} />
   </div>
 </div>

app/templates/project/settings/profile.hbs

@@ -15,7 +15,7 @@
       iconBefore=false
       isLoading=projectSkill.isLoading
       remove=(action removeProjectSkill projectSkill)
-      size="small"
+      size="normal"
       skill=projectSkill.skill
     }}
   {{/each}}

tests/acceptance/project-test.js

@@ -81,7 +81,7 @@ test('A user can join the organization of the project', function(assert) {
   visit(projectURL);
 
   andThen(() => {
-    assert.equal(projectTasksIndexPage.projectDetails.signUpLink.text, 'Sign up', 'The link to sign up is present when logged out');
+    assert.equal(projectTasksIndexPage.projectDetails.signUpLink.text, 'Join project', 'The link to the sign up page is present when logged out');
 
     authenticateSession(this.application, { user_id: user.id });
     visit(projectURL);