From fb267813fb8805e151940db609eae6c9c7895ea8 Mon Sep 17 00:00:00 2001
From: Sebastian Kippe <sebastian@kip.pe>
Date: Thu, 9 Jul 2020 22:41:11 +0200
Subject: [PATCH] Introduce item-list CSS, move item colors to variables

---
 app/components/contribution-list/template.hbs |  2 +-
 app/helpers/sats-to-btc.js                    |  4 +--
 app/styles/_colors.scss                       |  4 +++
 app/styles/_item-list.scss                    | 27 +++++++++++++++++++
 app/styles/app.scss                           |  1 +
 .../components/_contribution-details.scss     |  8 +++---
 app/styles/components/_contribution-list.scss | 21 ---------------
 app/styles/components/_contributor-list.scss  |  8 +++---
 .../components/_contributor-profile.scss      |  8 +++---
 9 files changed, 47 insertions(+), 36 deletions(-)
 create mode 100644 app/styles/_item-list.scss

diff --git a/app/components/contribution-list/template.hbs b/app/components/contribution-list/template.hbs
index 42280a2..aecc670 100644
--- a/app/components/contribution-list/template.hbs
+++ b/app/components/contribution-list/template.hbs
@@ -29,7 +29,7 @@
   </div>
 {{/if}}
 
