Basic proposal styling

app/components/proposal-list/component.js

@@ -2,4 +2,7 @@ import Ember from 'ember';
 
 export default Ember.Component.extend({
 
+  tagName: 'ul',
+  classNames: ['proposal-list']
+
 });

app/components/proposal-list/template.hbs

@@ -1,11 +1,7 @@
-<ul>
+{{#each proposals as |proposal|}}
-  {{#each proposals as |proposal|}}
   <li>
     Issue{{#if proposal.executed}}d{{/if}}
-    <span class="amount">{{proposal.amount}}</span>
+    <span class="amount">{{proposal.amount}}</span><span class="symbol">₭S</span>
-    <span class="symbol">₭S</span>
+    to <span class="recipient">{{proposal.recipientName}}</span>
-    to
-    <span class="recipient">{{proposal.recipientName}}</span>
   </li>
-  {{/each}}
+{{/each}}
-</ul>

app/styles/app.scss

@@ -70,3 +70,4 @@ section {
 @import "components/loading-spinner";
 @import "components/contributor-list";
 @import "components/add-contributor";
+@import "components/proposal-list";

app/styles/components/_contributor-list.scss

@@ -10,8 +10,8 @@ table.contributor-list {
   }
 
   td {
-    padding: 1.2rem;
+    padding: 0 1.2rem;
-    line-height: 2rem;
+    line-height: 4.2rem;
 
     background-color: rgba(255,255,255,0.1);
     &.person {

app/styles/components/_proposal-list.scss

@@ -0,0 +1,30 @@
+ul.proposal-list {
+  clear: both;
+  width: 100%;
+  list-style: none;
+
+  li {
+    // display: block;
+    padding: 0 1.2rem;
+    line-height: 4.2rem;
+    background-color: rgba(255,255,255,0.1);
+    font-size: 1.4rem;
+    border-bottom: 1px solid rgba(255,255,255,0.2);
+    &:first-of-type {
+      border-top: 1px solid rgba(255,255,255,0.2);
+    }
+
+    .amount {
+      font-weight: 500;
+    }
+    .symbol {
+      font-size: 1rem;
+      font-weight: 500;
+      padding-left: 0.2rem;
+    }
+    .recipient {
+      font-weight: 500;
+    }
+  }
+
+}