[fix] minor effect-related fixes & style changes

src/components/src/common/styled-components.tsx

@@ -787,8 +787,8 @@ export const StyledTimePicker = styled(TimePicker)`
     display: inline-flex;
     position: relative;
     font-family: ${props => props.theme.fontFamily};
-    font-size: ${props => props.theme.inputFontSize};
-    background-color: ${props => props.theme.inputBgd};
+    font-size: ${props => props.theme.datePickerFontSize};
+    background-color: ${props => props.theme.datePickerBgdColor};
     color: ${props => props.theme.textColor};
   }
   .react-time-picker,
@@ -803,12 +803,14 @@ export const StyledTimePicker = styled(TimePicker)`
     display: flex;
     flex-grow: 1;
     flex-shrink: 0;
-    background-color: ${props => props.theme.inputBgd};
-    border: thin solid ${props => props.theme.inputBgd};
+    background-color: ${props => props.theme.datePickerBgdColor};
+    border: thin solid ${props => props.theme.datePickerBgdColor};
     border-radius: 2px;
+    width: 103px;
+    white-space: nowrap;
   }
   .react-time-picker__wrapper:hover {
-    background-color: ${props => props.theme.inputBgdHover};
+    background-color: ${props => props.theme.datePickerBgdHover};
   }
   .react-time-picker__inputGroup {
     min-width: calc((4px * 3) + 0.54em * 6 + 0.217em * 2);
@@ -825,7 +827,7 @@ export const StyledTimePicker = styled(TimePicker)`
     display: inline-block;
     color: ${props => props.theme.textColor};
     font-family: ${props => props.theme.fontFamily};
-    font-size: ${props => props.theme.inputFontSize};
+    font-size: ${props => props.theme.datePickerFontSize};
   }
   .react-time-picker__inputGroup__input {
     min-width: 0.54em;
@@ -836,7 +838,7 @@ export const StyledTimePicker = styled(TimePicker)`
     background: transparent;
     color: ${props => props.theme.textColor};
     font-family: ${props => props.theme.fontFamily};
-    font-size: ${props => props.theme.inputFontSize};
+    font-size: ${props => props.theme.datePickerFontSize};
     box-sizing: content-box;
     -webkit-appearance: textfield;
     -moz-appearance: textfield;
@@ -861,11 +863,11 @@ export const StyledTimePicker = styled(TimePicker)`
     -webkit-appearance: menulist;
     -moz-appearance: menulist;
     appearance: menulist;
-    font-size: ${props => props.theme.inputFontSize};
+    font-size: ${props => props.theme.datePickerFontSize};
   }
   .react-time-picker__button {
     border: 0;
-    background-color: ${props => props.theme.inputBgd};
+    background-color: ${props => props.theme.datePickerBgdColor};
     padding: 4px 6px;
   }
   .react-time-picker__button:enabled {
@@ -885,7 +887,7 @@ export const StyledDatePicker = styled(DatePicker)`
     display: inline-flex;
     position: relative;
     font-family: ${props => props.theme.fontFamily};
-    font-size: ${props => props.theme.inputFontSize};
+    font-size: ${props => props.theme.datePickerFontSize};
   }
   .react-date-picker,
   .react-date-picker *,
@@ -903,19 +905,21 @@ export const StyledDatePicker = styled(DatePicker)`
     display: flex;
     flex-grow: 1;
     flex-shrink: 0;
-    border: thin solid ${props => props.theme.inputBgd};
+    border: thin solid ${props => props.theme.datePickerBgdColor};
     border-radius: 2px;
+    width: 90px;
+    white-space: nowrap;
   }
   .react-date-picker__inputGroup {
     min-width: calc((4px * 3) + 0.54em * 8 + 0.217em * 2);
     flex-grow: 1;
     padding: 4px 10px;
     box-sizing: content-box;
-    background-color: ${props => props.theme.inputBgd};
+    background-color: ${props => props.theme.datePickerBgdColor};
   }
 
   .react-date-picker__inputGroup:hover {
-    background-color: ${props => props.theme.inputBgdHover};
+    background-color: ${props => props.theme.datePickerBgdHover};
   }
   .react-date-picker__inputGroup__divider {
     padding: 1px 0;
@@ -935,7 +939,7 @@ export const StyledDatePicker = styled(DatePicker)`
     background: none;
     color: ${props => props.theme.textColor};
     font: inherit;
