Minor adjustments after UX review

app/assets/stylesheets/framework/variables.scss

@@ -623,3 +623,11 @@ $perf-bar-bucket-bg: #111;
 $perf-bar-bucket-color: #ccc;
 $perf-bar-bucket-box-shadow-from: rgba($white-light, .2);
 $perf-bar-bucket-box-shadow-to: rgba($black, .25);
+
+
+/*
+Project Templates Icons
+*/
+$rails: #c00;
+$node: #353535;
+$java: #70ad51;

app/assets/stylesheets/pages/projects.scss

@@ -485,7 +485,10 @@ a.deploy-project-label {
       display: block;
       margin: 0 auto 4px;
       font-size: 24px;
-      top: 0;
+
+      @media (min-width: $screen-xs-max) {
+        top: 0;
+      }
     }
 
     @media (max-width: $screen-xs-max) {
@@ -498,15 +501,15 @@ a.deploy-project-label {
     }
 
     .icon-rails path {
-      fill: #C00;
+      fill: $rails;
     }
 
     .icon-node-express path {
-      fill: #353535;
+      fill: $node;
     }
 
     .icon-java-spring path {
-      fill: #70AD51;
+      fill: $java;
     }
 
     > div {
@@ -516,6 +519,10 @@ a.deploy-project-label {
   }
 }
 
+.project-templates-buttons .btn:last-child {
+  margin-right: 0;
+}
+
 .create-project-options {
   display: flex;
 
@@ -526,7 +533,7 @@ a.deploy-project-label {
   .first-column {
     @media(min-width: $screen-xs-min) {
       max-width: 50%;
-      width: 50%;
+      padding-right: 30px;
     }
 
     @media(max-width: $screen-xs-max) {
@@ -558,7 +565,7 @@ a.deploy-project-label {
     &::before {
       content: "OR";
       position: absolute;
-      left: 0px;
+      left: 0;
       top: 40%;
       z-index: 10;
       padding: 8px 0;
@@ -567,7 +574,7 @@ a.deploy-project-label {
       color: $gl-text-color-tertiary;
       transform: translateX(-50%);
       font-size: 12px;
-      font-weight: bold;;
+      font-weight: bold;
       line-height: 20px;
 
       // Mobile
@@ -575,7 +582,7 @@ a.deploy-project-label {
         left: 50%;
         top: 10px;
         transform: translateY(-50%);
-        padding: 0px 8px;
+        padding: 0 8px;
       }
     }