diff --git a/src/CoreMetadata/CoreMetadataHeader.jsx b/src/CoreMetadata/CoreMetadataHeader.jsx index 7c13fbde6c..4eb50eadff 100644 --- a/src/CoreMetadata/CoreMetadataHeader.jsx +++ b/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 = ( - ); - } + const { user, projectAvail } = this.props; + const projectId = this.props.metadata.project_id; + const canDownload = canUserDownload(user, projectAvail, projectId); + let downloadButton = null; + if (canDownload) { + downloadButton = ( + ); + } - 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 ( -
-

- {this.props.metadata.file_name} -
- {fileTypeTransform(this.props.metadata.type)} -

-

{this.props.metadata.description}

- { downloadButton } -
{properties}
-
- ); - } + return ( +
+

+ {this.props.metadata.file_name} +
+ {fileTypeTransform(this.props.metadata.type)} +

+

{this.props.metadata.description}

+ { downloadButton } +
{properties}
+
+ ); + } + + // if there is no core metadata to display - // if there is no core metadata to display - else { return ( -

+

Error: {this.props.error}

); } - - } } CoreMetadataHeader.propTypes = { diff --git a/src/CoreMetadata/CoreMetadataTable.jsx b/src/CoreMetadata/CoreMetadataTable.jsx index 8051cf67e1..157c7d1380 100644 --- a/src/CoreMetadata/CoreMetadataTable.jsx +++ b/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 => [ - {firstCharToUppercase(key)}, +
{firstCharToUppercase(key)}
, metadata[key], ]) - : []; + : []); render() { return ( diff --git a/src/CoreMetadata/CoreMetadataTable.less b/src/CoreMetadata/CoreMetadataTable.less new file mode 100644 index 0000000000..f14f65b6cc --- /dev/null +++ b/src/CoreMetadata/CoreMetadataTable.less @@ -0,0 +1,3 @@ +.core-metadata-table__title-cell { + font-weight: bold; +} diff --git a/src/CoreMetadata/page.jsx b/src/CoreMetadata/page.jsx index b57d417e2d..004e5e78e0 100644 --- a/src/CoreMetadata/page.jsx +++ b/src/CoreMetadata/page.jsx @@ -1,20 +1,8 @@ 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() { @@ -22,10 +10,10 @@ class CoreMetadataPage extends Component {
- +
- - +
+
diff --git a/src/CoreMetadata/page.less b/src/CoreMetadata/page.less new file mode 100644 index 0000000000..a4c4d69d9b --- /dev/null +++ b/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; +} diff --git a/src/DataExplorer/DataExplorerVisualizations.jsx b/src/DataExplorer/DataExplorerVisualizations.jsx index 6e203ad03f..c503a2a59d 100644 --- a/src/DataExplorer/DataExplorerVisualizations.jsx +++ b/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'; diff --git a/src/DataModelGraph/ToggleButton.jsx b/src/DataModelGraph/ToggleButton.jsx deleted file mode 100644 index f09e9839e1..0000000000 --- a/src/DataModelGraph/ToggleButton.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import styled from 'styled-components'; - -const ToggleButton = styled.a` - top:15px; - left:20px; -`; - - -export default ToggleButton; diff --git a/src/Explorer/ExplorerSideBar.jsx b/src/Explorer/ExplorerSideBar.jsx index 06872bf3b0..2267acc6ea 100644 --- a/src/Explorer/ExplorerSideBar.jsx +++ b/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 ( - - + this.props.onChange({ ...this.props.selectedFilters, ...state })} /> - this.props.onChange({ ...this.props.selectedFilters, ...state })} /> - this.props.onChange({ ...this.props.selectedFilters, ...state })} /> - + ); } } diff --git a/src/Explorer/ExplorerSideBar.less b/src/Explorer/ExplorerSideBar.less new file mode 100644 index 0000000000..9e84cca995 --- /dev/null +++ b/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; +} diff --git a/src/Explorer/ExplorerTabPanel.jsx b/src/Explorer/ExplorerTabPanel.jsx index 3cf7cd78b2..f8a7acb693 100644 --- a/src/Explorer/ExplorerTabPanel.jsx +++ b/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 ( -
- +
+
{ Object.keys(this.props.filesMap).map( item => (this.props.filesMap[item].length > 0) && - this.props.onTabChange({ activeTab: item }) } > {capitalizeFirstLetter(item)} - ) +
) } - - +
+
{ Object.keys(this.props.filesMap).map( item => (this.props.filesMap[item].length > 0) - && + && +
- , +
, ) } - +
); } diff --git a/src/Explorer/ExplorerTabPanel.less b/src/Explorer/ExplorerTabPanel.less new file mode 100644 index 0000000000..5dd3997997 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/Explorer/ReduxExplorer.test.jsx b/src/Explorer/ReduxExplorer.test.jsx index d5d5f749f7..7b2ff1c798 100644 --- a/src/Explorer/ReduxExplorer.test.jsx +++ b/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'; diff --git a/src/Explorer/style.js b/src/Explorer/style.js deleted file mode 100644 index a11f32ecb1..0000000000 --- a/src/Explorer/style.js +++ /dev/null @@ -1,121 +0,0 @@ -import styled from 'styled-components'; -import { TableRow, Sidebar } from '../theme'; - -export const Cell = styled.td` - padding: 0.25rem 0px 0.25rem 0.5em; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -`; - -const ExplorerTableBarColor = '#ffffff'; - -export const TableData = styled.td` - max-width: 10vw; - width: ${props => (props.c_width ? props.c_width : '20%')}; - background: ${props => (props.first_cr ? ExplorerTableBarColor : 'white')}; - color: ${props => (props.first_cr ? 'white' : '#222')}; - display: table-cell; - padding: 1rem 1rem; - height: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -`; - -export const TableHeadCell = styled(TableData)` - background: ${ExplorerTableBarColor}; - color: '#000000'; -`; - -export const TableFootCell = styled(TableData)` - background: ${ExplorerTableBarColor}; - color: '#000000'; - text-align: center; - overflow: visible; -`; - -export const ExplorerSidebarStyle = styled(Sidebar)` - width: 25%; - font-size: 15px; - background: ${ExplorerTableBarColor}; - margin-right: 2em; - padding: 0em 2em; - border: 2px solid #a9a9a9; - border-radius: 5px; -`; - -export const TableFooter = styled.tfoot` - background: ${ExplorerTableBarColor}; - color: white; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - text-align: center; -`; - -const ActivePageButtonColor = '#71594d'; - -export const PageButton = styled.button` - width: 30px; - height: 30px; - border: 0px; - background: ${props => (props.active ? ActivePageButtonColor : ExplorerTableBarColor)}; - color: ${props => (props.active ? 'white' : '#000000')}; - outline: none; - padding: 0.1rem; -`; - -export const ArrowButton = styled.button` - width: 100%; - height: 100%; - background: ${ExplorerTableBarColor}; - color: '#000000'; - outline: none; - padding: 0.1rem; -`; - -export const ExplorerTabs = styled.div` - z-index: 1; - position: relative; -`; - -export const ExplorerTab = styled.div` - display: inline-block; - background-color: ${props => (props.active ? 'white' : 'none')}; - cursor:pointer; - padding: 10px; - font-size: 15px; - border: ${props => (props.active ? '2px solid #a9a9a9' : '0px')}; - border-bottom: 0px; - border-top-left-radius: ${props => (props.active ? '5px' : '0px')}; - border-top-right-radius: ${props => (props.active ? '5px' : '0px')}; -} -`; - -export const ExplorerTabFrame = styled.div` - display: inline-block; - position: relative; - margin-top: -1px; - margin-left:0px; - background: ${ExplorerTableBarColor}; - width: 100%; - border: 2px solid #a9a9a9; -`; - -export const ExplorerTabBox = styled.div` - display:${props => (props.active ? 'block' : 'none')}; -`; - -export const ExplorerTableRow = styled.tr` - ${TableRow}; - overflow: visible; -`; diff --git a/src/Index/reduxer.jsx b/src/Index/reduxer.jsx index 958f740d80..49d8b760f9 100644 --- a/src/Index/reduxer.jsx +++ b/src/Index/reduxer.jsx @@ -3,7 +3,7 @@ import { sortCompare } from '../utils'; import { localTheme } from '../localconf'; import dictIcons from '../img/icons'; import { setActive } from '../Top/reduxer'; -import IndexBarChart from '../components/charts/IndexBarChart'; +import IndexBarChart from '../components/charts/IndexBarChart/.'; import IndexButtonBar from '../components/IndexButtonBar'; import { components } from '../params'; diff --git a/src/QueryNode/QueryForm.jsx b/src/QueryNode/QueryForm.jsx index 5323c40e34..cb6a52a91f 100644 --- a/src/QueryNode/QueryForm.jsx +++ b/src/QueryNode/QueryForm.jsx @@ -1,39 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import styled from 'styled-components'; import Select from 'react-select'; - -const SearchButton = styled.input` - transition: 0.25s; - color: white; - margin-bottom: 1em; - background-color: ${props => props.theme.color_secondary}; - border: 1px solid ${props => props.theme.color_secondary}; - line-height: 34px; - &:hover, - &:active, - &:focus { - background-color: ${props => props.theme.color_secondary_fade}; - border: 1px solid ${props => props.theme.color_secondary_fade}; - - } - padding: 0em 0.5em; -`; - -const Dropdown = styled(Select)` - width: 40%; - float: left; - margin-right: 1em; -`; - -const Input = styled.input` - transition: 0.25s; - border: 1px solid #c1c1c1; - line-height: 34px; - margin-right: 1em; - padding: 0em 0.5em; - border-radius: 5px; -`; +import './QueryForm.less'; class QueryForm extends React.Component { static propTypes = { @@ -79,9 +47,9 @@ class QueryForm extends React.Component { const state = this.state || {}; return (
- - - + + ); } diff --git a/src/QueryNode/QueryForm.less b/src/QueryNode/QueryForm.less new file mode 100644 index 0000000000..1616fa8e01 --- /dev/null +++ b/src/QueryNode/QueryForm.less @@ -0,0 +1,31 @@ +.query-form__search-button { + transition: 0.25s; + color: white; + margin-bottom: 1em; + background-color: #008000; + border: 1px solid #008000; + line-height: 34px; + padding: 0 0.5em; +} + +.query-form__search-button:hover, +.query-form__search-button:active, +.query-form__search-button:focus { + background-color: #159915; + border: 1px solid #159915; +} + +.query-form__select { + 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; +} diff --git a/src/QueryNode/QueryNode.jsx b/src/QueryNode/QueryNode.jsx index b132f2e286..4360124145 100644 --- a/src/QueryNode/QueryNode.jsx +++ b/src/QueryNode/QueryNode.jsx @@ -1,38 +1,12 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import styled, { css } from 'styled-components'; import PropTypes from 'prop-types'; - import { jsonToString, getSubmitPath } from '../utils'; import Popup from '../components/Popup'; import QueryForm from './QueryForm'; +import './QueryNode.less'; -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; -`; - -const Entity = ({ value, project, onUpdatePopup, onStoreNodeInfo }) => { +const Entity = ({ value, project, onUpdatePopup, onStoreNodeInfo, tabindexStart }) => { const onDelete = () => { onStoreNodeInfo({ project, id: value.id }).then( () => onUpdatePopup({ nodedelete_popup: true }), @@ -44,9 +18,9 @@ const Entity = ({ value, project, onUpdatePopup, onStoreNodeInfo }) => { return (
  • {value.submitter_id} - Download - View - Delete + Download + View + Delete
    • ); }; @@ -54,6 +28,7 @@ const Entity = ({ value, project, onUpdatePopup, onStoreNodeInfo }) => { Entity.propTypes = { project: PropTypes.string.isRequired, value: PropTypes.object.isRequired, + tabindexStart: PropTypes.number.isRequired, onUpdatePopup: PropTypes.func, onStoreNodeInfo: PropTypes.func, }; @@ -69,12 +44,13 @@ const Entities = ({ value, project, onUpdatePopup, onStoreNodeInfo }) => (
      { value.map( - v => ( (), ) } @@ -98,7 +74,7 @@ Entities.defaultProps = { */ class QueryNode extends React.Component { /** - * Internal helper to render the "view node" popup if necessary + * Internal helper to render the 'view node" popup if necessary * based on the popups and queryNodes properties attached to this component. * * @param {popups, queryNodes, onUpdatePopup} props including diff --git a/src/QueryNode/QueryNode.less b/src/QueryNode/QueryNode.less new file mode 100644 index 0000000000..4d64a7f832 --- /dev/null +++ b/src/QueryNode/QueryNode.less @@ -0,0 +1,20 @@ +.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; +} diff --git a/src/components/BackLink.jsx b/src/components/BackLink.jsx index a759a2ef0a..e7cf772c25 100644 --- a/src/components/BackLink.jsx +++ b/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 (
      - +
      - - {this.props.label} +
      +
      {this.props.label}
      ); } diff --git a/src/components/BackLink.less b/src/components/BackLink.less new file mode 100644 index 0000000000..de9dcac792 --- /dev/null +++ b/src/components/BackLink.less @@ -0,0 +1,4 @@ +.back-link { + display: inline; + padding-right: 15px; +} diff --git a/src/components/CheckBox.jsx b/src/components/CheckBox.jsx index 2e29923bc2..576a5fda50 100644 --- a/src/components/CheckBox.jsx +++ b/src/components/CheckBox.jsx @@ -1,25 +1,6 @@ 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 +9,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 = { @@ -59,7 +36,7 @@ export class CheckBoxGroup extends Component { if (this.state.collapsed === 1) { return ( this.setState({ collapsed: 2 })}> - {'More Options'} + {'More options'} ); } else if (this.state.collapsed === 2) { @@ -80,7 +57,7 @@ export class CheckBoxGroup extends Component { : this.props.listItems; return ( - +
      {this.props.title} {listItems.map(item => (
      @@ -92,16 +69,13 @@ export class CheckBoxGroup extends Component { checked={selectedItems.includes(item)} onChange={() => this.onChangeBox(item)} /> - {item} +
      ))} {this.displayOptions()} - +
      ); } } -export const StyledCheckBoxGroup = styled(CheckBoxGroup)` - padding: 0em 1em; - border-bottom: 2px solid #717b85; -`; +export default CheckBoxGroup; diff --git a/src/components/CheckBox.less b/src/components/CheckBox.less new file mode 100644 index 0000000000..b3b8633fcc --- /dev/null +++ b/src/components/CheckBox.less @@ -0,0 +1,26 @@ +.checkbox-group { + padding: 1em 0; + border-bottom: 2px solid #7d7474; + margin-bottom: 0; + margin-top: 0; +} + +.checkbox-group:last-child { + border-bottom: 0; +} + +.checkbox-group__label { + white-space: nowrap; + text-overflow: ellipsis; + min-width: 0; + max-width: 12vw; + overflow: hidden; + padding: 0 0.25rem; + margin-left: 0.3rem; + margin-top: 3px; + margin-right: 3px; + margin-bottom: 3px; + vertical-align: middle; + line-height: 1.75; + display: inline-block; +} diff --git a/src/components/CircleButton.jsx b/src/components/CircleButton.jsx deleted file mode 100644 index f74082a178..0000000000 --- a/src/components/CircleButton.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import styled from 'styled-components'; -import IconButton from 'material-ui/IconButton'; - - -const CircleButton = styled(IconButton)` - background-color: #ebe7e5 !important; - border-radius: 50%; - margin-right: 20px !important; - margin-top: 10px !important; -`; - - -export default CircleButton; diff --git a/src/components/FileTypePicture.jsx b/src/components/FileTypePicture.jsx index 997cd6eebc..a46599b176 100644 --- a/src/components/FileTypePicture.jsx +++ b/src/components/FileTypePicture.jsx @@ -1,21 +1,7 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import styled from 'styled-components'; import IconComponent from '../components/Icon'; - -export const WhiteContainer = styled.div` - background-color: white; - border: 1px solid silver; - border-radius: 10px; - textAlign: center; -`; - -export const CenteredPicture = styled.div` - display: table; - margin: 0 auto; - padding-top: 50px; - padding-bottom: 50px; -`; +import './FileTypePicture.less'; function dataFormatToFileType(dictIcons, dataFormat) { const fileTypes = Object.keys(dictIcons); // list of available types @@ -25,19 +11,19 @@ function dataFormatToFileType(dictIcons, dataFormat) { class FileTypePicture extends Component { render() { - const dataFormat = this.props.metadata ? this.props.metadata.data_format : 'file' + const dataFormat = this.props.metadata ? this.props.metadata.data_format : 'file'; const fileType = dataFormatToFileType(this.props.dictIcons, dataFormat); if (!fileType) return null; const content = ( - - +
      +
      - - +
      +
      ); return (content); } diff --git a/src/components/FileTypePicture.less b/src/components/FileTypePicture.less new file mode 100644 index 0000000000..c920ddf302 --- /dev/null +++ b/src/components/FileTypePicture.less @@ -0,0 +1,13 @@ +.file-type-picture { + background-color: white; + border: 1px solid silver; + border-radius: 10px; + text-align: center; +} + +.file-type-picture__icon { + display: table; + margin: 0 auto; + padding-top: 50px; + padding-bottom: 50px; +} diff --git a/src/components/IndexButtonBar.jsx b/src/components/IndexButtonBar.jsx index 246af11c66..63f2107f40 100644 --- a/src/components/IndexButtonBar.jsx +++ b/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 ( -
      +
      { this.props.buttons.map( item => ( - - {item.name} - +
      +
      {item.name}
      +
      - - {item.body} +
      +
      {item.body}
      { item.link.startsWith('http') ? - + - : - + : + - + } - +
      ), ) } diff --git a/src/components/IndexButtonBar.less b/src/components/IndexButtonBar.less new file mode 100644 index 0000000000..833bfd7a5c --- /dev/null +++ b/src/components/IndexButtonBar.less @@ -0,0 +1,48 @@ +@import '~@gen3/ui-component/dist/css/base.less'; + +.index-button-bar { + display: flex; + padding: 40px 0 0 0; +} + +.index-button-bar__thumbnail-button { + background-color: white; + display: inline-block; + height: 360px; + padding: 20px 20px; + text-align: center; + width: 290px; + margin-left: 20px; + border: 1px solid @silver; + border-radius: 4px; + position: relative; +} + +.index-button-bar__thumbnail-button:first-child { + margin-left: 0; +} + +.index-button-bar__thumbnail-title { + margin-bottom: 15px; +} + +.index-button-bar__thumbnail-text { + margin-top: 30px; + border-top: 1px solid #e7e7e7; + padding: 10px 10px; + text-align: left; +} + +.index-button-bar__icon { + vertical-align: middle; + padding-left: 4px; +} + +.index-button-bar__item { + position: absolute; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + bottom: 30px; +} \ No newline at end of file diff --git a/src/components/Introduction.jsx b/src/components/Introduction.jsx index d337d3bebe..3f78345378 100644 --- a/src/components/Introduction.jsx +++ b/src/components/Introduction.jsx @@ -1,27 +1,7 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import styled from 'styled-components'; import IconicLink from './buttons/IconicLink'; - -const IntroDiv = styled.div` - width: 450px; - position: relative; -`; - -const IntroTitle = styled.div` - margin-bottom: 25px; - line-height: 1.0em; -`; - -const IntroText = styled.div` - padding: 10px 0px; - text-align: left; - - margin-left: auto; - margin-right: auto; - margin-top: 25px; - margin-bottom: 25px; -`; +import './Introduction.less'; class Introduction extends Component { static propTypes = { @@ -31,22 +11,18 @@ class Introduction extends Component { render() { return ( - - {this.props.data.heading} - {this.props.data.text} +
      +
      {this.props.data.heading}
      +
      {this.props.data.text}
      - +
      ); } } diff --git a/src/components/Introduction.less b/src/components/Introduction.less new file mode 100644 index 0000000000..d4ed29d801 --- /dev/null +++ b/src/components/Introduction.less @@ -0,0 +1,21 @@ +.introduction { + width: 450px; + position: relative; +} + +.introduction__title { + margin-bottom: 25px; + line-height: 1.0em; +} + +.introduction__text { + padding: 10px 0; + text-align: left; + margin: 25px auto 25px auto; +} + +.introduction__icon { + margin-left: auto; + margin-right: auto; + margin-bottom: 75px; +} diff --git a/src/components/Popup.jsx b/src/components/Popup.jsx index 4b06beddf9..477e14d4ad 100644 --- a/src/components/Popup.jsx +++ b/src/components/Popup.jsx @@ -1,70 +1,19 @@ import React from 'react'; -import styled from 'styled-components'; import PropTypes from 'prop-types'; import IconComponent from './Icon'; import IconicButton from '../components/buttons/IconicButton'; import dictIcons from '../img/icons/index'; - -export const PopupMask = styled.section` - z-index: 100; - position: fixed; - overflow-y: scroll; - top: 0px; - width: 100%; - height: 100%; - left: 0; - background: rgba(223, 223, 223, 0.47); - padding-top: 10em; -`; - -export const PopupBox = styled.section` - width: 50%; - overflow-y: scroll; - background: white; - margin: auto; - overflow: hidden; - border-radius: 8px; - border: 1px solid #9b9b9b; -`; - -export const PopupTitleBar = styled.div` - width: 100%; - height: 70px; - line-height: 70px; - padding: 0px 30px; - background: #3283c8; - color: #ffffff; - display: table; -`; - -export const Btn = styled.div` - float: right; - display: table-cell; - &:hover { - cursor: pointer; - } -`; - -export const Message = styled.div` - font-size: 1em; - background: mid_light_gray; - padding: 40px 30px 18px 30px; -`; - - -export const Error = styled.h6` - color: red; -`; +import './Popup.less'; const Popup = ({ title, message, lines, error, iconName, leftButtons, rightButtons, onClose, }) => ( - - - -
      +
      +
      +
      +
      { iconName !== '' && } -
      {title}
      +
      {title}
      { onClose && - +
      - +
      } - - +
      +
      { message &&
      {message}
      } { lines.length > 0 && @@ -103,11 +52,11 @@ const Popup = ({ } } - { error && Error } + { error &&
      Error
      } { error && {error} } - -
      -
      +
      +
      +
      { leftButtons.map((btn, i) => [ i > 0 && ' ', @@ -128,7 +77,7 @@ const Popup = ({ ]) }
      -
      +
      { rightButtons.map((btn, i) => [ i > 0 && ' ', @@ -150,8 +99,8 @@ const Popup = ({ }
      - - +
      +
      ); const buttonType = PropTypes.shape({ diff --git a/src/components/Popup.less b/src/components/Popup.less new file mode 100644 index 0000000000..9ef2203b5b --- /dev/null +++ b/src/components/Popup.less @@ -0,0 +1,75 @@ +@import '~@gen3/ui-component/dist/css/base.less'; + +.popup__mask { + z-index: 100; + position: fixed; + overflow-y: scroll; + top: 0; + width: 100%; + height: 100%; + left: 0; + background: rgba(223, 223, 223, 0.47); + padding-top: 10em; +} + +.popup__box { + width: 50%; + overflow-y: scroll; + background: white; + margin: auto; + overflow: hidden; + border-radius: 8px; + border: 1px solid @light_gray; +} + +.popup__title { + width: 100%; + height: 70px; + line-height: 70px; + padding: 0 30px; + background: @blue; + color: #ffffff; + display: table; +} + +.popup__icon { + float: left; + display: table-cell; +} + +.popup__title-text { + display: inline-flex; +} + +.popup__close-button { + float: right; + display: table-cell; + outline: none; +} + +.popup__close-button:hover { + cursor: pointer; +} + +.popup__message { + font-size: 1em; + padding: 40px 30px 18px 30px; +} + +.popup__foot { + width: 100%; + padding: 0 30px 40px 30px; + margin-bottom: 40px; +} + +.popup__left-foot { + float: left; +} + +.popup__right-foot { + float: right; +} + +.popup__error { + color: red; +} diff --git a/src/components/ProjectDashboard.jsx b/src/components/ProjectDashboard.jsx index 612b7ab2d0..ef15f46d84 100644 --- a/src/components/ProjectDashboard.jsx +++ b/src/components/ProjectDashboard.jsx @@ -1,28 +1,18 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import styled from 'styled-components'; import DataSummaryCardGroup from './cards/DataSummaryCardGroup'; import ProjectTable from './tables/ProjectTable'; - -const DashTopDiv = styled.div` - height: 120px; - display: flex; -`; - -const Title = styled.div` - padding-top: 10px; - flex-basis: 460px; -`; +import './ProjectDashboard.less'; class ProjectDashboard extends Component { render() { const projectList = this.props.projectList || []; return ( -
      - - + <React.Fragment> + <div className='project-dashboard'> + <div className='h1-typo project-dashboard__title'> Data Submission Summary - +
      {/* */} - +
      -
      + ); } } diff --git a/src/components/ProjectDashboard.less b/src/components/ProjectDashboard.less new file mode 100644 index 0000000000..c1af01319b --- /dev/null +++ b/src/components/ProjectDashboard.less @@ -0,0 +1,9 @@ +.project-dashboard { + height: 120px; + display: flex; +} + +.project-dashboard__title { + padding-top: 10px; + flex-basis: 460px; +} diff --git a/src/components/SelectComponent.jsx b/src/components/SelectComponent.jsx index 0778ef7cde..07c1695665 100644 --- a/src/components/SelectComponent.jsx +++ b/src/components/SelectComponent.jsx @@ -1,32 +1,12 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import styled from 'styled-components'; import Select from 'react-select'; - +import './SelectComponent.less'; const makeDefaultSelectedState = value => ({ selectedValue: value, }); -export const SelectionDiv = styled.div` - font-size: 15px; - position: relative; - vertical-align: middle; - span { - vertical-align: middle; - margin-right: 10px; - } - - .Select-menu-outer { - top: auto; - bottom: 100%; - } -`; -const Dropdown = styled(Select)` - display: inline-block; - vertical-align: middle; -`; - export default class SelectComponent extends Component { static propTypes = { title: PropTypes.string, @@ -69,9 +49,10 @@ export default class SelectComponent extends Component { const options = this.props.values.map(value => ({ value, label: value })); return ( - - {this.props.title} - + {this.props.title} +