Fix mobile layout, add contribution kind to props

app/components/proposal-list/template.hbs

@@ -1,6 +1,6 @@
 {{#each proposals as |proposal|}}
-  <li>
-    <span class="id">#{{proposal.id}}</span>
+  <li data-proposal-id={{proposal.id}}>
+    <span class="category {{proposal.kind}}">♥</span>
     <span class="amount">{{proposal.amount}}</span><span class="symbol">₭S</span>
     for <span class="recipient" title="{{proposal.recipientAddress}}">{{proposal.recipientName}}</span>
     <span class="votes">({{proposal.votesCount}}/{{proposal.votesNeeded}} votes)</span>

app/styles/_colors.scss

@@ -0,0 +1,8 @@
+$blue: #68d7fb;
+$purple: #8f68fb;
+$pink: #e068fb;
+$green: #97fb68;
+$yellow: #fbe468;
+$red: #fb6868;
+
+$primaryColor: $blue;

app/styles/app.scss

@@ -15,6 +15,7 @@
 @import "neat";
 @import "settings/breakpoints";
 @import "layout";
+@import "colors";
 
 $font-family-sans: 'Open Sans', sans-serif;
 
@@ -43,7 +44,7 @@ h1, h2, h3, h4, h5, input, button {
 section {
   h2 {
     font-size: 2.8rem;
-    color: lightblue;
+    color: $primaryColor;
     @include media($mobile) {
       font-size: 2rem;
     }
@@ -54,7 +55,7 @@ section {
       p.stats {
         padding-top: 3rem;
         font-size: 1rem;
-        color: lightblue;
+        color: white;
         text-align: center;
         span.number {
           font-weight: 600;
@@ -70,14 +71,14 @@ section {
     .actions {
       padding-top: 3rem;
       font-size: 1rem;
-      color: lightblue;
+      color: $primaryColor;
       text-align: center;
       @include media($mobile) {
         padding-top: 2rem;
       }
 
       a {
-        color: lightblue;
+        color: $primaryColor;
       }
     }
   }
@@ -87,7 +88,7 @@ button, input[type=submit] {
   display: inline-block;
   border: 1px solid rgba(22, 21, 40, 1);
   background-color: rgba(22, 21, 40, 0.6);
-  color: lightblue;
+  color: $primaryColor;
   border-radius: 3px;
   font-weight: 500;
   text-transform: uppercase;

app/styles/components/_add-contributor.scss

@@ -9,7 +9,7 @@ section#add-contributor, section#add-proposal {
         padding-top: 1rem;
         text-align: center;
         a {
-          color: lightblue;
+          color: $primaryColor;
           margin-left: 1rem;
         }
       }

app/styles/components/_contributor-list.scss

@@ -22,7 +22,7 @@ table.contributor-list {
       }
 
       a {
-        color: lightblue;
+        color: $primaryColor;
         &:hover, &:active {
           color: #fff;
         }

app/styles/components/_loading-spinner.scss

@@ -11,7 +11,7 @@
   margin-top: 12rem;
   text-align: center;
   font-size: 1.4rem;
-  color: lightblue;
+  color: $primaryColor;
 
   @include media($mobile) {
     margin-top: 6rem;
@@ -23,7 +23,7 @@
     margin-bottom: 2rem;
 
     #path-comet {
-      fill: lightblue;
+      fill: $primaryColor;
       opacity: 0.1;
 
       animation-name: pulse;

app/styles/components/_proposal-list.scss

@@ -14,9 +14,14 @@ ul.proposal-list {
       border-top: 1px solid rgba(255,255,255,0.2);
     }
 
-    .id {
-      color: lightblue;
+    .category {
+      color: $blue;
       padding-right: 0.2rem;
+      &.community { color: $red; }
+      &.dev       { color: $pink; }
+      &.design    { color: $yellow; }
+      &.docs      { color: $green; }
+      &.ops       { color: $purple; }
     }
     .amount {
       font-weight: 500;
@@ -31,7 +36,7 @@ ul.proposal-list {
     }
     .votes {
       font-size: 1rem;
-      color: lightblue;
+      color: $primaryColor;
       padding-left: 0.5rem;
     }