diff --git a/package.json b/package.json index 4c3275539..99b0e5d34 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "@dhis2/d2-i18n": "^1.1.0", "@dhis2/maps-gl": "^3.5.1", "@dhis2/prop-types": "^3.1.2", - "@dhis2/ui": "^8.4.15", + "@dhis2/ui": "^8.7.2", "classnames": "^2.2.6", "final-form-arrays": "^3.0.2", "react-final-form-arrays": "^3.1.3", diff --git a/src/App.module.css b/src/App.module.css index 4ad7b709a..fb623f818 100644 --- a/src/App.module.css +++ b/src/App.module.css @@ -14,6 +14,7 @@ body { .sidebar { grid-column: sidebar; background-color: var(--colors-grey200); + border-right: 1px solid var(--colors-grey400); height: 100%; } diff --git a/src/components/BasicOptions/BasicOptions.module.css b/src/components/BasicOptions/BasicOptions.module.css index 238b92a2c..a38a7a256 100644 --- a/src/components/BasicOptions/BasicOptions.module.css +++ b/src/components/BasicOptions/BasicOptions.module.css @@ -6,9 +6,9 @@ font-size: 18px; font-weight: 500; color: var(--colors-grey900); - margin-bottom: var(--spacers-dp4); + margin: 0 0 var(--spacers-dp4) 0; } .header { - margin: var(--spacers-dp8) 0; + margin: 0 0 var(--spacers-dp8) 0; } diff --git a/src/components/DatePicker/__snapshots__/DatePicker.test.js.snap b/src/components/DatePicker/__snapshots__/DatePicker.test.js.snap index 671589979..7738ea07f 100644 --- a/src/components/DatePicker/__snapshots__/DatePicker.test.js.snap +++ b/src/components/DatePicker/__snapshots__/DatePicker.test.js.snap @@ -7,18 +7,18 @@ exports[`matches snapshot 1`] = ` data-test="date-picker" >

A dry run tests the import settings without importing any data diff --git a/src/components/JobOverview/JobOverview.js b/src/components/JobOverview/JobOverview.js index 72b7cdf56..79bbdf1d5 100644 --- a/src/components/JobOverview/JobOverview.js +++ b/src/components/JobOverview/JobOverview.js @@ -7,7 +7,7 @@ import { TaskContext } from '../../contexts/index.js' import { categoryTypes } from '../../utils/tasks.js' import { JobSummary } from '../index.js' import { ChipContainer } from './ChipContainer.js' -import { categoryTypesObj, jobToPath } from './helper.js' +import { jobToPath } from './helper.js' import styles from './JobOverview.module.css' import { MenuLabel } from './MenuLabel/MenuLabel.js' @@ -65,6 +65,7 @@ const JobOverview = ({ {categoryTypes.map(({ key, importType, label }) => ( onChipClick(importType)} selected={activeTypes.includes(importType)} key={key} @@ -80,7 +81,6 @@ const JobOverview = ({ active={selectedJob && selectedJob.id === t.id} label={} onClick={() => setSelectedJob(t)} - icon={categoryTypesObj[t.importType].icon} /> ))} diff --git a/src/components/JobOverview/JobOverview.module.css b/src/components/JobOverview/JobOverview.module.css index 5d4c806b9..f810017af 100644 --- a/src/components/JobOverview/JobOverview.module.css +++ b/src/components/JobOverview/JobOverview.module.css @@ -1,13 +1,14 @@ .container { display: grid; - grid-gap: 20px; grid-template-rows: auto; grid-template-columns: 1fr; height: 100%; + border: 1px solid var(--colors-grey400); + background: var(--colors-white); } .chips { - margin-bottom: var(--spacers-dp4); + margin: var(--spacers-dp4); } .Menu { @@ -17,9 +18,17 @@ overflow: auto; } +.items { + border-right: 1px solid var(--colors-grey400); +} + +.summary { + padding: var(--spacers-dp16); +} + @media (min-width: 1200px) { .container { - grid-template-columns: [items] 350px [summary] minmax(0, 1fr); + grid-template-columns: [items] 320px [summary] minmax(0, 1fr); } .items { diff --git a/src/components/JobOverview/MenuLabel/MenuLabel.js b/src/components/JobOverview/MenuLabel/MenuLabel.js index 12619dde7..bc1ddcb74 100644 --- a/src/components/JobOverview/MenuLabel/MenuLabel.js +++ b/src/components/JobOverview/MenuLabel/MenuLabel.js @@ -1,4 +1,5 @@ import i18n from '@dhis2/d2-i18n' +import { Tag } from '@dhis2/ui' import PropTypes from 'prop-types' import React from 'react' import { jsDateToString } from '../../../utils/helper.js' @@ -10,18 +11,17 @@ const MenuLabel = ({ task }) => { className={styles.container} data-test={`job-overview-menu-label-${task.id}`} > -

- - {task.jobDetails.files[0].name} - -
- - {task.completed - ? i18n.t('Completed') - : i18n.t('In progress')}{' '} - +
+ {task.jobDetails.files[0].name} +
+
+ {task.completed ? ( + {i18n.t('Completed')} + ) : ( + {i18n.t('In progress')} + )}{' '} +

{jsDateToString(task.created)}

-
{jsDateToString(task.created)}
) } diff --git a/src/components/JobOverview/MenuLabel/MenuLabel.module.css b/src/components/JobOverview/MenuLabel/MenuLabel.module.css index 482d2577a..cce6f98ee 100644 --- a/src/components/JobOverview/MenuLabel/MenuLabel.module.css +++ b/src/components/JobOverview/MenuLabel/MenuLabel.module.css @@ -1,27 +1,28 @@ .container { display: flex; - align-items: center; - justify-content: space-between; -} - -.status { - min-width: 120px; + flex-direction: column; + gap: var(--spacers-dp8); } .filename { - display: inline-block; - width: 300px; - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.subtitle { + display: flex; + gap: var(--spacers-dp8); + align-items: center; +} + .date { - margin-left: 20px; + font-size: 13px; + color: var(--colors-grey700); + margin: 0; } @media (min-width: 1200px) { .filename { - width: 120px; + max-width: 290px; } } diff --git a/src/components/JobOverview/__test__/__snapshots__/JobOverview.test.js.snap b/src/components/JobOverview/__test__/__snapshots__/JobOverview.test.js.snap index 8722d2fae..7491f4cc9 100644 --- a/src/components/JobOverview/__test__/__snapshots__/JobOverview.test.js.snap +++ b/src/components/JobOverview/__test__/__snapshots__/JobOverview.test.js.snap @@ -7,23 +7,31 @@ exports[`MenuLabel matches snapshot 1`] = ` data-test="job-overview-menu-label-EcJpZjEcMfI" >
- - data1.json - -
- - Completed - + data1.json
- 2020-02-12 13:00:23 +
+ + Completed + +
+ +

