fix(demo): improve styling for MixedNodeElement

Author: bkrem

demo/src/components/MixedNodeElement.js

@@ -5,9 +5,18 @@ const MixedNodeElement = ({ nodeData = {}, triggerNodeToggle, foreignObjectProps
     <React.Fragment>
       <circle r={20}></circle>
       <foreignObject {...foreignObjectProps}>
-        <div style={{ border: '1px solid black' }}>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            border: '1px solid black',
+            paddingBottom: '1rem',
+            backgroundColor: 'rgb(248, 248, 255)', // ghostwhite
+          }}
+        >
           <h3>{nodeData.name}</h3>
-          <ul>
+          <ul style={{ listStyleType: 'none', padding: 0 }}>
             {nodeData.attributes &&
               Object.keys(nodeData.attributes).map((labelKey, i) => (
                 <li key={`${labelKey}-${i}`}>
@@ -16,8 +25,8 @@ const MixedNodeElement = ({ nodeData = {}, triggerNodeToggle, foreignObjectProps
               ))}
           </ul>
           {nodeData.children && (
-            <button onClick={triggerNodeToggle}>
-              {nodeData.__rd3t.collapsed ? 'Expand' : 'Collapse'}
+            <button style={{ textAlign: 'center' }} onClick={triggerNodeToggle}>
+              {nodeData.__rd3t.collapsed ? '⬅️ ➡️ Expand' : '➡️ ⬅️ Collapse'}
             </button>
           )}
         </div>