Review corrections

src/cloud-providers/src/index.ts

@@ -21,3 +21,4 @@
 export {default as Provider, FILE_CONFLICT_MSG} from './provider';
 // eslint-disable-next-line prettier/prettier
 export type {MapListItem, Millisecond, Thumbnail, ProviderProps, IconProps} from './provider';
+export {default as Upload} from './upload';

src/cloud-providers/src/provider.ts

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {Upload} from '@kepler.gl/constants';
+import Upload from './upload';
 import {MapData, ExportFileOptions} from '@kepler.gl/types';
 import {ComponentType} from 'react';
 

src/constants/src/icons/upload.tsx → src/cloud-providers/src/upload.tsx

@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 import React, {Component} from 'react';
-import Base, {BaseProps} from './base';
+import {Base, BaseProps} from '@kepler.gl/constants';
 
 export default class Upload extends Component<Partial<BaseProps>> {
   static defaultProps = {

src/components/src/common/animation-control/floating-time-display.tsx

@@ -23,7 +23,7 @@ import styled from 'styled-components';
 import classnames from 'classnames';
 import {Minus} from '../icons';
 import {DEFAULT_TIME_FORMAT} from '@kepler.gl/constants';
-import {CenterFlexbox} from '@kepler.gl/constants';
+import {CenterFlexbox} from '../../common/styled-components';
 import {datetimeFormatter} from '@kepler.gl/utils';
 
 const StyledTimeDisplayWrapper = styled.div.attrs({

src/components/src/common/dataset-label.tsx

@@ -20,8 +20,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import {CenterFlexbox} from '@kepler.gl/constants';
-import {DatasetSquare} from './styled-components';
+import {CenterFlexbox, DatasetSquare} from './styled-components';
 import {RGBColor} from '@kepler.gl/types';
 
 const DatasetName = styled.div.attrs({

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

@@ -56,6 +56,11 @@ export const IconRoundSmall = styled.div`
   }
 `;
 
+export const CenterFlexbox = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
 export const CenterVerticalFlexbox = styled.div`
   display: flex;
   flex-direction: column;
@@ -416,6 +421,27 @@ export const SelectionButton = styled.div<SelectionButtonProps>`
   }
 `;
 
+export const StyledTable = styled.table`
+  width: 100%;
+  border-spacing: 0;
+
+  thead {
+    tr th {
+      background: ${props => props.theme.panelBackgroundLT};
+      color: ${props => props.theme.titleColorLT};
+      padding: 18px 12px;
+      text-align: start;
+    }
+  }
+
+  tbody {
+    tr td {
+      border-bottom: ${props => props.theme.panelBorderLT};
+      padding: 12px;
+    }
+  }
+`;
+
 export const StyledModalContent = styled.div`
   background: ${props => props.theme.panelBackgroundLT};
   color: ${props => props.theme.textColorLT};

src/components/src/filters/time-widget.tsx

@@ -20,8 +20,7 @@
 
 import React, {useCallback, useMemo} from 'react';
 import styled from 'styled-components';
-import {CenterFlexbox} from '@kepler.gl/constants';
-import {SelectTextBold, IconRoundSmall, BottomWidgetInner} from '../common/styled-components';
+import {CenterFlexbox, SelectTextBold, IconRoundSmall, BottomWidgetInner} from '../common/styled-components';
 import {Close, Clock, LineChart} from '../common/icons';
 import TimeRangeSliderFactory from '../common/time-range-slider';
 import FieldSelectorFactory from '../common/field-selector';

src/components/src/map/layer-hover-info.tsx

@@ -21,7 +21,7 @@
 import React, {useMemo} from 'react';
 import styled from 'styled-components';
 import {TooltipField} from '@kepler.gl/types';
-import {CenterFlexbox} from '@kepler.gl/constants';
+import {CenterFlexbox} from '../common/styled-components';
 import {Layers} from '../common/icons';
 import PropTypes from 'prop-types';
 import {notNullorUndefined} from '@kepler.gl/utils';

src/components/src/side-panel/common/dataset-title.tsx

@@ -22,8 +22,8 @@ import React, {createRef, MouseEvent, PureComponent} from 'react';
 import styled from 'styled-components';
 import {FormattedMessage} from '@kepler.gl/localization';
 
-import {CenterFlexbox, Table} from '@kepler.gl/constants';
-import {Tooltip} from '../../common/styled-components';
+import {Table} from '@kepler.gl/layers';
+import {CenterFlexbox, Tooltip} from '../../common/styled-components';
 import {ArrowRight, Trash} from '../../common/icons';
 import DatasetTagFactory from './dataset-tag';
 import CustomPicker from '../layer-panel/custom-picker';

src/components/src/side-panel/map-style-panel/map-layer-selector.tsx

@@ -23,8 +23,8 @@ import styled from 'styled-components';
 import PanelHeaderActionFactory from '../panel-header-action';
 import {EyeSeen, EyeUnseen} from '../../common/icons';
 
-import {CenterFlexbox} from '@kepler.gl/constants';
 import {
+  CenterFlexbox,
   PanelLabel,
   PanelContent,
   PanelLabelBold,
@@ -33,7 +33,8 @@ import {
 import {FormattedMessage} from '@kepler.gl/localization';
 import {camelize} from '@kepler.gl/utils';
 import {VisibleLayerGroups} from '@kepler.gl/types';
-import {BaseProps, Upload} from '@kepler.gl/constants';
+import {BaseProps} from '@kepler.gl/constants';
+import {Upload} from '@kepler.gl/cloud-providers';
 
 const StyledInteractionPanel = styled.div`
   padding-bottom: 12px;

src/constants/src/icons/index.ts

@@ -1,8 +1,6 @@
 export {default as Base} from './base';
 // eslint-disable-next-line prettier/prettier
 export type {BaseProps} from './base';
-export {default as Upload} from './upload';
-export {default as Table} from './table';
 export {default as Messages} from './messages';
 export {default as Crosshairs} from './crosshairs';
 export {default as CursorClick} from './cursor-click';

src/constants/src/index.ts

@@ -30,4 +30,3 @@ export * from './tooltip';
 export * from './user-feedbacks';
 export * from './user-guides';
 export * from './icons';
-export {CenterFlexbox, StyledTable} from './base-styled-components';

src/layers/src/icon-layer/icon-info-modal.tsx

@@ -22,7 +22,12 @@ import React from 'react';
 import styled from 'styled-components';
 import {line} from 'd3-shape';
 import {FormattedMessage} from '@kepler.gl/localization';
-import {CenterFlexbox, Table} from '@kepler.gl/constants';
+import Table from '../table';
+
+const CenterFlexbox = styled.div`
+  display: flex;
+  align-items: center;
+`;
 
 const lineFunction = line()
   .x(d => d[0] * 10)

src/layers/src/index.ts

@@ -103,3 +103,4 @@ export type OVERLAY_TYPE = {[key: string]: string};
 export * from './mapbox-utils';
 export * from './types';
 export * from './h3-hexagon-layer';
+export {default as Table} from './table';

src/layers/src/scenegraph-layer/scenegraph-info-modal.tsx

@@ -20,7 +20,28 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import {StyledTable as Table} from '@kepler.gl/constants';
+
+export const Table = styled.table`
+  width: 100%;
+  border-spacing: 0;
+
+  thead {
+    tr th {
+      background: ${props => props.theme.panelBackgroundLT};
+      color: ${props => props.theme.titleColorLT};
+      padding: 18px 12px;
+      text-align: start;
+    }
+  }
+
+  tbody {
+    tr td {
+      border-bottom: ${props => props.theme.panelBorderLT};
+      padding: 12px;
+    }
+  }
+`;
+
 
 const StyledTitle = styled.div`
   font-size: 20px;

src/constants/src/icons/table.tsx → src/layers/src/table.tsx

@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 import React, {Component} from 'react';
-import Base, {BaseProps} from './base';
+import {Base, BaseProps} from '@kepler.gl/constants';
 
 export default class Table extends Component<Partial<BaseProps>> {
   static defaultProps = {