Update Thermometer.js styling

SumOfUs · Nov 23, 2018 · d86a63d · d86a63d
1 parent 75c19df
commit d86a63d
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/app/javascript/components/Thermometer.js b/app/javascript/components/Thermometer.js
@@ -1,10 +1,11 @@
 // @flow
 import React from 'react';
 import { connect } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
 import { isEmpty, min } from 'lodash';
 import CurrencyAmount from './CurrencyAmount';
-import './Thermometer.css';
 import type { AppState } from '../state/reducers';
+import './Thermometer.scss';
 
 type Props =
   | {}
@@ -24,6 +25,14 @@ export function Thermometer(props: Props) {
 
   // Prevent overflow when donations > goal.
   const donations = min([props.donations, props.goal]);
+  const remaining = props.goal - donations;
+
+  const $remaining = (
+    <CurrencyAmount amount={remaining} currency={props.currency} />
+  );
+  const $goal = (
+    <CurrencyAmount amount={props.goal} currency={props.currency} />
+  );
 
   return (
     <div className="Thermometer">
@@ -33,7 +42,15 @@ export function Thermometer(props: Props) {
           <CurrencyAmount amount={donations} currency={props.currency} />
         </div>
         <div className="Thermometer-goal">
-          <CurrencyAmount amount={props.goal} currency={props.currency} />
+          {remaining > 0 ? (
+            <FormattedMessage
+              id="fundraiser.thermometer.remaining"
+              defaultMessage="{remaining} until {goal}"
+              values={{ remaining: $remaining, goal: $goal }}
+            />
+          ) : (
+            $goal
+          )}
         </div>
       </div>
       <div className="Thermometer-bg">

diff --git a/app/javascript/components/Thermometer.css → app/javascript/components/Thermometer.scss b/app/javascript/components/Thermometer.css → app/javascript/components/Thermometer.scss
@@ -1,7 +1,17 @@
+
+.Thermometer {
+
+}
+
+.Thermometer-title {
+  font-weight: bold;
+  margin-bottom: 1em;
+}
+
 .Thermometer-stats {
   width: 100%;
   line-height: 14px;
-  font-size: 0.9em;
+  font-size: 12px;
   font-weight: bold;
   text-transform: uppercase;
 }
@@ -36,3 +46,10 @@
   height: 100%;
   min-width: 8px;
 }
+
+/* Free standing version */
+.fundraiser-bar--freestanding {
+  .Thermometer-bg {
+    background-color: #f5f5f5;
+  }
+}