feat: style improvements

dhis2 · Nov 27, 2024 · cfb870d · cfb870d
1 parent 684210b
commit cfb870d
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 31 deletions.
diff --git a/...tsChangelog/common/ChangelogTable/ChangelogCells/ChangelogValueCell/ChangelogValueCell.js b/...tsChangelog/common/ChangelogTable/ChangelogCells/ChangelogValueCell/ChangelogValueCell.js
@@ -31,12 +31,10 @@ const styles = {
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
-        whiteSpace: 'normal',
         height: '100%',
     },
     buttonContainer: {
         display: 'flex',
-        alignItems: 'center',
         justifyContent: 'center',
     },
     previousValue: {
@@ -46,10 +44,9 @@ const styles = {
     currentValue: {
         color: colors.grey900,
         wordBreak: 'break-word',
+        maxWidth: '82%',
     },
     updateArrow: {
-        display: 'inline-flex',
-        alignItems: 'center',
         margin: spacers.dp4,
     },
     viewButton: {

diff --git a/...angelogCells/ChangelogValueCell/ChangelogValueCellComponents/ChangelogValueCellDefault.js b/...angelogCells/ChangelogValueCell/ChangelogValueCellComponents/ChangelogValueCellDefault.js
@@ -16,7 +16,7 @@ const Updated = ({ previousValue, currentValue, classes }: ChangelogValueCellPro
 
 const Created = ({ currentValue, classes }: ChangelogValueCellProps) => (
     <div className={classes.container}>
-        <span className={classes.currentValue}>{currentValue}</span>
+        <span>{currentValue}</span>
     </div>
 );
 

diff --git a/...angelogCells/ChangelogValueCell/ChangelogValueCellComponents/ChangelogValueCellPolygon.js b/...angelogCells/ChangelogValueCell/ChangelogValueCellComponents/ChangelogValueCellPolygon.js
@@ -4,8 +4,8 @@ import { IconArrowRight16, IconChevronUp16, IconChevronDown16 } from '@dhis2/ui'
 import { CHANGE_TYPES } from '../../../../Changelog/Changelog.constants';
 import type { ChangelogValueCellProps } from './ChangelogValueCellComponents.types';
 
-const ValueDisplay = ({ value, showMore, className }) => (
-    <span className={className}>{showMore ? value : value?.slice(0, 1)}</span>
+const ValueDisplay = ({ value, showMore }) => (
+    <span>{showMore ? value : value?.[0]}</span>
 );
 
 const ViewMoreButton = ({ showMore, onClick, classes }) => (
@@ -52,37 +52,45 @@ const Created = ({ currentValue, classes }: ChangelogValueCellProps) => {
     const [showMore, setShowMore] = useState(false);
 
     return (
-        <div className={classes.container}>
-            <ValueDisplay
-                value={currentValue}
-                showMore={showMore}
-                className={classes.currentValue}
-            />
-            <ViewMoreButton
-                showMore={showMore}
-                onClick={() => setShowMore(!showMore)}
-                classes={classes}
-            />
-        </div>
+        <>
+            <div className={classes.container}>
+                <ValueDisplay
+                    value={currentValue}
+                    showMore={showMore}
+                />
+            </div>
+            <div className={classes.buttonContainer}>
+                <ViewMoreButton
+                    showMore={showMore}
+                    onClick={() => setShowMore(!showMore)}
+                    classes={classes}
+                />
+            </div>
+        </>
     );
 };
 
 const Deleted = ({ previousValue, classes }: ChangelogValueCellProps) => {
     const [showMore, setShowMore] = useState(false);
 
     return (
-        <div className={classes.container}>
-            <ValueDisplay
-                value={previousValue}
-                showMore={showMore}
-                className={classes.previousValue}
-            />
-            <ViewMoreButton
-                showMore={showMore}
-                onClick={() => setShowMore(!showMore)}
-                classes={classes}
-            />
-        </div>
+        <>
+            <div className={classes.container}>
+                <ValueDisplay
+                    value={previousValue}
+                    showMore={showMore}
+                    className={classes.previousValue}
+                />
+            </div>
+            <div className={classes.buttonContainer}>
+                <ViewMoreButton
+                    showMore={showMore}
+                    onClick={() => setShowMore(!showMore)}
+                    classes={classes}
+                />
+            </div>
+        </>
+
     );
 };