Style reimbursement list items

app/styles/_item-list.scss

@@ -2,9 +2,10 @@ ul.item-list {
   list-style: none;
 
   li {
+    padding: 0.8rem 1.2rem;
+    font-size: 1.2rem;
     background-color: $item-background-color;
     border-bottom: 1px solid $item-border-color;
-    font-size: 1.2rem;
 
     &:first-of-type {
       border-top: 1px solid $item-border-color;

app/styles/app.scss

@@ -91,12 +91,13 @@ section {
 @import "sugar";
 @import "item-list";
 
-@import "components/contribution-list";
 @import "components/contribution-details";
+@import "components/contribution-list";
 @import "components/contributor-list";
 @import "components/contributor-profile";
 @import "components/external-account-link";
 @import "components/loading-spinner";
+@import "components/reimbursement-list";
 @import "components/topbar";
 @import "components/topbar-account-panel";
 @import "components/user-avatar";

app/styles/components/_contribution-list.scss

@@ -24,13 +24,11 @@ main section {
 ul.contribution-list {
   clear: both;
   width: 100%;
-  list-style: none;
 
   li {
     display: grid;
     grid-template-columns: auto 5rem 5rem;
     grid-row-gap: 0.5rem;
-    padding: 0.8rem 1.2rem;
     cursor: pointer;
 
     &.confirmed {

app/styles/components/_reimbursement-list.scss

@@ -0,0 +1,52 @@
+ul.reimbursement-list {
+  width: 100%;
+
+  li {
+    display: grid;
+    grid-template-columns: auto auto;
+    grid-row-gap: 0.5rem;
+    padding-top: 1.6rem;
+
+    .token-amount {
+      text-align: right;
+
+      img {
+        height: 1em;
+        vertical-align: middle;
+        margin-top: -2px;
+      }
+
+      .amount {
+        font-weight: 500;
+      }
+
+      .symbol {
+        font-size: 0.8rem;
+        padding-left: 0.2rem;
+      }
+    }
+
+    table {
+      grid-column-start: span 2;
+      width: 100%;
+      margin-top: 0.8rem;
+      border-collapse: collapse;
+
+      tr {
+        border-top: 1px solid $item-border-color;
+      }
+
+      td {
+        padding: 0.8rem 0;
+
+        &.amount {
+          text-align: right;
+        }
+      }
+
+      @include media-max(small) {
+        td.date { display: none; }
+      }
+    }
+  }
+}