Finance: add header to date range input for clarity (#860)

aragon · May 20, 2019 · 56a5b23 · 56a5b23
1 parent d37eea2
commit 56a5b23
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/apps/finance/app/src/components/DateRange/DatePicker.js b/apps/finance/app/src/components/DateRange/DatePicker.js
@@ -63,11 +63,25 @@ class DatePicker extends React.PureComponent {
   }
 
   render() {
+    const { name } = this.props
     const today = startOfDay(new Date())
     const { value: selected = today } = this.state
 
     return (
       <Container overlay={this.props.overlay}>
+        {name && (
+          <Text
+            size="normal"
+            weight="bold"
+            css={`
+              text-align: center;
+              margin-bottom: 2px;
+            `}
+          >
+            {name}
+          </Text>
+        )}
+
         {!this.props.hideYearSelector && (
           <Selector>
             <ArrowButton onClick={this.previousYear}>◀</ArrowButton>
@@ -128,6 +142,7 @@ class DatePicker extends React.PureComponent {
 
 DatePicker.propTypes = {
   currentDate: PropTypes.instanceOf(Date),
+  name: PropTypes.string,
 
   // Events
   onSelect: PropTypes.func,

diff --git a/apps/finance/app/src/components/DateRange/DateRangeInput.js b/apps/finance/app/src/components/DateRange/DateRangeInput.js
@@ -185,7 +185,7 @@ class DateRangeInput extends React.PureComponent {
               {(!compactMode || !startDateSelected) && (
                 <DatePicker
                   key={`start-picker-${startDate}`}
-                  name="start-date-picker"
+                  name="Start date"
                   currentDate={startDate}
                   onSelect={this.handleSelectStartDate}
                   overlay={false}
@@ -194,7 +194,7 @@ class DateRangeInput extends React.PureComponent {
               {(!compactMode || startDateSelected) && (
                 <DatePicker
                   key={`end-picker-${endDate}`}
-                  name="end-date-picker"
+                  name="End date"
                   currentDate={endDate}
                   onSelect={this.handleSelectEndDate}
                   overlay={false}