[Enhancement] Adjust input light styles (#1340)

Signed-off-by: Shan He <heshan0131@gmail.com>
keplergl · Dec 3, 2020 · c1d4943 · c1d4943
1 parent 5642ca8
commit c1d4943
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 23 deletions.
diff --git a/src/components/index.js b/src/components/index.js
@@ -27,6 +27,7 @@ import {ChannelByValueSelectorFactory} from './side-panel/layer-panel/layer-conf
 import FieldSelectorFactory, {FieldListItemFactoryFactory} from './common/field-selector';
 import FieldTokenFactory from './common/field-token';
 import PanelHeaderActionFactory from './side-panel/panel-header-action';
+import InfoHelperFactory from 'components/common/info-helper';
 import {appInjector} from './container';
 
 // Components
@@ -118,7 +119,6 @@ export {default as HistogramPlotFactory} from './common/histogram-plot';
 export {default as LineChartFactory} from './common/line-chart';
 export {default as RangeBrushFactory} from './common/range-brush';
 export {default as TimeSliderMarkerFactory} from './common/time-slider-marker';
-export {default as InfoHelperFactory} from 'components/common/info-helper';
 
 // // Filters factory
 export {default as TimeWidgetFactory} from './filters/time-widget';
@@ -196,6 +196,7 @@ export const FieldSelector = appInjector.get(FieldSelectorFactory);
 export const FieldToken = appInjector.get(FieldTokenFactory);
 export const PanelHeaderAction = appInjector.get(PanelHeaderActionFactory);
 export const FieldListItemFactory = appInjector.get(FieldListItemFactoryFactory);
+export const InfoHelper = appInjector.get(InfoHelperFactory);
 
 export {
   appInjector,
@@ -205,7 +206,8 @@ export {
   VisConfigSwitchFactory,
   LayerConfigGroupFactory,
   ChannelByValueSelectorFactory,
-  FieldListItemFactoryFactory
+  FieldListItemFactoryFactory,
+  InfoHelperFactory
 };
 
 // Context

diff --git a/src/styles/base.js b/src/styles/base.js
@@ -144,6 +144,7 @@ export const inputPlaceholderColorLT = subtextColorLT;
 export const inputPlaceholderFontWeight = 400;
 export const inputBoxShadow = 'none';
 export const inputBoxShadowActive = 'none';
+export const inputBoxShadowActiveLT = 'none';
 export const secondaryInputBgd = '#242730';
 export const secondaryInputBgdHover = '#3A414C';
 export const secondaryInputBgdActive = '#3A414C';
@@ -444,6 +445,13 @@ const input = css`
     font-weight: ${props => props.theme.inputPlaceholderFontWeight};
   }
 
+  /* Disable Arrows on Number Inputs */
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
   align-items: center;
   background-color: ${props => props.theme.inputBgd};
   border: 1px solid
@@ -487,14 +495,6 @@ const input = css`
   opacity: ${props => (props.disabled ? 0.5 : 1)};
   box-shadow: ${props => props.theme.inputBoxShadow};
 
-  :hover {
-    cursor: ${props => (props.type === 'number' || props.type === 'text' ? 'text' : 'pointer')};
-    background-color: ${props =>
-      props.active ? props.theme.inputBgdActive : props.theme.inputBgdHover};
-    border-color: ${props =>
-      props.active ? props.theme.inputBorderActiveColor : props.theme.inputBorderHoverColor};
-  }
-
   :active,
   :focus,
   &.focus,
@@ -504,11 +504,12 @@ const input = css`
     box-shadow: ${props => props.theme.inputBoxShadowActive};
   }
 
-  /* Disable Arrows on Number Inputs */
-  ::-webkit-inner-spin-button,
-  ::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
+  :hover {
+    cursor: ${props => (props.type === 'number' || props.type === 'text' ? 'text' : 'pointer')};
+    background-color: ${props =>
+      props.active ? props.theme.inputBgdActive : props.theme.inputBgdHover};
+    border-color: ${props =>
+      props.active ? props.theme.inputBorderActiveColor : props.theme.inputBorderHoverColor};
   }
 `;
 
@@ -528,21 +529,22 @@ const inputLT = css`
       ? props.theme.errorColor
       : props.theme.selectBorderColorLT};
   color: ${props => props.theme.selectColorLT};
-  caret-color: ${props => props.theme.selectColorLT};
+  caret-color: ${props => props.theme.inputBorderActiveColorLT};
+
+  :hover {
+    background-color: ${props => props.theme.inputBgdActiveLT};
+    cursor: ${props => (['number', 'text'].includes(props.type) ? 'text' : 'pointer')};
+    border-color: ${props =>
+      props.active ? props.theme.inputBorderActiveColorLT : props.theme.inputBorderHoverColorLT};
+  }
 
   :active,
   :focus,
   &.focus,
   &.active {
     background-color: ${props => props.theme.inputBgdActiveLT};
     border-color: ${props => props.theme.inputBorderActiveColorLT};
-  }
-
-  :hover {
-    background-color: ${props => props.theme.inputBgdActiveLT};
-    cursor: ${props => (['number', 'text'].includes(props.type) ? 'text' : 'pointer')};
-    border-color: ${props =>
-      props.active ? props.theme.inputBorderActiveColorLT : props.theme.inputBorderHoverColorLT};
+    box-shadow: ${props => props.theme.inputBoxShadowActiveLT};
   }
 `;
 
@@ -1142,6 +1144,7 @@ export const theme = {
   inputPlaceholderFontWeight,
   inputBoxShadow,
   inputBoxShadowActive,
+  inputBoxShadowActiveLT,
   secondaryInputBgd,
   secondaryInputBgdHover,
   secondaryInputBgdActive,