+ 2020-02-12 13:00:23 +

diff --git a/src/components/JobOverview/__test__/__snapshots__/MenuLabel.test.js.snap b/src/components/JobOverview/__test__/__snapshots__/MenuLabel.test.js.snap index 9eca78679..e1d1d8554 100644 --- a/src/components/JobOverview/__test__/__snapshots__/MenuLabel.test.js.snap +++ b/src/components/JobOverview/__test__/__snapshots__/MenuLabel.test.js.snap @@ -7,23 +7,31 @@ exports[`matches snapshot 1`] = ` data-test="job-overview-menu-label-EcJpZjEcMfI" >
- - data1.json - -
- - Completed - + data1.json
- 2020-02-12 13:00:23 +
+ + Completed + +
+ +

+ 2020-02-12 13:00:23 +

diff --git a/src/components/JobSummary/JobSummary.module.css b/src/components/JobSummary/JobSummary.module.css index fcbba26e0..4a6cfe5cd 100644 --- a/src/components/JobSummary/JobSummary.module.css +++ b/src/components/JobSummary/JobSummary.module.css @@ -1,23 +1,23 @@ .container { - margin-bottom: 15px; + margin-bottom: var(--spacers-dp16); } .title { - font-family: Roboto; + font-size: 16px; + line-height: 19px; + font-weight: 500; margin: 0px; } .taskDetails { - margin: 6px 0px 0px; - font-size: 12px; + margin: var(--spacers-dp8) 0px var(--spacers-dp4); + font-size: 13px; line-height: 14px; - color: rgb(74, 87, 104); + color: var(--colors-grey700); } .tags { - margin-top: 6px; -} - -.tags > * { - margin-right: 6px; + display: flex; + gap: var(--spacers-dp4); + margin: var(--spacers-dp8) 0 0; } diff --git a/src/components/MoreOptions/MoreOptions.js b/src/components/MoreOptions/MoreOptions.js index 9b6e3bbfe..837d0aaab 100644 --- a/src/components/MoreOptions/MoreOptions.js +++ b/src/components/MoreOptions/MoreOptions.js @@ -38,7 +38,7 @@ const MoreOptions = ({

{label}

- + {!hidden && }
{!hidden && children}
diff --git a/src/components/MoreOptions/MoreOptions.module.css b/src/components/MoreOptions/MoreOptions.module.css index 0ef469731..e60c1e6b5 100644 --- a/src/components/MoreOptions/MoreOptions.module.css +++ b/src/components/MoreOptions/MoreOptions.module.css @@ -7,7 +7,15 @@ cursor: pointer; display: flex; align-items: center; - margin: var(--spacers-dp8) 0; + gap: var(--spacers-dp4); + margin: 0; + padding: var(--spacers-dp4) var(--spacers-dp8); + border-radius: 3px; + background: transparent; +} + +.header:hover { + background: var(--colors-grey200); } .label { @@ -21,11 +29,6 @@ margin-top: var(--spacers-dp4); } -.header svg { - margin-left: -3px; - margin-right: 5px; -} - .chevronHidden svg { transform: rotate(90deg); } diff --git a/src/components/MoreOptions/__snapshots__/MoreOptions.test.js.snap b/src/components/MoreOptions/__snapshots__/MoreOptions.test.js.snap index e2a8a1be3..924a75aa4 100644 --- a/src/components/MoreOptions/__snapshots__/MoreOptions.test.js.snap +++ b/src/components/MoreOptions/__snapshots__/MoreOptions.test.js.snap @@ -31,10 +31,6 @@ exports[`matches snapshot when not toggled 1`] = ` Advanced options -
{ const loadingEl = typeof loading == 'number' ? ( @@ -32,6 +33,7 @@ const Page = ({
@@ -78,6 +80,7 @@ Page.propTypes = { loading: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]), showFullSummaryTask: PropTypes.bool, summaryTask: PropTypes.object, + transparent: PropTypes.bool, } export { Page } diff --git a/src/components/Page/Page.module.css b/src/components/Page/Page.module.css index c43ccee95..2fce03dd0 100644 --- a/src/components/Page/Page.module.css +++ b/src/components/Page/Page.module.css @@ -7,35 +7,45 @@ } .content { + background: var(--colors-white); + border: 1px solid var(--colors-grey400); + border-radius: 3px; + padding: var(--spacers-dp16); + margin: 0 0 var(--spacers-dp24) 0; height: 100%; width: 100%; } .preBody { - margin-bottom: 25px; - padding: 10px; + margin-bottom: var(--spacers-dp16); + padding: var(--spacers-dp12); } .header { - margin: var(--spacers-dp24) 0; + margin: var(--spacers-dp16) 0; } .title { font-size: 24px; - font-weight: 700; - color: var(--colors-grey800); - margin: var(--spacers-dp12) 0; - line-height: 20px; + font-weight: 500; + color: var(--colors-grey900); + margin: 0 0 var(--spacers-dp4) 0; } .desc { font-size: 14px; color: var(--colors-grey700); - margin: 0 0; - line-height: 20px; + margin: 0; + line-height: 19px; } .loading { height: 100%; width: 100%; } + +.transparent .content { + background: transparent; + border: none; + padding: 0; +} diff --git a/src/components/Page/__snapshots__/Page.test.js.snap b/src/components/Page/__snapshots__/Page.test.js.snap index 766987a9d..085b6d726 100644 --- a/src/components/Page/__snapshots__/Page.test.js.snap +++ b/src/components/Page/__snapshots__/Page.test.js.snap @@ -562,10 +562,6 @@ exports[`matches snapshot when not loading and a mini summary task 1`] = ` View summary of recently started import job -