Refactor

app/src/components/ConnectionSetup/ProfileList.tsx

@@ -46,8 +46,8 @@ class ProfileList extends React.Component<Props, {}> {
 
 const styles = (theme: Theme) => ({
   list: {
-    marginTop: `${theme.spacing.unit}px`,
-    height: `calc(100% - ${theme.spacing.unit * 6}px)`,
+    marginTop: theme.spacing(1),
+    height: `calc(100% - ${theme.spacing(6)})`,
     overflowY: 'auto' as 'auto',
   },
 })

app/src/components/Sidebar/History.tsx

@@ -4,15 +4,15 @@ import { Badge, Typography } from '@material-ui/core'
 import { Theme, withStyles } from '@material-ui/core/styles'
 
 interface HistoryItem {
-  title: string
-  value: string
+  title: JSX.Element | string
+  value: string | any
 }
 
 interface Props {
   items: HistoryItem[]
   onClick?: (index: number, element: EventTarget) => void
   classes: any
-  contentTypeIndicator?: String
+  contentTypeIndicator?: JSX.Element
 }
 
 interface State {

app/src/components/Sidebar/MessageHistory.tsx

@@ -61,7 +61,7 @@ class MessageHistory extends React.Component<Props, State> {
       <div>
         <History
           items={historyElements}
-          contentTypeIndicator={showPlot ? <BarChart /> : null}
+          contentTypeIndicator={showPlot ? <BarChart /> : undefined}
           onClick={this.displayMessage}
         >
           {showPlot ? this.renderPlot(numericMessages) : null}

app/src/components/Sidebar/Sidebar.tsx

@@ -170,7 +170,6 @@ class Sidebar extends React.Component<Props, State> {
           size="small"
           color="secondary"
           variant="contained"
-          mini={true}
           style={{ marginTop: '-3px', padding: '0px 4px', minHeight: '24px' }}
           onClick={this.props.actions.clearRetainedTopic}
         >