FXD-1214 fix(css): css refactor 4/4

src/CoreMetadata/CoreMetadataHeader.jsx

@@ -44,49 +44,46 @@ class CoreMetadataHeader extends Component {
   dateTransform = date => `Updated on ${date.substr(0, 10)}`;
 
   render() {
-
-  if (this.props.metadata) {
+    if (this.props.metadata) {
     // display the download button if the user can download this file
-    const { user, projectAvail } = this.props;
-    const projectId = this.props.metadata.project_id;
-    const canDownload = canUserDownload(user, projectAvail, projectId);
-    let downloadButton = null;
-    if (canDownload) {
-      downloadButton = (
-        <button
-          onClick={this.props.onDownloadFile}
-          className='button-primary-orange'
-        >
-          {DOWNLOAD_BTN_CAPTION}
-        </button>);
-    }
+      const { user, projectAvail } = this.props;
+      const projectId = this.props.metadata.project_id;
+      const canDownload = canUserDownload(user, projectAvail, projectId);
+      let downloadButton = null;
+      if (canDownload) {
+        downloadButton = (
+          <button
+            onClick={this.props.onDownloadFile}
+            className='button-primary-orange'
+          >
+            {DOWNLOAD_BTN_CAPTION}
+          </button>);
+      }
 
-    const properties = `${this.props.metadata.data_format} | ${fileSizeTransform(this.props.metadata.file_size)} | ${this.props.metadata.object_id} | ${this.dateTransform(this.props.metadata.updated_datetime)}`;
+      const properties = `${this.props.metadata.data_format} | ${fileSizeTransform(this.props.metadata.file_size)} | ${this.props.metadata.object_id} | ${this.dateTransform(this.props.metadata.updated_datetime)}`;
 
-    return (
-      <div className='body-typo'>
-        <p className='h3-typo'>
-          {this.props.metadata.file_name}
-          <br />
-          {fileTypeTransform(this.props.metadata.type)}
-        </p>
-        <p className='body-typo'>{this.props.metadata.description}</p>
-        { downloadButton }
-        <div className='body-typo'>{properties}</div>
-      </div>
-    );
-  }
+      return (
+        <div className='body-typo'>
+          <p className='h3-typo'>
+            {this.props.metadata.file_name}
+            <br />
+            {fileTypeTransform(this.props.metadata.type)}
+          </p>
+          <p className='body-typo'>{this.props.metadata.description}</p>
+          { downloadButton }
+          <div className='body-typo'>{properties}</div>
+        </div>
+      );
+    }
+
+    // if there is no core metadata to display
 
-  // if there is no core metadata to display
-  else {
     return (
-      <p className="body-typo">
+      <p className='body-typo'>
         Error: {this.props.error}
       </p>
     );
   }
-
-  }
 }
 
 CoreMetadataHeader.propTypes = {

src/CoreMetadata/CoreMetadataTable.jsx

@@ -1,14 +1,10 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import styled from 'styled-components';
 import Table from '../components/tables/base/Table';
+import './CoreMetadataTable.less';
 
 const TABLE_TITLE = 'More Data Info';
 
-export const TitleCell = styled.div`
-  font-weight: bold;
-`;
-
 function firstCharToUppercase(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
@@ -22,15 +18,15 @@ function fieldInTable(fieldName) {
 }
 
 class CoreMetadataTable extends Component {
-  dataTransform = metadata => metadata ?
+  dataTransform = metadata => (metadata ?
     Object.keys(metadata)
       .sort() // alphabetical order
       .filter(key => fieldInTable(key))
       .map(key => [
-        <TitleCell>{firstCharToUppercase(key)}</TitleCell>,
+        <div className='core-metadata-table__title-cell'>{firstCharToUppercase(key)}</div>,
         metadata[key],
       ])
-    : [];
+    : []);
 
   render() {
     return (

src/CoreMetadata/CoreMetadataTable.less

@@ -0,0 +1,3 @@
+.core-metadata-table__title-cell {
+  font-weight: bold;
+}

src/CoreMetadata/page.jsx

@@ -1,31 +1,19 @@
 import React, { Component } from 'react';
-import styled from 'styled-components';
 import BackLink from '../components/BackLink';
 import { ReduxCoreMetadataHeader, ReduxFileTypePicture, ReduxCoreMetadataTable } from './reduxer';
 import dictIcons from '../img/icons/file-icons/file-icons';
-
-export const ColumnL = styled.div`
-  float: left;
-  width: 50%;
-  padding: 20px 25px 20px 0px;
-`;
-
-export const ColumnR = styled.div`
-  float: left;
-  width: 50%;
-  padding: 20px 0px 20px 25px;
-`;
+import './page.less';
 
 class CoreMetadataPage extends Component {
   render() {
     return (
       <div>
         <BackLink url='/files' label='Back to data overview' />
         <div>
-          <ColumnL>
+          <div className='core-metadata-page__column core-metadata-page__column--left'>
             <ReduxFileTypePicture dictIcons={dictIcons} />
-          </ColumnL>
-          <ColumnR><ReduxCoreMetadataHeader /></ColumnR>
+          </div>
+          <div className='core-metadata-page__column core-metadata-page__column--right'><ReduxCoreMetadataHeader /></div>
         </div>
         <ReduxCoreMetadataTable />
       </div>

src/CoreMetadata/page.less

@@ -0,0 +1,12 @@
+.core-metadata-page__column {
+  float: left;
+  width: 50%;
+}
+
+.core-metadata-page__column--left {
+  padding: 20px 25px 20px 0;
+}
+
+.core-metadata-page__column--right {
+  padding: 20px 0 20px 25px;
+}

src/DataExplorer/DataExplorerVisualizations.jsx

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { CurrentSQON } from '@arranger/components/dist/Arranger';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import DataExplorerTable from '../components/tables/DataExplorerTable';
-import SummaryChartGroup from '../components/charts/SummaryChartGroup';
-import PercentageStackedBarChart from '../components/charts/PercentageStackedBarChart';
-import DataSummaryCardGroup from '../components/cards/DataSummaryCardGroup';
+import SummaryChartGroup from '../components/charts/SummaryChartGroup/.';
+import PercentageStackedBarChart from '../components/charts/PercentageStackedBarChart/.';
+import DataSummaryCardGroup from '../components/cards/DataSummaryCardGroup/.';
 import { getCharts } from '../components/charts/helper';
 import { localTheme } from '../localconf';
 

src/Explorer/ExplorerSideBar.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { StyledCheckBoxGroup } from '../components/CheckBox';
-import { ExplorerSidebarStyle } from './style';
+import { CheckBoxGroup } from '../components/CheckBox';
+import './ExplorerSideBar.less';
 
 class ExplorerSideBar extends Component {
   static propTypes = {
@@ -46,34 +46,30 @@ class ExplorerSideBar extends Component {
     const fileTypes = Array.from(this.aggregateProperties(this.props.dictionary, 'data_file', 'data_type').values()).sort();
     const fileFormats = Array.from(this.aggregateProperties(this.props.dictionary, 'data_file', 'data_format').values()).sort();
 
-
-    // console.log(this.props.selected_filters);
-
     return (
-      <ExplorerSidebarStyle>
-        <StyledCheckBoxGroup
+      <div className='explorer-side-bar'>
+        <CheckBoxGroup
           listItems={projects}
           title='Projects'
           selectedItems={this.props.selectedFilters.projects}
           groupName='projects'
           onChange={state => this.props.onChange({ ...this.props.selectedFilters, ...state })}
         />
-        <StyledCheckBoxGroup
+        <CheckBoxGroup
           listItems={fileFormats}
           selectedItems={this.props.selectedFilters.file_formats}
           title='File Formats'
           groupName='file_formats'
           onChange={state => this.props.onChange({ ...this.props.selectedFilters, ...state })}
         />
-        <StyledCheckBoxGroup
+        <CheckBoxGroup
           listItems={fileTypes}
           selectedItems={this.props.selectedFilters.file_types}
           title='File Types'
           groupName='file_types'
-          lastChild
           onChange={state => this.props.onChange({ ...this.props.selectedFilters, ...state })}
         />
-      </ExplorerSidebarStyle>
+      </div>
     );
   }
 }

src/Explorer/ExplorerSideBar.less

@@ -0,0 +1,12 @@
+@explorer-table-bar-color: white;
+
+.explorer-side-bar {
+  float: left;
+  width: 25%;
+  font-size: 15px;
+  background: @explorer-table-bar-color;
+  margin-right: 2em;
+  padding: 0 2em;
+  border: 2px solid #a9a9a9;
+  border-radius: 5px;
+}

src/Explorer/ExplorerTabPanel.jsx

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-import { ExplorerTabs, ExplorerTab, ExplorerTabBox, ExplorerTabFrame } from './style';
 import ExplorerTableComponent from './ExplorerTable';
 import { capitalizeFirstLetter } from '../utils';
+import './ExplorerTabPanel.less';
 
 class ExplorerTabPanel extends Component {
   static propTypes = {
@@ -56,33 +56,41 @@ class ExplorerTabPanel extends Component {
 
   render() {
     const originalPages = this.updateOriginalPage();
-    const flexItem = {
-      flexBasis: '80%',
-      flexGrow: 1,
-    };
     return (
-      <div style={flexItem}>
-        <ExplorerTabs>
+      <div className='explorer-tab-panel'>
+        <div className='explorer-tab-panel__tab-group'>
           {
             Object.keys(this.props.filesMap).map(
               item => (this.props.filesMap[item].length > 0) &&
-              <ExplorerTab
+              <div
+                role='button'
+                tabIndex={-1}
+                className={item === this.props.activeTab
+                  ? 'explorer-tab-panel__tab-item explorer-tab-panel__tab-item--active'
+                  : 'explorer-tab-panel__tab-item'}
                 key={item}
-                active={(item === this.props.activeTab)}
+                active={item === this.props.activeTab ? 'true' : 'false'}
                 onClick={
                   () => this.props.onTabChange({ activeTab: item })
                 }
               >
                 {capitalizeFirstLetter(item)}
-              </ExplorerTab>)
+              </div>)
           }
-        </ExplorerTabs>
-        <ExplorerTabFrame>
+        </div>
+        <div className='explorer-tab-panel__frame'>
           {
             Object.keys(this.props.filesMap).map(
               item =>
                 (this.props.filesMap[item].length > 0)
-                && <ExplorerTabBox key={`${item}-tab-box`} active={(item === this.props.activeTab)}>
+                &&
+                <div
+                  className={item === this.props.activeTab
+                    ? 'explorer-tab-panel__tab-box--active'
+                    : 'explorer-tab-panel__tab-box--inactive'}
+                  key={`${item}-tab-box`}
+                  active={item === this.props.activeTab ? 'true' : 'false'}
+                >
                   <ExplorerTableComponent
                     user={this.props.user}
                     projectAvail={this.props.projectAvail}
@@ -136,10 +144,10 @@ class ExplorerTabPanel extends Component {
                       )
                     }
                   />
-                </ExplorerTabBox>,
+                </div>,
             )
           }
-        </ExplorerTabFrame>
+        </div>
       </div>
     );
   }

src/Explorer/ExplorerTabPanel.less

@@ -0,0 +1,44 @@
+@explorer-table-bar-color: white;
+
+.explorer-tab-panel {
+  flex-basis: 80%;
+  flex-grow: 1;
+}
+
+.explorer-tab-panel__tab {
+  z-index: 1;
+  position: relative;
+}
+
+.explorer-tab-panel__tab-item {
+  display: inline-block;
+  cursor: pointer;
+  padding: 10px;
+  font-size: 15px;
+  outline: none;
+}
+
+.explorer-tab-panel__tab-item--active {
+  background-color: white;
+  border: 2px solid #a9a9a9;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.explorer-tab-panel__tab-box--inactive {
+  display: none;
+}
+
+.explorer-tab-panel__tab-box--active {
+  display: block;
+}
+
+.explorer-tab-panel__frame {
+  display: inline-block;
+  position: relative;
+  margin-top: -1px;
+  margin-left: 0;
+  background: @explorer-table-bar-color;
+  width: 100%;
+  border: 2px solid #a9a9a9;
+}

src/Explorer/ReduxExplorer.test.jsx

@@ -6,7 +6,7 @@ import { ThemeProvider } from 'styled-components';
 import { StaticRouter } from 'react-router-dom';
 
 import getReduxStore from '../reduxStore';
-import { theme } from '../theme';
+import theme from '../theme';
 import { changePageSize, changePage } from './ReduxExplorer';
 import * as testData from './__test__/data.json';
 import * as testExpected from './__test__/expected.json';