WIP Reimbursements/expenses

app/styles/components/_budget-balances.scss

@@ -25,7 +25,7 @@ section#funds {
       text-align: right;
 
       &.amount {
-        font-size: 1.6rem;
+        font-size: 1.5rem;
         padding-right: 1.2rem;
       }
 

app/styles/components/_expense-list.scss

@@ -0,0 +1,48 @@
+ul.expense-list {
+  grid-column-start: span 2;
+  width: 100%;
+  margin-top: 0.8rem;
+  border-collapse: collapse;
+
+  li {
+    display: grid;
+    grid-template-columns: auto 10rem;
+    grid-row-gap: 0.5rem;
+    padding-top: 1.2rem;
+    border-top: 1px solid $item-border-color;
+    font-size: 1.2rem;
+
+    &:not(:last-child) {
+      padding-bottom: 1.2rem;
+    }
+  }
+
+  .description {
+    grid-row-start: 1;
+    grid-row-end: 3;
+  }
+
+  .amount {
+    justify-self: end;
+    // font-weight: normal;
+  }
+
+  .actions {
+    justify-self: end;
+  }
+
+  h4 {
+    font-size: 1.2rem;
+    font-weight: normal;
+    line-height: 2rem;
+  }
+
+  p {
+    line-height: 2rem;
+
+    &.description {
+      font-size: 1rem;
+      opacity: 0.7;
+    }
+  }
+}

app/styles/components/_reimbursement-list.scss

@@ -1,7 +1,7 @@
 ul.reimbursement-list {
   width: 100%;
 
-  li {
+  > li {
     display: grid;
     grid-template-columns: auto 10rem;
     grid-row-gap: 0.5rem;
@@ -17,36 +17,13 @@ ul.reimbursement-list {
       }
 
       .amount {
-        font-weight: 500;
+        font-size: 1.5rem;
       }
 
       .symbol {
-        font-size: 0.8rem;
+        font-size: 1rem;
         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; }
-      }
-    }
   }
 }