From 3aa54a6e34833cb0feaaec13676faaa45f512189 Mon Sep 17 00:00:00 2001 From: Jim Myers Date: Fri, 18 Jan 2019 10:20:32 -0500 Subject: [PATCH] Update styles on table widget. --- index.html | 14 ++++++++++---- src/table/index.js | 34 +++++++++++++++++++++++----------- src/table/styles.scss | 7 +++---- 3 files changed, 36 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index cb3469b..353a2f6 100644 --- a/index.html +++ b/index.html @@ -19,10 +19,13 @@ width: 500px; } - #widget-1, - #widget-2 { + #widget-1 { background: black; } + #widget-2 { + width: 300px; + background: #33435e; + } @@ -31,14 +34,17 @@
diff --git a/src/table/index.js b/src/table/index.js index f310c9f..04ecfae 100644 --- a/src/table/index.js +++ b/src/table/index.js @@ -63,18 +63,26 @@ export default class Table extends Component { rank = "s"; } + let tdStyle = this.props.borderColor + ? { borderBottom: `1px solid ${this.props.borderColor}` } + : { borderBottom: "1px solid #737e8d" }; + + const learnMoreUrl = this.props.learnMoreUrl + ? this.props.learnMoreUrl + : "https://flipsidecrypto.com/monitors"; + return (
- - + - - - - - + + - - - + +
FCAS + FCAS {rank} + {fcas.value} + 7d {calculateDiff(fcas.value, fcas.percent_change)} @@ -83,9 +91,11 @@ export default class Table extends Component {
User Activity{utility.value} + + User Activity + {utility.value} 7d {calculateDiff(utility.value, utility.percent_change)} @@ -94,9 +104,11 @@ export default class Table extends Component {
Developer Behavior{dev.value} + + Developer Behavior + {dev.value} 7d {calculateDiff(dev.value, dev.percent_change)} @@ -104,7 +116,7 @@ export default class Table extends Component {
- + Want to know more about these scores?
diff --git a/src/table/styles.scss b/src/table/styles.scss index efd036a..9ffa502 100644 --- a/src/table/styles.scss +++ b/src/table/styles.scss @@ -1,7 +1,8 @@ .fs-table { white-space: nowrap; - font-size: 18px; + font-size: 14px; color: #000; + font-weight: 400; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @@ -24,14 +25,13 @@ td { text-align: right; - padding-left: 5%; + padding-left: 10px; } th, td { font-weight: normal; line-height: 44px; - border-bottom: 1px solid #ccc; } } @@ -54,7 +54,6 @@ font-weight: bold; border-radius: 2px; line-height: 28px; - margin-bottom: 5px; text-transform: uppercase; color: #000; }