-    font-size: ${props => props.theme.inputFontSize};
+    font-size: ${props => props.theme.datePickerFontSize};
     box-sizing: content-box;
     -webkit-appearance: textfield;
     -moz-appearance: textfield;
@@ -952,7 +956,7 @@ export const StyledDatePicker = styled(DatePicker)`
     margin: 0;
   }
   .react-date-picker__inputGroup__input:invalid {
-    background: ${props => props.theme.inputBgd};
+    background: ${props => props.theme.datePickerBgdColor};
   }
   .react-date-picker__inputGroup__input--hasLeadingZero {
     margin-left: -0.54em;
@@ -962,7 +966,7 @@ export const StyledDatePicker = styled(DatePicker)`
     width: 257px;
     max-width: 100vw;
     z-index: 11;
-    inset: auto !important;
+    inset: auto auto auto -25px !important;
     color: ${props => props.theme.textColor};
   }
   .react-date-picker__calendar--closed {
@@ -978,7 +982,7 @@ export const StyledDatePicker = styled(DatePicker)`
     width: 257px;
     max-width: 100%;
     color: ${props => props.theme.textColor};
-    background: ${props => props.theme.inputBgdHover};
+    background: ${props => props.theme.datePickerBgdHover};
     border: 1px solid ${props => props.theme.textColor};
     border-radius: 2px;
     font-family: ${props => props.theme.fontFamily};
@@ -1023,7 +1027,7 @@ export const StyledDatePicker = styled(DatePicker)`
   }
   .react-calendar__month-view__weekdays__weekday {
     padding: 0.5em;
-    font-size: ${props => props.theme.inputFontSize};
+    font-size: ${props => props.theme.datePickerFontSize};
   }
   .react-calendar__month-view__weekNumbers .react-calendar__tile {
     display: flex;
@@ -1053,16 +1057,16 @@ export const StyledDatePicker = styled(DatePicker)`
     padding: 6px 4px;
     background: none;
     text-align: center;
-    font-size: ${props => props.theme.inputFontSize};
+    font-size: ${props => props.theme.datePickerFontSize};
   }
   .react-calendar__tile:enabled:hover,
   .react-calendar__tile:enabled:focus {
-    background-color: ${props => props.theme.primaryBtnBgd};
+    background-color: ${props => props.theme.datePickerSelectedDateBgColor};
     color: ${props => props.theme.primaryBtnActColor};
   }
   .react-calendar__tile--now:enabled:hover,
   .react-calendar__tile--now:enabled:focus {
-    background: ${props => props.theme.primaryBtnBgd};
+    background: ${props => props.theme.datePickerSelectedDateBgColor};
     color: ${props => props.theme.primaryBtnActColor};
   }
   .react-calendar__tile--hasActive {

src/components/src/effects/effect-configurator.tsx

@@ -1,5 +1,6 @@
 import React, {useCallback, useMemo} from 'react';
 import styled from 'styled-components';
+import {injectIntl, IntlShape} from 'react-intl';
 
 import {LIGHT_AND_SHADOW_EFFECT} from '@kepler.gl/constants';
 import {isNumber} from '@kepler.gl/utils';
@@ -64,7 +65,11 @@ export default function EffectConfiguratorFactory(
   ColorSelector: ReturnType<typeof ColorSelectorFactory>,
   EffectTimeConfigurator: ReturnType<typeof EffectTimeConfiguratorFactory>
 ): React.FC<EffectConfiguratorProps> {
-  const EffectConfigurator = ({effect, updateEffectConfig}: EffectConfiguratorProps) => {
+  const EffectConfigurator = ({
+    effect,
+    updateEffectConfig,
+    intl
+  }: EffectConfiguratorProps & {intl: IntlShape}) => {
     const renderShadowEffectConfigurator = useCallback(() => {
       const {config} = effect;
 
@@ -122,6 +127,7 @@ export default function EffectConfiguratorFactory(
             onDateTimeChange={onDateTimeChange}
             useCurrentTime={config.params.useCurrentTime}
             onUseCurrentTimeChange={onUseCurrentTimeChange}
+            intl={intl}
           />
           <PanelLabelWrapper>
             <PanelLabel>{'Shadow intensity'}</PanelLabel>
@@ -252,5 +258,5 @@ export default function EffectConfiguratorFactory(
     return renderPostProcessingEffectConfigurator();
   };
 
-  return EffectConfigurator;
+  return injectIntl(EffectConfigurator);
 }

src/components/src/effects/effect-manager.tsx

@@ -1,7 +1,6 @@
 import React, {useMemo} from 'react';
 import styled from 'styled-components';
-import {IntlShape} from 'react-intl';
-import {injectIntl} from 'react-intl';
+import {injectIntl, IntlShape} from 'react-intl';
 
 import {addEffect, updateEffect, removeEffect, reorderEffect} from '@kepler.gl/actions';
 import {LIGHT_AND_SHADOW_EFFECT, EFFECT_DESCS} from '@kepler.gl/constants';
@@ -19,6 +18,7 @@ export type EffectManagerState = {
   effectOrder: string[];
   children: React.ReactNode;
 };
+export type EffectManagerProps = {};
 export type EffectManagerWithIntlProp = {intl: IntlShape};
 
 const StyledEffectPanelContainer = styled.div`
@@ -66,7 +66,7 @@ function EffectManagerFactory(
   EffectList: ReturnType<typeof EffectListFactory>,
   SidePanelTitle: ReturnType<typeof SidePanelTitleFactory>,
   EffectTypeSelector: ReturnType<typeof EffectTypeSelectorFactory>
-): React.FC<EffectManagerWithIntlProp> {
+): React.FC<EffectManagerProps> {
   const EffectManager = (props: EffectManagerWithIntlProp & EffectManagerState) => {
     const {intl, visStateActions, effects, effectOrder, children} = props;
 
@@ -87,7 +87,7 @@ function EffectManagerFactory(
           <StyledEffectPanelHeader>
             <SidePanelTitle
               className="effect-manager-title"
-              title={intl.formatMessage({id: 'effectManager.effect'})}
+              title={intl.formatMessage({id: 'effectManager.effects'})}
             >
               <EffectTypeSelector options={effectOptions} onSelect={visStateActions.addEffect} />
             </SidePanelTitle>

src/components/src/effects/effect-panel-header.tsx

@@ -43,7 +43,8 @@ const StyledEffectPanelHeader = styled(StyledPanelHeader)`
 
   .effect__drag-handle__placeholder {
     height: 20px;
-    padding: 10px;
+    padding: 0px;
+    margin: 10px;
   }
 
   :hover {

src/components/src/effects/effect-panel.tsx

@@ -1,5 +1,6 @@
 import React, {Component, ComponentType} from 'react';
 import styled from 'styled-components';
+import classnames from 'classnames';
 import PropTypes from 'prop-types';
 
 import {dataTestIds, LIGHT_AND_SHADOW_EFFECT} from '@kepler.gl/constants';
@@ -79,10 +80,12 @@ function EffectPanelFactory(
       const {effect, isDraggable, listeners} = this.props;
       const {config = {} as EffectConfig} = effect;
 
+      const sortingAllowed = config.type !== LIGHT_AND_SHADOW_EFFECT.type;
+
       return (
         <PanelWrapper
           active={false}
-          className={`effect-panel ${this.props.className}`}
+          className={classnames('effect-panel', this.props.className)}
           data-testid={dataTestIds.effectPanel}
           style={this.props.style}
           onMouseDown={this.props.onMouseDown}
@@ -96,7 +99,7 @@ function EffectPanelFactory(
             onToggleEnabled={this._toggleEnabled}
             onRemoveEffect={this._removeEffect}
             onToggleEnableConfig={this._toggleConfigActive}
-            isDragNDropEnabled={isDraggable}
+            isDragNDropEnabled={isDraggable && sortingAllowed}
             listeners={listeners}
             showSortHandle={effect.type !== LIGHT_AND_SHADOW_EFFECT.type}
           />

src/components/src/effects/effect-time-configurator.tsx

@@ -1,4 +1,5 @@
 import React, {useCallback, useMemo} from 'react';
+import {injectIntl, IntlShape} from 'react-intl';
 import styled from 'styled-components';
 
 import {FormattedMessage} from '@kepler.gl/localization';
@@ -17,6 +18,7 @@ export type EffectTimeConfiguratorProps = {
   onDateTimeChange: (time: number) => void;
   useCurrentTime: boolean;
   onUseCurrentTimeChange: (value: boolean) => void;
+  intl: IntlShape;
 };
 
 type StyledWrapperProps = {disabled?: boolean};
@@ -83,7 +85,8 @@ export default function EffectTimeConfiguratorFactory(
     timestamp,
     useCurrentTime,
     onDateTimeChange,
-    onUseCurrentTimeChange
+    onUseCurrentTimeChange,
+    intl
   }: EffectTimeConfiguratorProps) => {
     const [selectedDate, selectedTimeString] = useMemo(() => {
       const date = new Date(timestamp);
@@ -143,7 +146,9 @@ export default function EffectTimeConfiguratorFactory(
             type="radio"
             checked={!useCurrentTime}
             id={`effect-time-toggle-use-pick`}
-            label={'Pick date/time'}
+            label={intl.formatMessage({
+              id: 'effectManager.pickDateTime'
+            })}
             onChange={() => {
               onUseCurrentTimeChange(false);
             }}
@@ -153,7 +158,7 @@ export default function EffectTimeConfiguratorFactory(
           <StyledButton onClick={setCurrentDateTime} data-for="pick-time-button" data-tip>
             <Pin height="15px" />
             <Tooltip id="pick-time-button" effect="solid" place="top" delayShow={500}>
-              <FormattedMessage id={'Pick current time'} />
+              <FormattedMessage id={'effectManager.pickCurrrentTime'} />
             </Tooltip>
           </StyledButton>
           <StyledDatePicker value={selectedDate} onChange={setDate} />
@@ -177,7 +182,9 @@ export default function EffectTimeConfiguratorFactory(
             type="radio"
             checked={useCurrentTime}
             id={`effect-time-toggle-use-current`}
-            label={'Current time'}
+            label={intl.formatMessage({
+              id: 'effectManager.currentTime'
+            })}
             onChange={() => {
               onUseCurrentTimeChange(true);
             }}
@@ -187,5 +194,5 @@ export default function EffectTimeConfiguratorFactory(
     );
   };
 
-  return EffectTimeConfigurator;
+  return injectIntl(EffectTimeConfigurator);
 }

src/localization/src/translations/en.ts

@@ -187,8 +187,11 @@ export default {
     backgroundColor: 'Background Color'
   },
   effectManager: {
-    effect: 'Effects',
-    addEffect: 'Add effect'
+    effects: 'Effects',
+    addEffect: 'Add effect',
+    pickDateTime: 'Pick date/time',
+    currentTime: 'Current time',
+    pickCurrrentTime: 'Pick current time'
   },
   layerConfiguration: {
     defaultDescription: 'Calculate {property} based on selected field',

src/styles/src/base.ts

@@ -358,6 +358,12 @@ export const sliderMarginTopIsTime = -12;
 export const sliderMarginTop = 12;
 export const sliderMarginBottom = 12;
 
+// Date picker
+export const datePickerFontSize = '11px';
+export const datePickerBgdColor = inputBgd;
+export const datePickerBgdHover = inputBgdHover;
+export const datePickerSelectedDateBgColor = primaryBtnBgd;
+
 // Geocoder
 export const geocoderWidth = 360;
 export const geocoderTop = 20;
@@ -1454,6 +1460,12 @@ export const theme = {
   sliderMarginTop,
   sliderMarginBottom,
 
+  // Date picker
+  datePickerFontSize,
+  datePickerBgdColor,
+  datePickerBgdHover,
+  datePickerSelectedDateBgColor,
+
   // Geocoder
   geocoderWidth,
   geocoderTop,