WIP Reimbursements/expenses

app/styles/_forms.scss

@@ -13,18 +13,19 @@ section#signup {
 
     p {
       font-size: 1.2rem;
-      margin-bottom: 1.5rem;
 
       &.mg-bottom-md {
         margin-bottom: 2rem;
       }
 
       &.label {
+        margin-bottom: 1.5rem;
         font-size: 1rem;
         margin-bottom: .5rem;
       }
 
       &.actions {
+        margin-bottom: 1.5rem;
         padding-top: 1.5rem;
         text-align: center;
         a {
@@ -38,6 +39,10 @@ section#signup {
       display: block;
       margin-bottom: 0.5rem;
       opacity: 0.7;
+
+      > p {
+        margin-bottom: 1.5rem;
+      }
     }
 
     fieldset {

app/styles/_item-list.scss

@@ -1,7 +1,7 @@
 ul.item-list {
   list-style: none;
 
-  li {
+  > li {
     padding: 0.8rem 1.2rem;
     font-size: 1.2rem;
     background-color: $item-background-color;
@@ -19,7 +19,7 @@ ul.item-list {
   &.loading {
     @include loading-border-top;
 
-    li {
+    > li {
       &:first-of-type {
         border-top: none;
       }
@@ -27,7 +27,7 @@ ul.item-list {
   }
 
   &.spaced {
-    li {
+    > li {
       border-top: 1px solid $item-border-color;
       margin-bottom: 2rem;
     }

app/styles/app.scss

@@ -96,6 +96,7 @@ section {
 @import "components/contribution-list";
 @import "components/contributor-list";
 @import "components/contributor-profile";
+@import "components/expense-list";
 @import "components/external-account-link";
 @import "components/loading-spinner";
 @import "components/reimbursement-list";

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; }
-      }
-    }
   }
 }