fix(css): remove styled component from theme.js

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);
 }
@@ -27,7 +23,7 @@ class CoreMetadataTable extends Component {
       .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],
       ])
     : []);

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/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,43 @@
+@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;
+}
+
+.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';

src/QueryNode/QueryForm.less

@@ -19,4 +19,13 @@
   width: 40%;
   float: left;
   margin-right: 1em;
-}
+}
+
+.query-form__input {
+  transition: 0.25s;
+  border: 1px solid #c1c1c1;
+  line-height: 34px;
+  margin-right: 1em;
+  padding: 0 0.5em;
+  border-radius: 5px;
+}

src/components/BackLink.jsx

@@ -1,28 +1,23 @@
 import { Link } from 'react-router-dom';
 import React, { Component } from 'react';
-import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import dictIcons from '../img/icons/index';
 import IconComponent from '../components/Icon';
-
-export const BackComponent = styled.div`
-  display: inline;
-  padding-right: 15px;
-`;
+import './BackLink.less';
 
 class BackLink extends Component {
   render() {
     return (
       <Link to={this.props.url}>
         <br />
-        <BackComponent>
+        <div className='back-link'>
           <IconComponent
             dictIcons={dictIcons}
             iconName='back'
             height='12px'
           />
-        </BackComponent>
-        <BackComponent>{this.props.label}</BackComponent>
+        </div>
+        <div className='back-link'>{this.props.label}</div>
       </Link>
     );
   }

src/components/BackLink.less

@@ -0,0 +1,4 @@
+.back-link {
+  display: inline;
+  padding-right: 15px;
+}