fix(css): css refactor 4/4

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,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { StyledCheckBoxGroup } from '../components/CheckBox';
+import { CheckBoxGroup } from '../components/CheckBox';
 import { ExplorerSidebarStyle } from './style';
 
 class ExplorerSideBar extends Component {
@@ -46,31 +46,27 @@ 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
+        <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
+          title="File Types"
+          groupName="file_types"
           onChange={state => this.props.onChange({ ...this.props.selectedFilters, ...state })}
         />
       </ExplorerSidebarStyle>

src/QueryNode/QueryNode.jsx

@@ -1,36 +1,11 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import styled, { css } from 'styled-components';
+import Select from 'react-select';
 import PropTypes from 'prop-types';
-
 import { jsonToString, getSubmitPath } from '../utils';
 import Popup from '../components/Popup';
 import QueryForm from './QueryForm';
-
-const actionButton = css`
-  cursor: pointer;
-  float: right;
-  display: inline-block;
-  margin-left: 2em;
-  &:hover,
-  &:active,
-  &:focus {
-    color: inherit;
-  }
-`;
-
-const DownloadButton = styled.a`
-   ${actionButton};
-`;
-
-const DeleteButton = styled.a`
-  ${actionButton};
-  color: ${props => props.theme.color_primary};
-`;
-const ViewButton = styled.a`
-  ${actionButton};
-  color: #2B547E;
-`;
+import './QueryNode.less';
 
 const Entity = ({ value, project, onUpdatePopup, onStoreNodeInfo }) => {
   const onDelete = () => {
@@ -44,9 +19,9 @@ const Entity = ({ value, project, onUpdatePopup, onStoreNodeInfo }) => {
   return (
     <li>
       <span>{value.submitter_id}</span>
-      <DownloadButton href={`${getSubmitPath(project)}/export?format=json&ids=${value.id}`}>Download</DownloadButton>
-      <ViewButton onClick={onView}>View</ViewButton>
-      <DeleteButton onClick={onDelete}>Delete</DeleteButton>
+      <a className="query-node__button query-node__button--download" href={`${getSubmitPath(project)}/export?format=json&ids=${value.id}`}>Download</a>
+      <a className="query-node__button query-node__button--view" onClick={onView}>View</a>
+      <a className="query-node__button query-node__button--delete" onClick={onDelete}>Delete</a>
     </li>
   );
 };

src/QueryNode/QueryNode.less

@@ -0,0 +1,52 @@
+.query-node__search-button {
+  transition: 0.25s;
+  color: white;
+  margin-bottom: 1em;
+  background-color: #008000;
+  border: 1px solid #008000;
+  line-height: 34px;
+  padding: 0em 0.5em;
+}
+
+.query-node__search-button:hover,
+.query-node__search-button:active,
+.query-node__search-button:focus {
+  background-color: #159915;
+  border: 1px solid #159915;
+}
+
+.query-node__button {
+  cursor: pointer;
+  float: right;
+  display: inline-block;
+  margin-left: 2em;
+}
+
+.query-node__button:hover,
+.query-node__button:active,
+.query-node__button:focus {
+  color: inherit;
+}
+
+.query-node__button--delete {
+  color: #800000;
+}
+
+.query-node__button--view {
+  color: #2B547E;
+}
+
+.query-node__input {
+  transition: 0.25s;
+  border: 1px solid #c1c1c1;
+  line-height: 34px;
+  margin-right: 1em;
+  padding: 0em 0.5em;
+  border-radius: 5px;
+}
+
+.query-node__select {
+  width: 40%;
+  float: left;
+  margin-right: 1em;
+}

src/components/CheckBox.jsx

@@ -1,25 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { Label } from '../theme';
-
-const LabelCheckBox = styled(Label)`
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    min-width: 0px;
-    max-width: 12vw;
-    overflow: hidden;
-    padding: 0px 0.25rem;
-    margin-left: 0.3rem;
-    vertical-align: middle;
-    line-height: 1.75
-`;
-
-const CheckBox = styled.div`
-   padding: 1em 0em;
-   border-bottom: ${props => (props.lastChild ? '0px' : '2px solid #7d7474')};
-`;
-
+import './CheckBox.less';
 
 export class CheckBoxGroup extends Component {
   static propTypes = {
@@ -28,12 +10,8 @@ export class CheckBoxGroup extends Component {
     selectedItems: PropTypes.array.isRequired,
     title: PropTypes.string.isRequired,
     onChange: PropTypes.func.isRequired,
-    lastChild: PropTypes.bool,
   };
 
-  static defaultProps = {
-    lastChild: false,
-  };
   constructor(props) {
     super(props);
     this.state = {
@@ -80,7 +58,7 @@ export class CheckBoxGroup extends Component {
       : this.props.listItems;
 
     return (
-      <CheckBox lastChild={this.props.lastChild}>
+      <div className="checkbox">
         {this.props.title}
         {listItems.map(item => (
           <div key={item}>
@@ -92,16 +70,13 @@ export class CheckBoxGroup extends Component {
               checked={selectedItems.includes(item)}
               onChange={() => this.onChangeBox(item)}
             />
-            <LabelCheckBox for={item}>{item}</LabelCheckBox>
+            <label className="checkbox-label" for={item}>{item}</label>
           </div>
         ))}
         {this.displayOptions()}
-      </CheckBox>
+      </div>
     );
   }
 }
 
-export const StyledCheckBoxGroup = styled(CheckBoxGroup)`
-    padding: 0em 1em;
-    border-bottom: 2px solid #717b85;
-`;
+export default CheckBoxGroup;

src/components/CheckBox.less

@@ -0,0 +1,21 @@
+.checkbox {
+  padding: 1em 0em;
+  border-bottom: 2px solid #7d7474;
+}
+
+.checkbox:last-child {
+  border-bottom: 0;
+}
+
+.checkbox-label {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-width: 0px;
+  max-width: 12vw;
+  overflow: hidden;
+  padding: 0px 0.25rem;
+  margin-left: 3px 3px 3px 0.3rem;
+  vertical-align: middle;
+  line-height: 1.75;
+  display:inline-block;
+}

src/components/IndexButtonBar.jsx

@@ -1,60 +1,8 @@
 import React, { Component } from 'react';
-import styled from 'styled-components';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import IconComponent from './Icon';
-
-const IndexThumbnailButton = styled.div`
-  background-color: white;
-  display: inline-block;
-  height: 360px;
-  padding: 20px 20px;
-  text-align: center;
-  width: 290px;
-  margin-left: 20px;
-  border: 1px solid #e7e7e7;
-  border-radius: 4px;
-  &:first-child {
-    margin-left: 0px;
-  }
-  position: relative;
-`;
-
-
-const IndexIcon = styled.div`
-  vertical-align: middle;
-  padding-left: 4px;
-`;
-
-const BarItem = styled(Link)`
-  position: absolute;
-  left: 0;
-  right: 0;
-  margin-left: auto;
-  margin-right: auto;
-  bottom: 30px;
-`;
-
-const BarItemA = styled.a`
-  position: absolute;
-  left: 0;
-  right: 0;
-  margin-left: auto;
-  margin-right: auto;
-  bottom: 30px;
-`;
-
-const ThumbnailTitle = styled.div`
-  margin-bottom: 15px;
-`;
-
-const ThumbnailText = styled.div`
-  margin-top: 30px;
-  border-top: 1px solid #e7e7e7;
-  padding: 10px 10px;
-  text-align: left;
-`;
-
+import './IndexButtonBar.less';
 
 /**
  * NavBar renders row of nav-items of form { name, icon, link }
@@ -63,40 +11,40 @@ const ThumbnailText = styled.div`
 class IndexButtonBar extends Component {
   render() {
     return (
-      <div style={{ display: 'flex', padding: '40px 0px 0px 0px' }}>
+      <div className="index-button-bar">
         {
           this.props.buttons.map(
             item => (
-              <IndexThumbnailButton key={item.name}>
-                <ThumbnailTitle className='h3-typo'>{item.name}</ThumbnailTitle>
-                <IndexIcon>
+              <div className="index-button-bar__thumbnail-button" key={item.name}>
+                <div className="h3-typo index-button-bar__thumbnail-title">{item.name}</div>
+                <div className="index-button-bar__icon">
                   <IconComponent
                     dictIcons={this.props.dictIcons}
                     iconName={item.icon}
                     height='90px'
                   />
-                </IndexIcon>
-                <ThumbnailText className='body-typo'>{item.body}</ThumbnailText>
+                </div>
+                <div className="body-typo index-button-bar__thumbnail-text">{item.body}</div>
                 {
                   item.link.startsWith('http') ?
-                    <BarItemA href={item.link}>
+                    <a className="index-button-bar__item" href={item.link}>
                       <button
                         className='button-primary-orange'
                         onClick={() => this.props.onActiveTab(item.link)}
                       >
                         {item.label}
                       </button>
-                    </BarItemA> :
-                    <BarItem to={item.link}>
+                    </a> :
+                    <Link className="index-button-bar__item" to={item.link}>
                       <button
                         className='button-primary-orange'
                         onClick={() => this.props.onActiveTab(item.link)}
                       >
                         {item.label}
                       </button>
-                    </BarItem>
+                    </Link>
                 }
-              </IndexThumbnailButton>
+              </div>
             ),
           )
         }