dhis2 · cooper-joe · Jan 20, 2023 · Jan 20, 2023 · Jan 20, 2023 · Jan 23, 2023
diff --git a/src/components/DashboardsBar/ShowMoreButton.js b/src/components/DashboardsBar/ShowMoreButton.js
@@ -1,8 +1,8 @@
 import i18n from '@dhis2/d2-i18n'
-import { Tooltip } from '@dhis2/ui'
+import { Tooltip, IconChevronDown24, IconChevronUp24 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useRef } from 'react'
-import { ChevronDown, ChevronUp } from './assets/icons.js'
+// import { IconChevronDown24, ChevronUp } from './assets/icons.js'
 import classes from './styles/ShowMoreButton.module.css'
 
 const ShowMoreButton = ({ onClick, dashboardBarIsExpanded, disabled }) => {
@@ -31,7 +31,7 @@ const ShowMoreButton = ({ onClick, dashboardBarIsExpanded, disabled }) => {
         <div className={classes.container} ref={containerRef}>
             {disabled ? (
                 <div className={classes.disabled}>
-                    <ChevronDown />
+                    <IconChevronDown24 />
                 </div>
             ) : (
                 <Tooltip
@@ -51,9 +51,9 @@ const ShowMoreButton = ({ onClick, dashboardBarIsExpanded, disabled }) => {
                             onMouseOut={onMouseOut}
                         >
                             {dashboardBarIsExpanded ? (
-                                <ChevronUp />
+                                <IconChevronUp24 />
                             ) : (
-                                <ChevronDown />
+                                <IconChevronDown24 />
                             )}
                         </button>
                     )}

diff --git a/src/components/DashboardsBar/__tests__/__snapshots__/ShowMoreButton.spec.js.snap b/src/components/DashboardsBar/__tests__/__snapshots__/ShowMoreButton.spec.js.snap
@@ -17,8 +17,8 @@ exports[`ShowMoreButton renders correctly when at maxHeight 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="m11.29289 15.7071c.39053.3905 1.02369.3905 1.41422 0l4.99999-4.99999c.3905-.39053.3905-1.02369 0-1.41422-.3905-.39052-1.0237-.39052-1.4142 0l-4.2929 4.2929-4.29289-4.2929c-.39053-.39052-1.02369-.39052-1.41422 0-.39052.39053-.39052 1.02369 0 1.41422z"
-          fill="#a0adba"
+          d="M11.293 15.707a1 1 0 001.414 0l5-5a1 1 0 00-1.414-1.414L12 13.586 7.707 9.293a1 1 0 00-1.414 1.414z"
+          fill="currentColor"
         />
       </svg>
     </button>
@@ -43,8 +43,8 @@ exports[`ShowMoreButton renders correctly when not at maxHeight 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="m11.29289 15.7071c.39053.3905 1.02369.3905 1.41422 0l4.99999-4.99999c.3905-.39053.3905-1.02369 0-1.41422-.3905-.39052-1.0237-.39052-1.4142 0l-4.2929 4.2929-4.29289-4.2929c-.39053-.39052-1.02369-.39052-1.41422 0-.39052.39053-.39052 1.02369 0 1.41422z"
-          fill="#a0adba"
+          d="M11.293 15.707a1 1 0 001.414 0l5-5a1 1 0 00-1.414-1.414L12 13.586 7.707 9.293a1 1 0 00-1.414 1.414z"
+          fill="currentColor"
         />
       </svg>
     </button>

diff --git a/src/components/DashboardsBar/styles/DashboardsBar.module.css b/src/components/DashboardsBar/styles/DashboardsBar.module.css
@@ -5,21 +5,22 @@
 .container {
     position: relative;
     background-color: var(--colors-white);
-    box-shadow: rgba(0, 0, 0, 0.2) 0 0 6px 3px;
+    border-bottom: 1px solid var(--colors-grey400);
+    box-shadow: 0 -2px 4px rgba(33, 41, 52, 0.02) inset;
     overflow: hidden;
     box-sizing: border-box;
     flex: none;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    justify-content: space-between;
     height: var(--user-rows-height);
     width: 100%;
     z-index: 1;
+    padding: var(--spacers-dp8);
 }
 
 .content {
-    padding: 10px 6px 0 6px;
     overflow: hidden;
-    margin-bottom: 21px; /* to make space for the show more button */
 }
 
 .expanded .content {

diff --git a/src/components/DashboardsBar/styles/DragHandle.module.css b/src/components/DashboardsBar/styles/DragHandle.module.css
@@ -14,7 +14,7 @@
     bottom: 0;
     height: 3px;
     width: 100%;
-    background: var(--colors-white);
+    background: transparent;
 }
 
 .draghandle:hover:after {

diff --git a/src/components/DashboardsBar/styles/ShowMoreButton.module.css b/src/components/DashboardsBar/styles/ShowMoreButton.module.css
@@ -1,32 +1,50 @@
 .container {
-    text-align: center;
-    flex: none;
-    height: 21px;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
+    display: flex;
+    align-items: center;
+    width: 32px;
+    height: 40px;
+    flex-shrink: 0;
 }
 
 .showMore {
     cursor: pointer;
     border: none;
-    background-color: transparent;
+    border-radius: 3px;
+    background: transparent;
     padding: 0px;
     width: 100%;
-    height: 21px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.showMore svg {
+    color: var(--colors-grey600);
 }
 
 .showMore:hover {
     background: var(--colors-grey200);
     transition: background 0.2s 0.1s;
 }
+.showMore:hover svg {
+    color: var(--colors-grey800);
+}
+
 .showMore:active {
     background: var(--colors-grey300);
     transition: none;
 }
+.showMore:active svg {
+    color: var(--colors-grey900);
+}
 
+/*focus-visible backwards compatibility for safari: https://css-tricks.com/platform-news-using-focus-visible-bbcs-new-typeface-declarative-shadow-doms-a11y-and-placeholders/*/
 .showMore:focus {
+    outline: 3px solid var(--theme-focus);
+    outline-offset: -3px;
+}
+.showMore:focus:not(:focus-visible) {
     outline: none;
 }
 

diff --git a/src/components/DropdownButton/DropdownButton.js b/src/components/DropdownButton/DropdownButton.js
@@ -17,7 +17,7 @@ const DropdownButton = ({
 
     const ArrowIconComponent = open ? ArrowUp : ArrowDown
     return (
-        <div ref={anchorRef}>
+        <div className={styles.buttonWrapper} ref={anchorRef}>
             <OfflineTooltip disabledWhenOffline={disabledWhenOffline}>
                 <Button onClick={onClick} type="button" {...rest}>
                     {children}

diff --git a/src/components/DropdownButton/DropdownButton.module.css b/src/components/DropdownButton/DropdownButton.module.css
@@ -1,3 +1,6 @@
+.buttonWrapper {
+    display: inline-flex;
+}
 .arrow {
     margin-left: var(--spacers-dp12);
 }
diff --git a/src/components/NoContentMessage.js b/src/components/NoContentMessage.js
@@ -1,9 +1,18 @@
+import { colors } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 import classes from './styles/NoContentMessage.module.css'
 
 const NoContentMessage = ({ text }) => (
-    <div className={classes.container}>{text}</div>
+    <div className={classes.container}>
+        <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+            <path
+                d="M96.4184693 4.6480742l-2.9759268 2.6728C91.5558812 5.2202435 88.8786031 4 86 4V0c4.0260387 0 7.7809122 1.7113874 10.4184693 4.6480742zM100 19.269042h-4l-.0000544-5.3024514c-.0043849-1.346405-.2739964-2.6517927-.7866406-3.8623659l3.6833463-1.559795c.7189815 1.6978243 1.0971493 3.5288134 1.1032837 5.4156229L100 19.269042zm0 13.9999755h-4v-10h4v10zm0 14h-4v-10h4v10zm0 14h-4v-10h4v10zm0 13.9999995h-4v-9.9999995h4v9.9999995zm-.516108 14.50858l-3.8521996-1.077292C95.8751624 87.829701 96 86.924153 96 86v-6.730983h4V86c0 1.289184-.1747984 2.557136-.516108 3.777597zM87.7213345 99.895024l-.4874961-3.970182c2.8302961-.34753 5.3578432-1.892491 6.9762006-4.213767l3.2812621 2.287645c-2.2629208 3.245799-5.802045 5.409086-9.7699666 5.896304zM73.461965 100v-4h10v4h-10zm-14 0v-4h10v4h-10zm-14 0v-4h10v4h-10zm-14 0v-4h10v4h-10zm-14 0v-4h10v4h-10zM3.17264828 94.875717l3.09219912-2.537382c1.79303608 2.185097 4.4211055 3.525451 7.2855127 3.651773l-.176231 3.996116c-4.01094422-.176885-7.69477669-2.055693-10.20148082-5.110507zM0 80.192922h4l.00006331 5.84312c.00418159 1.190127.21554574 2.348454.61951638 3.438567L.86883696 90.864547C.3022517 89.335619.0059261 87.711683.00007566 86.043095L0 80.192922zm0-13.999974h4v10H0v-10zm0-14.0000005h4v10H0v-10zm0-14h4v10H0v-10zm0-14h4v10H0v-10zM.701349 9.6140131l3.79891292 1.2523021C4.17021443 11.8675286 4 12.9209553 4 14v6.1929475H0V14c0-1.5058511.2385093-2.9819426.701349-4.3859869zM12.9113947.0417954l.3073341 3.9881757c-2.8514503.2197365-5.43930476 1.6474003-7.16021518 3.8917822l-3.1742768-2.4339201C5.29022999 2.3499781 8.91606935.3496804 12.9113947.0417954zM27.07607 0v4h-10V0h10zm14 0v4h-10V0h10zm14 0v4h-10V0h10zm14 0v4h-10V0h10zm14 0v4h-10V0h10z"
+                fill={colors.grey400}
+            ></path>
+        </svg>
+        <p>{text}</p>
+    </div>
 )
 
 NoContentMessage.propTypes = {

diff --git a/src/components/styles/App.css b/src/components/styles/App.css
@@ -1,7 +1,7 @@
 :root {
     /* control bar variables */
     --user-rows-count: 1;
-    --controlbar-padding: 31px;
+    --controlbar-padding: 16px;
     --row-height: 40px;
     --min-rows-height: calc(
         var(--controlbar-padding) + (1 * var(--row-height))
@@ -32,11 +32,11 @@ body {
     margin: 0;
     padding: 0;
     font-family: sans-serif;
-    background-color: #f4f6f8;
+    background-color: var(--colors-grey200);
 }
 
 .app-shell-app {
-    overflow: hidden !important;
+    /* overflow: hidden !important; */
     display: flex;
     flex-direction: column;
 }

diff --git a/src/components/styles/DashboardContainer.module.css b/src/components/styles/DashboardContainer.module.css
@@ -1,9 +1,9 @@
 .container {
-    background-color: #f4f6f8;
-    padding-left: var(--spacers-dp16);
-    padding-right: var(--spacers-dp16);
+    background-color: var(--colors-grey200);
+    /* padding-left: var(--spacers-dp16); */
+    /* padding-right: var(--spacers-dp16); */
     padding-bottom: var(--spacers-dp24);
-    overflow: auto;
+    /* overflow: auto; */
 }
 
 @media only screen and (max-height: 480px) {

diff --git a/src/components/styles/ItemGrid.css b/src/components/styles/ItemGrid.css
@@ -2,8 +2,9 @@
 
 .react-grid-item {
     overflow: hidden !important;
-    box-shadow: 0px 0px 3px 0px #999999;
-    background-color: #ffffff;
+    background-color: var(--colors-white);
+    box-shadow: 0 0 0 1px var(--colors-grey400), 0 1px 5px rgba(33, 41, 52, 0.1),
+        0 0 40px rgba(33, 41, 52, 0.02);
     border-radius: 3px;
     min-height: 70px;
     min-width: 70px;

diff --git a/src/components/styles/NoContentMessage.module.css b/src/components/styles/NoContentMessage.module.css
@@ -1,7 +1,9 @@
 .container {
     padding: var(--spacers-dp48) var(--spacers-dp8) 0 var(--spacers-dp8);
-    text-align: center;
-    font-size: 15px;
-    font-weight: 500;
-    color: var(--colors-grey600);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacers-dp24);
+    align-items: center;
+    font-size: 16px;
+    color: var(--colors-grey700);
 }
diff --git a/src/pages/edit/__tests__/__snapshots__/EditDashboard.spec.js.snap b/src/pages/edit/__tests__/__snapshots__/EditDashboard.spec.js.snap
@@ -51,7 +51,19 @@ exports[`EditDashboard renders message when not enough access 1`] = `
     <div
       class="container"
     >
-      No access
+      <svg
+        height="100"
+        width="100"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M96.4184693 4.6480742l-2.9759268 2.6728C91.5558812 5.2202435 88.8786031 4 86 4V0c4.0260387 0 7.7809122 1.7113874 10.4184693 4.6480742zM100 19.269042h-4l-.0000544-5.3024514c-.0043849-1.346405-.2739964-2.6517927-.7866406-3.8623659l3.6833463-1.559795c.7189815 1.6978243 1.0971493 3.5288134 1.1032837 5.4156229L100 19.269042zm0 13.9999755h-4v-10h4v10zm0 14h-4v-10h4v10zm0 14h-4v-10h4v10zm0 13.9999995h-4v-9.9999995h4v9.9999995zm-.516108 14.50858l-3.8521996-1.077292C95.8751624 87.829701 96 86.924153 96 86v-6.730983h4V86c0 1.289184-.1747984 2.557136-.516108 3.777597zM87.7213345 99.895024l-.4874961-3.970182c2.8302961-.34753 5.3578432-1.892491 6.9762006-4.213767l3.2812621 2.287645c-2.2629208 3.245799-5.802045 5.409086-9.7699666 5.896304zM73.461965 100v-4h10v4h-10zm-14 0v-4h10v4h-10zm-14 0v-4h10v4h-10zm-14 0v-4h10v4h-10zm-14 0v-4h10v4h-10zM3.17264828 94.875717l3.09219912-2.537382c1.79303608 2.185097 4.4211055 3.525451 7.2855127 3.651773l-.176231 3.996116c-4.01094422-.176885-7.69477669-2.055693-10.20148082-5.110507zM0 80.192922h4l.00006331 5.84312c.00418159 1.190127.21554574 2.348454.61951638 3.438567L.86883696 90.864547C.3022517 89.335619.0059261 87.711683.00007566 86.043095L0 80.192922zm0-13.999974h4v10H0v-10zm0-14.0000005h4v10H0v-10zm0-14h4v10H0v-10zm0-14h4v10H0v-10zM.701349 9.6140131l3.79891292 1.2523021C4.17021443 11.8675286 4 12.9209553 4 14v6.1929475H0V14c0-1.5058511.2385093-2.9819426.701349-4.3859869zM12.9113947.0417954l.3073341 3.9881757c-2.8514503.2197365-5.43930476 1.6474003-7.16021518 3.8917822l-3.1742768-2.4339201C5.29022999 2.3499781 8.91606935.3496804 12.9113947.0417954zM27.07607 0v4h-10V0h10zm14 0v4h-10V0h10zm14 0v4h-10V0h10zm14 0v4h-10V0h10zm14 0v4h-10V0h10z"
+          fill="#d5dde5"
+        />
+      </svg>
+      <p>
+        No access
+      </p>
     </div>
   </div>
   <div

diff --git a/src/pages/view/FilterBar/styles/FilterBadge.module.css b/src/pages/view/FilterBar/styles/FilterBadge.module.css
@@ -1,12 +1,11 @@
 .container {
-    margin: 2px;
-    padding: 0 var(--spacers-dp16);
-    border-radius: 4px;
+    padding: var(--spacers-dp8);
+    border-radius: 5px;
     color: var(--colors-white);
-    background-color: #212934;
-    height: 36px;
+    background-color: var(--colors-grey900);
     display: flex;
     align-items: center;
+    gap: var(--spacers-dp12);
 }
 
 .badge {
@@ -28,7 +27,6 @@
     padding: 0;
     font-size: 12px;
     text-decoration: underline;
-    margin-left: var(--spacers-dp24);
     cursor: pointer;
 }
 

diff --git a/src/pages/view/FilterBar/styles/FilterBar.module.css b/src/pages/view/FilterBar/styles/FilterBar.module.css
@@ -1,9 +1,6 @@
 .bar {
-    position: sticky;
-    top: var(--spacers-dp12);
-    z-index: 7;
-    margin-top: var(--spacers-dp8);
     display: flex;
-    justify-content: center;
+    justify-content: flex-end;
     flex-wrap: wrap;
+    gap: var(--spacers-dp4);
 }
diff --git a/src/pages/view/TitleBar/ActionsBar.js b/src/pages/view/TitleBar/ActionsBar.js
@@ -9,7 +9,7 @@ import {
     Button,
     FlyoutMenu,
     colors,
-    IconMore24,
+    IconMore16,
     SharingDialog,
 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
@@ -30,8 +30,10 @@ import { sGetNamedItemFilters } from '../../../reducers/itemFilters.js'
 import { sGetSelected } from '../../../reducers/selected.js'
 import { sGetShowDescription } from '../../../reducers/showDescription.js'
 import { ROUTE_START_PATH } from '../../start/index.js'
+import FilterBar from '../FilterBar/FilterBar.js'
 import { apiStarDashboard } from './apiStarDashboard.js'
 import FilterSelector from './FilterSelector.js'
+import LastUpdatedTag from './LastUpdatedTag.js'
 import StarDashboardButton from './StarDashboardButton.js'
 import classes from './styles/ActionsBar.module.css'
 
@@ -215,11 +217,12 @@ const ViewActions = ({
     const getMoreButton = (className, useSmall) => (
         <DropdownButton
             className={className}
-            small={useSmall}
+            small
+            secondary
             open={useSmall ? moreOptionsSmallIsOpen : moreOptionsIsOpen}
             disabledWhenOffline={false}
             onClick={() => toggleMoreOptions(useSmall)}
-            icon={<IconMore24 color={colors.grey700} />}
+            icon={<IconMore16 color={colors.grey700} />}
             component={getMoreMenu()}
         >
             {i18n.t('More')}
@@ -229,14 +232,19 @@ const ViewActions = ({
     return (
         <>
             <div className={classes.actions}>
-                <StarDashboardButton
-                    starred={starred}
-                    onClick={onToggleStarredDashboard}
-                />
+                <FilterBar />
+
                 <div className={classes.strip}>
+                    {<LastUpdatedTag id={id} />}
+                    <StarDashboardButton
+                        starred={starred}
+                        onClick={onToggleStarredDashboard}
+                    />
                     {userAccess.update ? (
                         <OfflineTooltip>
                             <Button
+                                small
+                                secondary
                                 disabled={offline}
                                 className={classes.editButton}
                                 onClick={() => setRedirectUrl(`${id}/edit`)}
@@ -248,6 +256,8 @@ const ViewActions = ({
                     {userAccess.manage ? (
                         <OfflineTooltip>
                             <Button
+                                small
+                                secondary
                                 disabled={offline}
                                 className={classes.shareButton}
                                 onClick={onToggleSharingDialog}

diff --git a/src/pages/view/TitleBar/FilterSelector.js b/src/pages/view/TitleBar/FilterSelector.js
@@ -1,7 +1,7 @@
 import { DimensionsPanel } from '@dhis2/analytics'
 import { useDhis2ConnectionStatus } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { Card, colors, IconFilter24 } from '@dhis2/ui'
+import { Card, colors, IconFilter16 } from '@dhis2/ui'
 import isEmpty from 'lodash/isEmpty.js'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
@@ -62,10 +62,12 @@ const FilterSelector = (props) => {
         <>
             <span className={classes.buttonContainer}>
                 <DropdownButton
+                    small
+                    secondary
                     open={filterDialogIsOpen}
                     disabled={offline}
                     onClick={toggleFilterDialogIsOpen}
-                    icon={<IconFilter24 color={colors.grey700} />}
+                    icon={<IconFilter16 color={colors.grey700} />}
                     component={getFilterSelector()}
                 >
                     {i18n.t('Add filter')}