UI changes to the project view, empty project and project list new project button

app/assets/stylesheets/base/mixins.scss

@@ -93,46 +93,89 @@
   }
   h1 {
-    margin-top: 45px;
-    font-size: 2.5em;
+    font-size: 1.3em;
+    font-weight: 600;
+    margin: 24px 0 12px 0;
+    padding: 0 0 10px 0;
+    border-bottom: 1px solid #e7e9ed;
+    color: #313236;
   }
   h2 {
-    margin-top: 40px;
-    font-size: 2em;
+    font-size: 1.2em;
+    font-weight: 600;
+    margin: 24px 0 12px 0;
+    color: #313236;
   }
   h3 {
-    margin-top: 35px;
-    font-size: 1.5em;
+    margin: 24px 0 12px 0;
+    font-size: 1.25em;
   }
   h4 {
-    margin-top: 30px;
-    font-size: 1.2em;
+    margin: 24px 0 12px 0;
+    font-size: 1.1em;
+  }
+  
+  h5 {
+    margin: 24px 0 12px 0;
+    font-size: 1em;
+  }
+  
+  h6 {
+    margin: 24px 0 12px 0;
+    font-size: 0.90em;
   }
   blockquote {
-    color: #888;
+    padding: 8px 21px;
+    margin: 12px 0 12px;
+    border-left: 3px solid #e7e9ed;
+  }
+  
+  blockquote p {
+    color: #7f8fa4 !important;
     font-size: 15px;
     line-height: 1.5;
   }
-
+  
+  p {
+    color:#5c5d5e;
+    margin:6px 0 0 0;
+  }
+  
   table {
     @extend .table;
     @extend .table-bordered;
+    margin: 12px 0 12px 0;
+    color: #5c5d5e;
     th {
-      background: #EEE;
-    }
+      background: #f8fafc;
+    } 
+  }
+  
+  pre {
+    @include border-radius(2px);
+    
+    margin: 12px 0 12px 0 !important;
+    background-color: #f8fafc !important;
+    font-size: 13px !important;
+    color: #5b6169 !important;
+    line-height: 1.6em !important;
   }
   p > code {
-    font-size: inherit;
     font-weight: inherit;
   }
+
+  ul {
+    color: #5c5d5e;
+  }
+  
   li {
-    line-height: 1.5;
+    line-height: 1.6em;
   }
   a[href*="/uploads/"], a[href*="storage.googleapis.com/google-code-attachments/"] {
@@ -152,6 +195,7 @@
   }
 }
+
 @mixin str-truncated($max_width: 82%) {
   display: inline-block;
   overflow: hidden;
@@ -183,7 +227,7 @@
     &.active {
       background: #f9f9f9;
       a {
-        font-weight: bold;
+        font-weight: 600;
       }
     }
@@ -199,6 +243,11 @@
   }
 }
+.pull-right .light .fa-pencil {
+  top: 20px;
+  position: relative;
+}
+
 @mixin input-big {
   height: 36px;
   padding: 5px 10px;
@@ -250,4 +299,4 @@
       color: #78a;
     }
   }
-}
+}
\ No newline at end of file

app/assets/stylesheets/base/variables.scss

@@ -12,8 +12,8 @@ $sidebar_width: 230px;
 $avatar_radius: 50%;
 $code_font_size: 13px;
 $code_line_height: 1.5;
-$border-color: #E7E9ED;
-$background-color: #F8FAFC;
+$border-color: #dce0e6;
+$background-color: #F7F8FA;
 $header-height: 58px;
 $fixed-layout-width: 1200px;
 $gl-gray: #7f8fa4;

app/assets/stylesheets/generic/avatar.scss

@@ -28,6 +28,7 @@
   &.s48 { width: 48px; height: 48px; margin-right: 10px; }
   &.s60 { width: 60px; height: 60px; margin-right: 12px; }
   &.s90 { width: 90px; height: 90px; margin-right: 15px; }
+  &.s110 { width: 110px; height: 110px; margin-right: 15px; }
   &.s140 { width: 140px; height: 140px; margin-right: 20px; }
   &.s160 { width: 160px; height: 160px; margin-right: 20px; }
 }
@@ -42,6 +43,7 @@
   &.s32 { font-size: 22px; line-height: 32px; }
   &.s60 { font-size: 32px; line-height: 60px; }
   &.s90 { font-size: 36px; line-height: 90px; }
