From cbb15f4d6f61534f3eff6e86da35c3315ddcdc91 Mon Sep 17 00:00:00 2001
From: Sebastian Kippe <sebastian@kip.pe>
Date: Wed, 7 Jun 2017 12:46:03 +0200
Subject: [PATCH] Fix mobile layout, add contribution kind to props

---
 app/components/proposal-list/template.hbs    |  4 ++--
 app/styles/_colors.scss                      |  8 ++++++++
 app/styles/app.scss                          | 11 ++++++-----
 app/styles/components/_add-contributor.scss  |  2 +-
 app/styles/components/_contributor-list.scss |  2 +-
 app/styles/components/_loading-spinner.scss  |  4 ++--
 app/styles/components/_proposal-list.scss    | 11 ++++++++---
 7 files changed, 28 insertions(+), 14 deletions(-)
 create mode 100644 app/styles/_colors.scss

diff --git a/app/components/proposal-list/template.hbs b/app/components/proposal-list/template.hbs
index a41518f..ba22f18 100644
--- a/app/components/proposal-list/template.hbs
+++ b/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>
diff --git a/app/styles/_colors.scss b/app/styles/_colors.scss
new file mode 100644
index 0000000..9578f1d
--- /dev/null
+++ b/app/styles/_colors.scss
@@ -0,0 +1,8 @@
+$blue: #68d7fb;
+$purple: #8f68fb;
+$pink: #e068fb;
+$green: #97fb68;
+$yellow: #fbe468;
+$red: #fb6868;
+
+$primaryColor: $blue;
diff --git a/app/styles/app.scss b/app/styles/app.scss
index bac84aa..afca809 100644
--- a/app/styles/app.scss
+++ b/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;
diff --git a/app/styles/components/_add-contributor.scss b/app/styles/components/_add-contributor.scss
index 6e5fe5a..379b91e 100644
--- a/app/styles/components/_add-contributor.scss
+++ b/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;
         }
       }
diff --git a/app/styles/components/_contributor-list.scss b/app/styles/components/_contributor-list.scss
index 49e24f9..4e9158f 100644
--- a/app/styles/components/_contributor-list.scss
+++ b/app/styles/components/_contributor-list.scss
@@ -22,7 +22,7 @@ table.contributor-list {
       }
 
       a {
-        color: lightblue;
+        color: $primaryColor;
         &:hover, &:active {
           color: #fff;
         }
diff --git a/app/styles/components/_loading-spinner.scss b/app/styles/components/_loading-spinner.scss
index 17ed468..6ba4057 100644
--- a/app/styles/components/_loading-spinner.scss
+++ b/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;
diff --git a/app/styles/components/_proposal-list.scss b/app/styles/components/_proposal-list.scss
index 72e231e..a35f17c 100644
--- a/app/styles/components/_proposal-list.scss
+++ b/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;
     }