-<ul class="contribution-list {{if @loading 'loading'}}">
+<ul class="item-list contribution-list {{if @loading 'loading'}}">
   {{#each this.contributionsFiltered as |contribution|}}
     <li role="button" data-contribution-id={{contribution.id}}
         {{action "openContributionDetails" contribution}}
diff --git a/app/helpers/sats-to-btc.js b/app/helpers/sats-to-btc.js
index 319004e..eccfed7 100644
--- a/app/helpers/sats-to-btc.js
+++ b/app/helpers/sats-to-btc.js
@@ -1,5 +1,5 @@
 import { helper } from '@ember/component/helper';
 
-export default helper(function satsToBtc(amount/*, hash*/) {
-  return amount / 100000000;
+export default helper(function satsToBtc(params/*, hash*/) {
+  return params;
 });
diff --git a/app/styles/_colors.scss b/app/styles/_colors.scss
index 4898458..35bbc34 100644
--- a/app/styles/_colors.scss
+++ b/app/styles/_colors.scss
@@ -8,3 +8,7 @@ $red: #fb6868;
 $primary-color: $blue;
 
 $body-text-color: #fff;
+
+$item-background-color: rgba(255,255,255,0.1);
+$item-highlighted-background-color: rgba(255,255,255,0.2);
+$item-border-color: rgba(255,255,255,0.2);
diff --git a/app/styles/_item-list.scss b/app/styles/_item-list.scss
new file mode 100644
index 0000000..a3877f2
--- /dev/null
+++ b/app/styles/_item-list.scss
@@ -0,0 +1,27 @@
+ul.item-list {
+  list-style: none;
+
+  li {
+    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;
+    }
+
+    &.selected {
+      background-color: $item-highlighted-background-color;
+    }
+  }
+
+  &.loading {
+    @include loading-border-top;
+
+    li {
+      &:first-of-type {
+        border-top: none;
+      }
+    }
+  }
+}
diff --git a/app/styles/app.scss b/app/styles/app.scss
index 97112ac..5af3d7a 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -89,6 +89,7 @@ section {
 @import "buttons";
 @import "forms";
 @import "sugar";
+@import "item-list";
 
 @import "components/contribution-list";
 @import "components/contribution-details";
diff --git a/app/styles/components/_contribution-details.scss b/app/styles/components/_contribution-details.scss
index 5cdc1e9..a2071a0 100644
--- a/app/styles/components/_contribution-details.scss
+++ b/app/styles/components/_contribution-details.scss
@@ -16,9 +16,9 @@ section#contribution-details {
     margin: 0 0 1.5rem;
     padding: 2rem 2rem;
 
-    border-top: 1px solid rgba(255,255,255,0.2);
-    border-bottom: 1px solid rgba(255,255,255,0.2);
-    background-color: rgba(255,255,255,0.1);
+    border-top: 1px solid $item-border-color;
+    border-bottom: 1px solid $item-border-color;
+    background-color: $item-background-color;
 
     h3 {
       font-size: 1.5rem;
@@ -67,7 +67,7 @@ section#contribution-details {
     overflow: auto;
     margin-top: 2rem;
     padding-top: 2rem;
-    border-top: 1px solid rgba(255,255,255,0.2);
+    border-top: 1px solid $item-border-color;
     font-size: 1.2rem;
 
     .icon {
diff --git a/app/styles/components/_contribution-list.scss b/app/styles/components/_contribution-list.scss
index bb560e6..ab51c4d 100644
--- a/app/styles/components/_contribution-list.scss
+++ b/app/styles/components/_contribution-list.scss
@@ -31,15 +31,8 @@ ul.contribution-list {
     grid-template-columns: auto 5rem 5rem;
     grid-row-gap: 0.5rem;
     padding: 0.8rem 1.2rem;
-    background-color: rgba(255,255,255,0.1);
-    font-size: 1.2rem;
-    border-bottom: 1px solid rgba(255,255,255,0.2);
     cursor: pointer;
 
-    &:first-of-type {
-      border-top: 1px solid rgba(255,255,255,0.2);
-    }
-
     &.confirmed {
       grid-template-columns: auto 5rem;
     }
@@ -50,10 +43,6 @@ ul.contribution-list {
       opacity: 0.6;
     }
 
-    &.selected {
-      background-color: rgba(255,255,255,0.2);
-    }
-
     p {
       align-self: center;
       margin: 0;
@@ -113,14 +102,4 @@ ul.contribution-list {
       margin-right: 0.5rem;
     }
   }
-
-  &.loading {
-    @include loading-border-top;
-
-    li {
-      &:first-of-type {
-        border-top: none;
-      }
-    }
-  }
 }
diff --git a/app/styles/components/_contributor-list.scss b/app/styles/components/_contributor-list.scss
index 2d56780..e2deff7 100644
--- a/app/styles/components/_contributor-list.scss
+++ b/app/styles/components/_contributor-list.scss
@@ -5,16 +5,16 @@ table.contributor-list {
   margin-bottom: 1.5rem;
 
   tr {
-    background-color: rgba(255,255,255,0.1);
-    border-bottom: 1px solid rgba(255,255,255,0.2);
+    background-color: $item-background-color;
+    border-bottom: 1px solid $item-border-color;
     cursor: pointer;
 
     &:first-of-type {
-      border-top: 1px solid rgba(255,255,255,0.2);
+      border-top: 1px solid $item-border-color;
     }
 
     &.selected {
-      background-color: rgba(255,255,255,0.2);
+      background-color: $item-highlighted-background-color;
     }
 
     &.current-user {
diff --git a/app/styles/components/_contributor-profile.scss b/app/styles/components/_contributor-profile.scss
index 73ed08d..392c634 100644
--- a/app/styles/components/_contributor-profile.scss
+++ b/app/styles/components/_contributor-profile.scss
@@ -8,7 +8,7 @@ section#contributor-profile {
 
     img {
       margin: 0 auto;
-      border: 3px solid rgba(255,255,255,0.2);
+      border: 3px solid $item-border-color;
     }
   }
 
@@ -18,9 +18,9 @@ section#contributor-profile {
     margin: -7.2rem 0 1.5rem;
     padding: 6rem 1.2rem 2rem;
 
-    border-top: 1px solid rgba(255,255,255,0.2);
-    border-bottom: 1px solid rgba(255,255,255,0.2);
-    background-color: rgba(255,255,255,0.1);
+    border-top: 1px solid $item-border-color;
+    border-bottom: 1px solid $item-border-color;
+    background-color: $item-background-color;
 
     h2 {
       text-align: center;