+  &.s110 { font-size: 40px; line-height: 112px; font-weight: 300; }
   &.s140 { font-size: 72px; line-height: 140px; }
   &.s160 { font-size: 96px; line-height: 160px; }
 }

app/assets/stylesheets/generic/typography.scss

@@ -2,11 +2,17 @@
  * Headers
  *
  */
+ 
+ body {
+  text-rendering: optimizeLegibility
+ }
+ 
 .page-title {
   margin-top: 0px;
-  line-height: 1.5;
-  font-weight: normal;
-  margin-bottom: 5px;
+  line-height: 1.3;
+  font-size: 1.25em;
+  font-weight: 600;
+  margin: 12px 7px 12px 7px;
 }
 h1, h2, h3, h4, h5, h6 {
@@ -55,6 +61,7 @@ a > code {
   @include md-typography;
   word-wrap: break-word;
+  padding: 7px;
   /* Link to current header. */
   h1, h2, h3, h4, h5, h6 {
@@ -83,9 +90,12 @@ a > code {
     }
   }
-  ul {
+  ul,ol {
     padding: 0;
-    margin: 0 0 9px 25px !important;
+    margin: 6px 0 6px 18px !important;
+  }
+  ol {
+    color: #5c5d5e;
   }
 }
@@ -111,4 +121,4 @@ textarea.js-gfm-input {
 .strikethrough {
   text-decoration: line-through;
-}
+}
\ No newline at end of file

app/assets/stylesheets/pages/projects.scss

@@ -19,10 +19,10 @@
   background: #f7f8fa;
   margin: -$gl-padding;
   padding: $gl-padding;
-  padding-top: 40px;
+  padding: 44px 0 17px 0;
   .project-identicon-holder {
-    margin-bottom: 15px;
+    margin-bottom: 16px;
     .avatar, .identicon {
       margin: 0 auto;
@@ -40,23 +40,26 @@
   .project-home-desc {
     h1 {
+      color: #313236;
       margin: 0;
-      margin-bottom: 10px;
+      margin-bottom: 6px;
       font-size: 23px;
       font-weight: normal;
     }
     p {
-      color: #7f8fa4;
+      color: #5c5d5e;
     }
   }
   .git-clone-holder {
-    max-width: 600px;
-    margin: 20px auto;
+    max-width: 498px;
     .form-control {
       background: #FFF;
+      font-size: 14px;
+      height: 42px;
+      margin-left: -2px;
     }
   }
@@ -66,30 +69,66 @@
       color: inherit;
     }
   }
-
+  .input-group {
+    display: inline-table;
+    position: relative;
+    top: 17px;
+    margin-bottom: 44px;
+  }
   .project-repo-buttons {
-    margin-top: $gl-padding;
-    margin-bottom: 25px;
+    margin-top: 12px;
+    margin-bottom: 0px;
     .btn {
       @extend .btn-info;
-
+      @include border-radius(2px);
+      
+      background-color: #f0f2f5;
+      border: 1px solid #dce0e5;
       text-transform: uppercase;
-      font-size: 15px;
-      line-height: 20px;
-      padding: 8px 14px;
-      border-radius: 3px;
-      margin-left: 10px;
+      color: #313236;
+      font-size: 13px;
+      font-weight: 600;
+      line-height: 18px;
+      padding: 11px 16px;
+      margin-left: 12px;
+
+      &:hover {
+        @include border-radius(2px);
+        color: #313236;
+        border: 1px solid #dce0e5;
+        background-color: #ebeef2;
+      }
+    
+      &:focus {
+        @include border-radius(2px);
+        color: #313236;
+        border: 1px solid #dce0e5;
+        background-color: #ebeef2;
+      }
+    
+      &:active {
+        @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
+        color: #313236 !important;
+        border: 1px solid #c6cacf !important;
+	      background-color: #e4e7ed !important;
+      }
       .count {
-        padding-left: 7px;
         display: inline-block;
-        margin-left: 7px;
       }
     }
   }
 }
+.split-one {
+  display: inline-table;
+  
+  a {
+    margin: -1px !important;
+  }
+}
+
 .git-clone-holder {
   .project-home-dropdown + & {
     margin-right: 45px;
@@ -103,7 +142,7 @@
   }
   .input-group-addon {
-    background: #FAFAFA;
+    background: #f7f8fa;
     &.git-protocols {
       padding: 0;
@@ -111,11 +150,157 @@
       .input-group-btn:last-child > .btn {
         @include border-radius-right(0);
+        
+        border-left: 1px solid #c6cacf;
+        margin-left: -2px !important;
+      }
+      input-group-btn:first-child > .btn {
+        @include border-radius-left(0);
       }
     }
   }
 }
+.projects-search-form {
+  
+  .input-group .btn-success {
+    background-color: #2ebf6b !important;
+    border: 1px solid #28b061 !important;
+    color: #fff !important;
+    
+     &:hover {
+       background-color: #2eb867 !important;
+     }
+     
+     &:focus {
+       background-color: #2eb867 !important;
+     }
+     
+     &:active {
+       @include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12));
+        
+       background-color: #28b061 !important;
+       border: 1px solid #26a65c !important;
+       color: #fff !important;
+     } 
+  }
+  
+  .input-group .form-control {
+    height: 39px !important;
+  }
+    
+}
+
+.input-group-btn > .btn {
+  background-color: #f0f2f5;
+  border: 1px solid #dce0e5;
+  text-transform: uppercase;
+  color: #313236;
+  font-size: 13px;
+  font-weight: 600;
+  
+  &:focus {
+    outline: none;
+    color: #313236;
+    border: 1px solid #dce0e5;
+    background-color: #ebeef2;
+  }
+  
+  &:hover {
+    outline: none;
+    color: #313236;
+    border: 1px solid #dce0e5;
+    background-color: #ebeef2;
+  }
+  
+  &:active {
+    @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
+    
+    color: #313236 !important;
+    border: 1px solid #c6cacf !important;
+    background-color: #e4e7ed !important;
+  }
+
+}
+
+.input-group-btn > .btn.active {
+  @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
+  
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+  color: #313236 !important;
+  border: 1px solid #c6cacf !important;
+  background-color: #e4e7ed !important;
+}
+
+.split-repo-buttons {
+  display: inline-table;
+  margin-left: 12px;
+  
+  .btn {
+    margin: 0 !important;
+  }
+  
+  .dropdown {
+    margin: 0 !important;
+  }
+  
+  .dropdown-toggle  {
+    margin: -5px !important;
+  }  
+}
+
+#notification-form {
+  margin-left: 5px;
+}
+
+.open > .dropdown-toggle.btn {
+  @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
+ 
+  border: 1px solid #c6cacf !important;
+  background-color: #e4e7ed !important;
+  text-transform: uppercase;
+  color: #313236;
+  font-size: 13px;
+  font-weight: 600;
+  color: #313236 !important;
+}
+
+.dropdown-menu {
+  @include box-shadow(rgba(76, 86, 103, 0.247059) 0px 0px 1px 0px, rgba(31, 37, 50, 0.317647) 0px 2px 18px 0px);
+  @include border-radius (0px);
+   
+  border: none;
+  padding: 16px 0;
+  font-size: 14px;
+  font-weight: 100;
+  
+  li a {
+    color: #5f697a;
+    line-height: 30px;
+    
+    &:hover {
+      background-color: #3084bb !important; 
+    }
+  }
+  
+  .fa-fw {
+    margin-right: 8px;
+  }
+}
+
+.fa-bell {
+  margin-right: 6px;
+}
+
+.fa-angle-down {
+  margin-left: 6px;
+}
+
+.project-home-panel .project-home-dropdown {
+    margin: 13px 0px 0;
+}
+
 .project-visibility-level-holder {
   .radio {
     margin-bottom: 10px;
@@ -232,15 +417,48 @@ table.table.protected-branches-list tr.no-border {
 .project-stats {
   text-align: center;
-  margin-top: 0;
+  margin-top: 15px;
   margin-bottom: 0;
-  padding-top: 5px;
-  padding-bottom: 0;
+  padding-top: 10px;
+  padding-bottom: 4px;
   ul.nav-pills {
     display:inline-block;
   }
+  
+  .nav-pills li {
+    display:inline;
+  }
+  .nav > li > a {
+    border: 1px solid transparent;
+    color: #313236;
+    font-size: 13px;
+    font-weight: 600;
+    text-decoration: none;
+    text-transform: uppercase;
+    margin: 0 8px 0 0;
+    padding: 10px 16px 10px 16px;
+    
+    &:hover {
+      @include border-radius(2px);
+      border: 1px solid #dce0e5;
+      background-color: #f0f2f5;
+    }
+    
+    &:focus {
+      @include border-radius(2px);
+      border: 1px solid #dce0e5;
+      background-color: #f0f2f5;
+    }
+    
+    &:active {
+       @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
+      border: 1px solid #c6cacf;
+	    background-color: #e4e7ed;
+   }
+  }
+  
   li {
     display:inline;
   }
@@ -251,11 +469,11 @@ table.table.protected-branches-list tr.no-border {
   }
   li.missing a {
-    color: #bbb;
-    border: 1px dashed #ccc;
+    color: #5a6069;
+    border: 1px dashed #dce0e5;
     &:hover {
-      background-color: #FAFAFA;
+      background-color: #f0f2f5;
     }
   }
 }
@@ -273,6 +491,36 @@ pre.light-well {
   border-bottom: 1px solid #e7e9ed;
 }
+.git-empty {
+  margin: 0 7px 0 7px;
+  
+  h5 {
+    color: #5c5d5e;
+  }
+  
+  .light-well {
+    @include border-radius (2px);
+    
+    color: #5b6169 !important;
+    font-size: 13px !important;
+    line-height: 1.6em !important;
+  }
+}
+
+.prepend-top-20 {
+  margin: 20px 8px 20px 8px;
+  
+  .btn-remove {
+    @include border-radius (2px);
+    
+    font-size: 13px;
+    font-weight: 600px;
+    text-transform: uppercase;
+    float: left !important;
+    margin-bottom: 14px;
+  }
+}
+
 /*
  * Projects list rendered on dashboard and user page
  */

app/views/projects/_home_panel.html.haml

@@ -16,18 +16,19 @@
   .project-repo-buttons
-    = render 'projects/buttons/star'
-
-    - unless empty_repo
-      = render 'projects/buttons/fork'
-
-      - if can? current_user, :download_code, @project
-        = link_to archive_namespace_project_repository_path(@project.namespace, @project, ref: @ref, format: 'zip'), class: 'btn', rel: 'nofollow' do
-          = icon('download fw')
-          Download
-
+    .split-one
+      = render 'projects/buttons/star'
+
+      - unless empty_repo
+        = render 'projects/buttons/fork'
+    
+    = render "shared/clone_panel"
+    .split-repo-buttons 
+      - unless empty_repo
+        - if can? current_user, :download_code, @project
+          = link_to archive_namespace_project_repository_path(@project.namespace, @project, ref: @ref, format: 'zip'), class: 'btn', rel: 'nofollow' do
+            = icon('download fw')
+            
+      = render 'projects/buttons/dropdown'
     = render 'projects/buttons/notifications'
-
-    = render 'projects/buttons/dropdown'
-
-  = render "shared/clone_panel"
+    

app/views/projects/buttons/_fork.html.haml

@@ -8,6 +8,5 @@
   - else
     = link_to new_namespace_project_fork_path(@project.namespace, @project), title: "Fork project", class: 'btn' do
       = icon('code-fork fw')
-      Fork
       %span.count
         = @project.forks_count

app/views/projects/buttons/_star.html.haml

 - if current_user
   = link_to toggle_star_namespace_project_path(@project.namespace, @project), class: 'btn star-btn toggle-star', method: :post, remote: true do
     = icon('star fw')
-    - if current_user.starred?(@project)
-      Unstar
-    - else
-      Star
     %span.count
       = @project.star_count
@@ -17,6 +13,5 @@
 - else
   = link_to new_user_session_path, class: 'btn has_tooltip star-btn', title: 'You must sign in to star a project' do
     = icon('star fw')
-    Star
     %span.count
       = @project.star_count

app/views/shared/_clone_panel.html.haml

@@ -24,4 +24,4 @@
     .input-group-addon
       .visibility-level-label.has_tooltip{'data-title' => "#{visibility_level_label(project.visibility_level)} project" }
         = visibility_level_icon(project.visibility_level)
-        = visibility_level_label(project.visibility_level).downcase
+