Make our List widget more like the mui one.

src/List.css

@@ -1,14 +1,77 @@
 .List {
   list-style: none;
   padding: 0;
+  margin: 0;
 }
 
 .ListItem {
-  padding: 10px;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  height: 60px;
 }
 
-.ListItem:hover {
+.ListItem-href {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+
+  color: black;
+  text-decoration:  none;
+  border: none;
+}
+
+.ListItem-href:visited, .ListItem-href:active, .ListItem-href:focus {
+  color: inherit;
+  outline: 0;
+}
+
+.ListItem .ListIcon {
+  margin-left: 5px;
+  margin-right: 20px;
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+.ListItem-Item:hover {
   background-color: rgba(0, 0, 0, 0.1);
   cursor: pointer;
 }
 
+.ListItem-inset {
+  margin-left: 49px;
+}
+
+.ListItem-nested-holder {
+  margin-left: 20px;
+}
+
+.ListItem-text-holder {
+  display: flex;
+  flex-direction: column;
+}
+
+.ListItem-primary-text {
+}
+
+.ListItem-secondary-text {
+  margin-top: 1px;
+  font-size: 85%;
+  color: rgba(0, 0, 0, 0.54);
+}
+
+.ListSubheader {
+  font-size: 90%;
+  color: rgba(0, 0, 0, 0.54);
+}
+
+.ListDivider {
+  height: 1px;
+  border: medium none;
+  background-color: rgb(224, 224, 224);
+}
+
+.ListDivider.ListDivider-inset {
+  margin-left: 59px;
+}

src/List.tsx

@@ -3,15 +3,95 @@ import { pure } from 'recompose';
 
 import './List.css';
 
-export const ListItem = pure((props: any) => (
+export const ListItemRaw = pure((_props: any) => {
+  const {
+    href,
+    children,
+    nestedItems,
+    insetChildren,
+    ...props
+  } = _props;
+
+  const inner = href ?
+    (
+      <a href={href} className="ListItem-href">
+        {children}
+      </a>
+    ) :
+    children
+  ;
+
+  const nestedContent = nestedItems ?
+    (
+      <List>
+        {nestedItems}
+      </List>
+    ) :
+    undefined
+  ;
+
+  return (
+    <React.Fragment>
+      <li
+        {...props}
+        className={'ListItem ListItem-Item ' + ((insetChildren) ? 'ListItem-inset' : '')}
+      >
+        {inner}
+      </li>
+      <li className="ListItem-nested-holder">
+        {nestedContent}
+      </li>
+    </React.Fragment>
+  );
+});
+
+export const ListSubheader = pure((props: any) => (
   <li
     {...props}
-    className="ListItem"
+    className="ListItem ListSubheader"
   >
     {props.children}
   </li>
 ));
 
+export const ListDivider = pure((props: any) => (
+  <hr className={'ListDivider ' + (props.inset ? 'ListDivider-inset' : '')} {...props} />
+));
+
+export const ListItem = pure((_props: any) => {
+  const {
+    leftIcon,
+    primaryText,
+    secondaryText,
+    children,
+    ...props
+  } = _props;
+
+  const leftIconHolder = (leftIcon) ? (
+    <div className="ListIcon">{leftIcon}</div>
+  ) : undefined;
+
+  let textHolder = primaryText;
+  if (secondaryText) {
+    textHolder = (
+      <div className="ListItem-text-holder">
+        <span className="ListItem-primary-text">{primaryText}</span>
+        <span className="ListItem-secondary-text">{secondaryText}</span>
+      </div>
+    );
+  }
+
+  return (
+    <ListItemRaw
+      {...props}
+    >
+      {leftIconHolder}
+      {textHolder}
+      {children}
+    </ListItemRaw>
+  );
+});
+
 export const List = pure((props: { children: React.ReactNode[] | React.ReactNode }) => (
   <ul className="List">
     {props.children}