[ADD] Moved styled.div to separate file

visgl · Jul 22, 2021 · 6e48d9c · 6e48d9c
1 parent 47ebdc0
commit 6e48d9c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 73 deletions.
diff --git a/modules/react/src/components/export-video/export-video-panel-footer.js b/modules/react/src/components/export-video/export-video-panel-footer.js
diff --git a/modules/react/src/components/export-video/export-video-panel.js b/modules/react/src/components/export-video/export-video-panel.js
@@ -19,18 +19,12 @@
 // THE SOFTWARE.
 
 import React from 'react';
-import styled, {withTheme} from 'styled-components';
-import {PanelCloseInner, StyledTitle} from './styled-components';
+import {withTheme} from 'styled-components';
+import {PanelCloseInner, StyledTitle, PanelBodyInner, Panel} from './styled-components';
 
-import {
-  DEFAULT_PADDING,
-  DEFAULT_ICON_BUTTON_HEIGHT,
-  DEFAULT_ROW_GAP,
-  DEFAULT_SETTINGS_WIDTH
-} from './constants';
+import {DEFAULT_ICON_BUTTON_HEIGHT} from './constants';
 import ExportVideoPanelSettings from './export-video-panel-settings';
 import {ExportVideoPanelPreview} from './export-video-panel-preview'; // Not yet part of standard library. TODO when updated
-import ExportVideoPanelFooter from './export-video-panel-footer';
 
 import {WithKeplerUI} from '../inject-kepler';
 
@@ -46,14 +40,6 @@ const PanelClose = ({handleClose}) => (
   </WithKeplerUI>
 );
 
-const PanelBodyInner = styled.div`
-  padding: 0 ${DEFAULT_PADDING}px;
-  display: grid;
-  grid-template-columns: ${props => props.exportVideoWidth}px ${DEFAULT_SETTINGS_WIDTH}px;
-  grid-template-rows: auto;
-  grid-column-gap: ${DEFAULT_ROW_GAP}px;
-`;
-
 const PanelBody = ({
   exportVideoWidth,
   mapData,
@@ -87,11 +73,6 @@ const PanelBody = ({
   </PanelBodyInner>
 );
 
-const Panel = styled.div`
-  width: ${props =>
-    props.exportVideoWidth + 2 * DEFAULT_PADDING + DEFAULT_ROW_GAP + DEFAULT_SETTINGS_WIDTH}px;
-`;
-
 const ExportVideoPanel = ({
   // UI Props
   exportVideoWidth,
@@ -134,11 +115,6 @@ const ExportVideoPanel = ({
         staticMapProps={staticMapProps}
         mapboxLayerBeforeId={mapboxLayerBeforeId}
       />
-      <ExportVideoPanelFooter
-        handlePreviewVideo={handlePreviewVideo}
-        handleRenderVideo={handleRenderVideo}
-        rendering={rendering}
-      />
     </Panel>
   );
 };

diff --git a/modules/react/src/components/export-video/styled-components.js b/modules/react/src/components/export-video/styled-components.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import {DEFAULT_ROW_GAP, DEFAULT_PADDING} from './constants';
+import {DEFAULT_ROW_GAP, DEFAULT_PADDING, DEFAULT_SETTINGS_WIDTH} from './constants';
 
 export const SliderWrapper = styled.div`
   display: flex;
@@ -34,13 +34,6 @@ export const InputGrid = styled.div`
   grid-row-gap: ${DEFAULT_ROW_GAP}px;
 `;
 
-export const PanelFooterInner = styled.div`
-  display: flex;
-  justify-content: space-between;
-  margin-top: ${DEFAULT_ROW_GAP}px;
-  padding: ${DEFAULT_PADDING}px;
-`;
-
 export const ButtonGroup = styled.div`
   display: flex;
 `;
@@ -62,3 +55,18 @@ export const StyledTitle = styled.div`
   line-height: ${props => props.theme.lineHeight};
   padding: 0 ${DEFAULT_PADDING}px 16px ${DEFAULT_PADDING}px;
 `;
+
+export const PanelBodyInner = styled.div`
+  padding: 0 ${DEFAULT_PADDING}px;
+  padding-bottom: ${DEFAULT_PADDING}px;
+  display: grid;
+  grid-template-columns: ${props => props.exportVideoWidth}px ${DEFAULT_SETTINGS_WIDTH}px;
+  grid-template-rows: auto;
+  grid-column-gap: ${DEFAULT_ROW_GAP}px;
+  margin-bottom: ${DEFAULT_ROW_GAP}px;
+`;
+
+export const Panel = styled.div`
+  width: ${props =>
+    props.exportVideoWidth + 2 * DEFAULT_PADDING + DEFAULT_ROW_GAP + DEFAULT_SETTINGS_WIDTH}px;
+`;