Tweak default react-dates styling

react-dates · May 7, 2018 · 3d8b054 · 3d8b054
1 parent 86cde2f
commit 3d8b054
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 43 deletions.
diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
@@ -322,6 +322,7 @@ export default withStyles(({
   DateInput_input__small: {
     fontSize: font.input.size_small,
     lineHeight: font.input.lineHeight_small,
+    letterSpacing: font.input.letterSpacing_small,
     padding: `${spacing.displayTextPaddingVertical_small}px ${spacing.displayTextPaddingHorizontal_small}px`,
     paddingTop: spacing.displayTextPaddingTop_small,
     paddingBottom: spacing.displayTextPaddingBottom_small,

diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
@@ -164,23 +164,11 @@ function DateRangePickerInput({
   const calendarIcon = customInputIcon || (
     <CalendarIcon {...css(styles.DateRangePickerInput_calendarIcon_svg)} />
   );
-  const arrowIcon = customArrowIcon || (isRTL
-    ? (
-      <LeftArrow
-        {...css(
-          styles.DateRangePickerInput_arrow_svg,
-          small && styles.DateRangePickerInput_arrow_svg__small,
-        )}
-      />
-    ) : (
-      <RightArrow
-        {...css(
-          styles.DateRangePickerInput_arrow_svg,
-          small && styles.DateRangePickerInput_arrow_svg__small,
-        )}
-      />
-    )
-  );
+
+  let arrowIcon = customArrowIcon || <RightArrow {...css(styles.DateRangePickerInput_arrow_svg)} />;
+  if (isRTL) arrowIcon = <LeftArrow {...css(styles.DateRangePickerInput_arrow_svg)} />;
+  if (small) arrowIcon = '-';
+
   const closeIcon = customCloseIcon || (
     <CloseButton
       {...css(
@@ -239,13 +227,15 @@ function DateRangePickerInput({
         regular={regular}
       />
 
-      <div
-        {...css(styles.DateRangePickerInput_arrow)}
-        aria-hidden="true"
-        role="presentation"
-      >
-        {arrowIcon}
-      </div>
+      {
+        <div
+          {...css(styles.DateRangePickerInput_arrow)}
+          aria-hidden="true"
+          role="presentation"
+        >
+          {arrowIcon}
+        </div>
+      }
 
       <DateInput
         id={endDateId}
@@ -306,7 +296,8 @@ export default withStyles(({ reactDates: { color, sizing } }) => ({
   },
 
   DateRangePickerInput__withBorder: {
-    border: `1px solid ${color.core.grayLighter}`,
+    border: `1px solid ${color.border}`,
+    borderRadius: 2,
   },
 
   DateRangePickerInput__rtl: {
@@ -324,6 +315,7 @@ export default withStyles(({ reactDates: { color, sizing } }) => ({
   DateRangePickerInput_arrow: {
     display: 'inline-block',
     verticalAlign: 'middle',
+    color: color.text,
   },
 
   DateRangePickerInput_arrow_svg: {
@@ -333,11 +325,6 @@ export default withStyles(({ reactDates: { color, sizing } }) => ({
     width: sizing.arrowWidth,
   },
 
-  DateRangePickerInput_arrow_svg__small: {
-    height: sizing.arrowWidth_small,
-    width: sizing.arrowWidth_small,
-  },
-
   DateRangePickerInput_clearDates: {
     background: 'none',
     border: 0,

diff --git a/src/theme/DefaultTheme.js b/src/theme/DefaultTheme.js
@@ -1,6 +1,6 @@
 const core = {
   white: '#fff',
-  gray: '#565a5c',
+  gray: '#484848',
   grayLight: '#82888a',
   grayLighter: '#cacccd',
   grayLightest: '#f2f2f2',
@@ -52,6 +52,7 @@ export default {
       background: core.white,
       backgroundDark: '#f2f2f2',
       backgroundFocused: core.white,
+      border: 'rgb(219, 219, 219)',
       text: core.gray,
       textDisabled: core.border,
       textFocused: '#007a87',
@@ -151,34 +152,34 @@ export default {
       captionPaddingBottom: 37,
       inputPadding: 0,
       displayTextPaddingVertical: undefined,
-      displayTextPaddingTop: 13,
-      displayTextPaddingBottom: 11,
+      displayTextPaddingTop: 11,
+      displayTextPaddingBottom: 9,
       displayTextPaddingHorizontal: undefined,
-      displayTextPaddingLeft: 12,
-      displayTextPaddingRight: 12,
+      displayTextPaddingLeft: 11,
+      displayTextPaddingRight: 11,
       displayTextPaddingVertical_small: undefined,
-      displayTextPaddingTop_small: 8,
-      displayTextPaddingBottom_small: 6,
+      displayTextPaddingTop_small: 7,
+      displayTextPaddingBottom_small: 5,
       displayTextPaddingHorizontal_small: undefined,
-      displayTextPaddingLeft_small: 8,
-      displayTextPaddingRight_small: 8,
+      displayTextPaddingLeft_small: 7,
+      displayTextPaddingRight_small: 7,
     },
 
     sizing: {
       inputWidth: 130,
-      inputWidth_small: 90,
+      inputWidth_small: 97,
       arrowWidth: 24,
-      arrowWidth_small: 19,
     },
 
     font: {
       size: 14,
       captionSize: 18,
       input: {
-        size: 18,
+        size: 19,
         lineHeight: '24px',
-        size_small: 14,
+        size_small: 15,
         lineHeight_small: '18px',
+        letterSpacing_small: '0.2px',
         styleDisabled: 'italic',
       },
     },