Tweak: improve changelog appearance [TMZ-928] (#543)

.gitignore

@@ -2,7 +2,8 @@
 node_modules/
 .sass-cache/
 build/**
-assets/
+# Only ignore root-level assets directory (build output), not module assets (source files)
+/assets/
 hello-elementor/
 elementor-hello-theme/
 log/
@@ -13,7 +14,6 @@ Thumbs.db
 *.log
 *.map
 yarn.lock
-assets/js/
 *.zip
 .npmrc
 .env

modules/admin-home/assets/images/plus.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.56 53.56"><g id="Layer_1-2"><path d="M52.67,19.89c-1.19-4.59-3.53-8.59-7.01-11.99-3.4-3.48-7.4-5.82-11.99-7.01-4.59-1.19-9.18-1.19-13.77,0-4.59,1.19-8.61,3.51-12.05,6.95-3.44,3.44-5.76,7.46-6.95,12.05-1.19,4.59-1.19,9.18,0,13.77,1.19,4.59,3.51,8.61,6.95,12.05,3.44,3.44,7.46,5.76,12.05,6.95,4.59,1.19,9.18,1.19,13.77,0,4.59-1.19,8.61-3.51,12.05-6.95s5.76-7.46,6.95-12.05c1.19-4.59,1.19-9.18,0-13.77ZM44.76,31.63h-13.13v13.13h-9.69v-13.13h-13.13v-9.69h13.13v-13.14h9.69v13.14h13.13v9.69Z"/></g></svg>

modules/admin-home/assets/js/components/settings/changelog.js

@@ -0,0 +1,44 @@
+import Dialog from '@elementor/ui/Dialog';
+import DialogContent from '@elementor/ui/DialogContent';
+import DialogHeader from '@elementor/ui/DialogHeader';
+import Typography from '@elementor/ui/Typography';
+import { __ } from '@wordpress/i18n';
+import Stack from '@elementor/ui/Stack';
+import Update from './update';
+import Divider from '@elementor/ui/Divider';
+import { PlusIcon } from './plus-icon';
+import { Fragment } from 'react';
+
+export const ChangelogDialog = ( { open, onClose, whatsNew } ) => {
+	return (
+		<Dialog
+			open={ open }
+			onClose={ onClose }
+			maxWidth="sm"
+			fullWidth
+		>
+			<DialogHeader
+				onClose={ onClose }
+				variant="outlined"
+				logo={ <PlusIcon /> }
+			>
+				<Typography variant="overline" sx={ { textTransform: 'uppercase', fontWeight: 400, color: 'text.primary' } }>
+					{ __( 'Changelog', 'hello-elementor' ) }
+				</Typography>
+			</DialogHeader>
+
+			<DialogContent sx={ { p: 0 } }>
+				<Stack direction={ 'column' } >
+					{ whatsNew.map( ( item, index ) => {
+							return (
+								<Fragment key={ item.id } >
+									<Update { ...item } />
+									{ index !== whatsNew.length - 1 && <Divider /> }
+								</Fragment>
+							);
+						} ) }
+				</Stack>
+			</DialogContent>
+		</Dialog>
+	);
+};

modules/admin-home/assets/js/components/settings/plus-icon.js

@@ -0,0 +1,10 @@
+import SvgIcon from '@elementor/ui/SvgIcon';
+import { ReactComponent as Icon } from '../../../images/plus.svg';
+
+export const PlusIcon = ( props ) => {
+	return (
+		<SvgIcon viewBox="0 0 24 24" { ...props }>
+			<Icon />
+		</SvgIcon>
+	);
+};

modules/admin-home/assets/js/components/settings/settings-page.js

@@ -18,8 +18,7 @@ import Paper from '@elementor/ui/Paper';
 import { styled } from '@elementor/ui/styles';
 import Link from '@elementor/ui/Link';
 import Stack from '@elementor/ui/Stack';
-import Modal from '@elementor/ui/Modal';
-import Update from './update';
+import { ChangelogDialog } from './changelog';
 
 const Notices = () => {
 	const notices = useSelect(
@@ -75,19 +74,6 @@ const StyledTabs = styled( Tabs )( () => ( {
 	},
 } ) );
 
-const style = {
-	position: 'absolute',
-	top: '50%',
-	left: '50%',
-	transform: 'translate(-50%, -50%)',
-	bgcolor: 'background.paper',
-	border: '1px solid #000',
-	boxShadow: 24,
-	p: 2,
-	maxHeight: '80vh',
-	overflowY: 'auto',
-};
-
 export const SettingsPage = () => {
 	const { whatsNew } = useSettingsContext();
 	const { getTabsProps, getTabProps, getTabPanelProps } = useTabs( 'one' );
@@ -131,19 +117,7 @@ export const SettingsPage = () => {
 					<TabPanel { ...getTabPanelProps( 'three' ) }><Theme /></TabPanel>
 				</Box>
 			</Paper>
-			<Modal
-				open={ open }
-				onClose={ handleClose }
-				aria-labelledby="modal-modal-title"
-				aria-describedby="modal-modal-description"
-	>
-				<Box sx={ style }>
-					<Typography variant={ 'h4' }>{ __( 'Changelog', 'hello-plus' ) }</Typography>
-					<Stack direction={ 'column' } gap={ 1 } sx={ { mt: 2 } }>
-						{ whatsNew.map( ( item ) => <Update key={ item.id } { ...item } /> ) }
-					</Stack>
-				</Box>
-			</Modal>
+			<ChangelogDialog open={ open } onClose={ handleClose } whatsNew={ whatsNew } />
 		</>
 	);
 };

modules/admin-home/assets/js/components/settings/update.js

@@ -1,11 +1,19 @@
-import Stack from '@elementor/ui/Stack';
+import Box from '@elementor/ui/Box';
 import Typography from '@elementor/ui/Typography';
+import { useMemo } from 'react';
 
 export default function Update( { title, description } ) {
+	const descriptionToShow = useMemo( () => {
+		const parser = new DOMParser();
+		const doc = parser.parseFromString( description, 'text/html' );
+		const listItems = doc.querySelectorAll( 'li' );
+		const extractedContent = Array.from( listItems ).map( ( item ) => item.textContent.trim() );
+		return extractedContent.join( '\n' );
+	}, [ description ] );
     return (
-	<Stack direction={ 'column' } gap={ 2 }>
-		<Typography variant={ 'h6' }>{ title }</Typography>
-		<div dangerouslySetInnerHTML={ { __html: description } } />
-	</Stack>
+	<Box sx={ { py: 2, px: 3 } }>
+		<Typography variant={ 'subtitle1' } sx={ { pb: 0.75 } }>{ title }</Typography>
+		<Typography variant={ 'body2' } sx={ { whiteSpace: 'pre-line' } }>{ descriptionToShow }</Typography>
+	</Box>
     );
 }