fix: move last updated tag into dashboard actions

dhis2 · Sep 5, 2024 · 1840049 · 1840049
1 parent 5dafe3e
commit 1840049
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 8 deletions.
diff --git a/src/pages/view/TitleBar/TitleBar.js b/src/pages/view/TitleBar/TitleBar.js
@@ -23,12 +23,14 @@ const ViewTitleBar = ({
                 >
                     {displayName}
                 </span>
-                <ActionsBar />
+                <div className={classes.infoGroup}>
+                    {<LastUpdatedTag id={id} />}
+                    <ActionsBar />
+                </div>
             </div>
             {showDescription && (
                 <Description description={displayDescription} />
             )}
-            {<LastUpdatedTag id={id} />}
         </div>
     )
 }

diff --git a/src/pages/view/TitleBar/styles/ActionsBar.module.css b/src/pages/view/TitleBar/styles/ActionsBar.module.css
@@ -1,8 +1,7 @@
 .actions {
     display: flex;
     align-items: center;
-    gap: var(--spacers-dp8);
-    padding: 0 var(--spacers-dp8);
+    gap: 4px;
 }
 
 .strip {

diff --git a/src/pages/view/TitleBar/styles/LastUpdatedTag.module.css b/src/pages/view/TitleBar/styles/LastUpdatedTag.module.css
@@ -1,3 +1,3 @@
 .lastUpdatedTag {
-    margin-top: var(--spacers-dp8);
+    margin-top: 0;
 }
diff --git a/src/pages/view/TitleBar/styles/TitleBar.module.css b/src/pages/view/TitleBar/styles/TitleBar.module.css
@@ -1,8 +1,9 @@
 .container {
     /* margin-top: var(--spacers-dp12); */
     background: var(--colors-white);
-    border-bottom: 1px solid var(--colors-grey300);
-    padding: var(--spacers-dp12) var(--spacers-dp16) var(--spacers-dp8);
+    border-bottom: 1px solid var(--colors-grey400);
+    padding: var(--spacers-dp8) var(--spacers-dp8) var(--spacers-dp8)
+        var(--spacers-dp16);
     position: sticky;
     top: 0;
     z-index: 10;
@@ -17,8 +18,16 @@
 
 .title {
     position: relative;
-    font-size: 18px;
+    font-size: 17px;
     font-weight: 500;
     color: var(--colors-grey900);
     user-select: text;
 }
+
+.infoGroup {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 4px;
+    flex-wrap: wrap-reverse;
+}