fix: title bar changes

src/pages/view/FilterBar/styles/FilterBar.module.css

@@ -1,6 +1,6 @@
 .bar {
     display: flex;
-    justify-content: center;
+    justify-content: flex-end;
     flex-wrap: wrap;
     gap: var(--spacers-dp4);
 }

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'
@@ -33,6 +33,7 @@ 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'
 
@@ -221,7 +222,7 @@ const ViewActions = ({
             open={useSmall ? moreOptionsSmallIsOpen : moreOptionsIsOpen}
             disabledWhenOffline={false}
             onClick={() => toggleMoreOptions(useSmall)}
-            icon={<IconMore24 color={colors.grey700} />}
+            icon={<IconMore16 color={colors.grey700} />}
             component={getMoreMenu()}
         >
             {i18n.t('More')}
@@ -232,11 +233,13 @@ const ViewActions = ({
         <>
             <div className={classes.actions}>
                 <FilterBar />
-                <StarDashboardButton
-                    starred={starred}
-                    onClick={onToggleStarredDashboard}
-                />
+
                 <div className={classes.strip}>
+                    {<LastUpdatedTag id={id} />}
+                    <StarDashboardButton
+                        starred={starred}
+                        onClick={onToggleStarredDashboard}
+                    />
                     {userAccess.update ? (
                         <OfflineTooltip>
                             <Button

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'
@@ -67,7 +67,7 @@ const FilterSelector = (props) => {
                     open={filterDialogIsOpen}
                     disabled={offline}
                     onClick={toggleFilterDialogIsOpen}
-                    icon={<IconFilter24 color={colors.grey700} />}
+                    icon={<IconFilter16 color={colors.grey700} />}
                     component={getFilterSelector()}
                 >
                     {i18n.t('Add filter')}

src/pages/view/TitleBar/TitleBar.js

@@ -5,15 +5,9 @@ import { sGetSelected } from '../../../reducers/selected.js'
 import { sGetShowDescription } from '../../../reducers/showDescription.js'
 import ActionsBar from './ActionsBar.js'
 import Description from './Description.js'
-import LastUpdatedTag from './LastUpdatedTag.js'
 import classes from './styles/TitleBar.module.css'
 
-const ViewTitleBar = ({
-    id,
-    displayName,
-    displayDescription,
-    showDescription,
-}) => {
+const ViewTitleBar = ({ displayName, displayDescription, showDescription }) => {
     return (
         <div className={classes.container}>
             <div className={classes.titleBar} data-test="title-bar">
@@ -23,10 +17,7 @@ const ViewTitleBar = ({
                 >
                     {displayName}
                 </span>
-                <div className={classes.infoGroup}>
-                    {<LastUpdatedTag id={id} />}
-                    <ActionsBar />
-                </div>
+                <ActionsBar />
             </div>
             {showDescription && (
                 <Description description={displayDescription} />
@@ -38,7 +29,6 @@ const ViewTitleBar = ({
 ViewTitleBar.propTypes = {
     displayDescription: PropTypes.string,
     displayName: PropTypes.string,
-    id: PropTypes.string,
     showDescription: PropTypes.bool,
 }
 

src/pages/view/TitleBar/styles/ActionsBar.module.css

@@ -1,13 +1,17 @@
 .actions {
     display: flex;
     align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap-reverse;
     gap: 4px;
 }
 
 .strip {
     display: flex;
     align-items: center;
+    justify-content: flex-end;
     gap: var(--spacers-dp4);
+    flex-wrap: wrap;
 }
 
 .strip .moreButtonSmall {

src/pages/view/TitleBar/styles/StarDashboardButton.module.css

@@ -5,7 +5,7 @@
     justify-content: center;
     vertical-align: middle;
     border-radius: 3px;
-    padding: var(--spacers-dp4);
+    padding: 2px;
     border: none;
     background: transparent;
     position: relative;

src/pages/view/TitleBar/styles/TitleBar.module.css

@@ -23,11 +23,3 @@
     color: var(--colors-grey900);
     user-select: text;
 }
-
-.infoGroup {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 4px;
-    flex-wrap: wrap-reverse;
-}