Merge pull request #1619 from dhis2/ui-adjustments

fix: interface adjustments
dhis2 · Jan 10, 2023 · 1976060 · 1976060
2 parents eb4545d + da281f0
commit 1976060
Show file tree

Hide file tree

Showing 33 changed files with 2,797 additions and 2,527 deletions.
diff --git 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
@@ -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
@@ -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
@@ -7,30 +7,30 @@ exports[`matches snapshot 1`] = `
  data-test="date-picker"
  >
  <label
- class="jsx-2718078600 "
+ class="jsx-2904627559 "
  data-test="date-picker-label"
  for="file"
  >
  <span
- class="jsx-2718078600"
+ class="jsx-2904627559"
  >
  Start date
  </span>
  </label>
  <div
- class="jsx-3111771310 "
+ class="jsx-3651602664 "
  data-test="date-picker-content"
  >
  <div
  class="jsx-2908043323 "
  data-test="dhis2-uicore-box"
  >
  <div
- class="jsx-3353877153 jsx-3090974169 input"
+ class="jsx-3353877153 jsx-3173911271 input"
  data-test="dhis2-uicore-input"
  >
  <input
- class="jsx-3353877153 jsx-3090974169 "
+ class="jsx-3353877153 jsx-3173911271 "
  id="file"
  name="file"
  type="date"

diff --git a/src/components/FormField/FormField.module.css b/src/components/FormField/FormField.module.css
@@ -6,6 +6,6 @@
  display: block;
  font-size: 14px;
  font-weight: 500;
- color: var(--colors-grey800);
- margin: 0 0 10px;
+ color: var(--colors-grey900);
+ margin: 0 0 var(--spacers-dp8);
 }
diff --git a/src/components/ImportButtonStrip/__snapshots__/ImportButtonStrip.test.js.snap b/src/components/ImportButtonStrip/__snapshots__/ImportButtonStrip.test.js.snap
@@ -34,7 +34,7 @@ exports[`matches snapshot 1`] = `
  </div>
  </div>
  <p
- class="jsx-4256586228 "
+ class="jsx-4265152438 "
  data-test="import-strip-help"
  >
  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
@@ -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 = ({
  <ChipContainer>
  {categoryTypes.map(({ key, importType, label }) => (
  <Chip
+ dense
  onClick={() => onChipClick(importType)}
  selected={activeTypes.includes(importType)}
  key={key}
@@ -80,7 +81,6 @@ const JobOverview = ({
  active={selectedJob && selectedJob.id === t.id}
  label={<MenuLabel task={t} />}
  onClick={() => setSelectedJob(t)}
- icon={categoryTypesObj[t.importType].icon}
  />
  ))}
  </Menu>

diff --git 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
@@ -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}`}
  >
- <div className={styles.status}>
- <span className={styles.filename}>
-  {task.jobDetails.files[0].name}
-  </span>
- <br />
- <span>
-  {task.completed
-  ? i18n.t('Completed')
-  : i18n.t('In progress')}{' '}
- </span>
+ <div className={styles.filename}>
+ {task.jobDetails.files[0].name}
+ </div>
+ <div className={styles.subtitle}>
+ {task.completed ? (
+  <Tag positive>{i18n.t('Completed')}</Tag>
+ ) : (
+ <Tag>{i18n.t('In progress')}</Tag>
+ )}{' '}
+ <p className={styles.date}>{jsDateToString(task.created)}</p>
  </div>
- <div className={styles.date}>{jsDateToString(task.created)}</div>
  </div>
  )
 }

diff --git 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
@@ -7,23 +7,31 @@ exports[`MenuLabel matches snapshot 1`] = `
  data-test="job-overview-menu-label-EcJpZjEcMfI"
  >
  <div
- class="status"
+ class="filename"
  >
- <span
- class="filename"
- >
- data1.json
- </span>
- <br />
- <span>
- Completed 
- </span>
+ data1.json
  </div>
  <div
- class="date"
+ class="subtitle"
  >
- 2020-02-12 13:00:23
+ <div
+ class="jsx-72316749 positive"
+ data-test="dhis2-uicore-tag"
+ >
+ <span
+ class="jsx-1110058759"
+ data-test="dhis2-uicore-tag-text"
+ >
+ Completed
+ </span>
+ </div>
+ 
+ <p
+ class="date"
+ >
+ 2020-02-12 13:00:23
 
+ </p>
  </div>
  </div>
 </DocumentFragment>

diff --git 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"
  >
  <div
- class="status"
+ class="filename"
  >
- <span
- class="filename"
- >
- data1.json
- </span>
- <br />
- <span>
- Completed 
- </span>
+ data1.json
  </div>
  <div
- class="date"
+ class="subtitle"
  >
- 2020-02-12 13:00:23
+ <div
+ class="jsx-72316749 positive"
+ data-test="dhis2-uicore-tag"
+ >
+ <span
+ class="jsx-1110058759"
+ data-test="dhis2-uicore-tag-text"
+ >
+ Completed
+ </span>
+ </div>
+ 
+ <p
+ class="date"
+ >
+ 2020-02-12 13:00:23
 
+ </p>
  </div>
  </div>
 </DocumentFragment>

diff --git 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
@@ -38,7 +38,7 @@ const MoreOptions = ({
  </div>
  <h2 className={styles.label}>{label}</h2>
  </header>
- <Divider />
+ {!hidden && <Divider />}
  <div className={styles.children} data-test={`${dataTest}-children`}>
  {!hidden && children}
  </div>

diff --git 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
@@ -31,10 +31,6 @@ exports[`matches snapshot when not toggled 1`] = `
  Advanced options
  </h2>
  </header>
- <div
- class="jsx-1555285825 jsx-876534464 "
- data-test="dhis2-uicore-divider"
- />
  <div
  class="children"
  data-test="more-options-children"