diff --git a/src/Journals/JournalsList.tsx b/src/Journals/JournalsList.tsx index 6da3c95..e0c2d2b 100644 --- a/src/Journals/JournalsList.tsx +++ b/src/Journals/JournalsList.tsx @@ -43,7 +43,7 @@ export default function JournalsList(props: PropsType) { const keyPair = userInfo.getKeyPair(userInfo.getCryptoManager(derived)); const cryptoManager = journal.getCryptoManager(derived, keyPair); const info = journal.getInfo(cryptoManager); - let colorBox: React.ReactNode; + let colorBox: React.ReactElement | undefined; switch (info.type) { case 'CALENDAR': case 'TASKS': @@ -100,4 +100,4 @@ export default function JournalsList(props: PropsType) { ); -} \ No newline at end of file +} diff --git a/src/Journals/JournalsListImport.tsx b/src/Journals/JournalsListImport.tsx index 1b56224..707999b 100644 --- a/src/Journals/JournalsListImport.tsx +++ b/src/Journals/JournalsListImport.tsx @@ -31,7 +31,7 @@ export default function JournalsList(props: PropsType) { const keyPair = userInfo.getKeyPair(userInfo.getCryptoManager(derived)); const cryptoManager = journal.getCryptoManager(derived, keyPair); const info = journal.getInfo(cryptoManager); - let colorBox: React.ReactNode; + let colorBox: React.ReactElement | undefined; switch (info.type) { case 'CALENDAR': case 'TASKS': @@ -86,4 +86,4 @@ export default function JournalsList(props: PropsType) { )} ); -} \ No newline at end of file +} diff --git a/src/widgets/List.css b/src/widgets/List.css deleted file mode 100644 index 8bc9cec..0000000 --- a/src/widgets/List.css +++ /dev/null @@ -1,82 +0,0 @@ -.List { - list-style: none; - padding: 0; -} - -.ListItem { - padding: 0 10px; - display: flex; - align-items: center; - height: 60px; -} - -.ListItem-href { - display: flex; - align-items: center; - width: 100%; - height: 100%; - - color: inherit; - text-decoration: none; - border: none; -} - -.ListItem-href:visited, .ListItem-href:active, .ListItem-href:focus { - color: inherit; - outline: 0; -} - -.ListItem .ListIconLeft { - margin-left: 5px; - margin-right: 20px; - margin-top: 8px; - margin-bottom: 8px; -} - -.ListItem .ListIconRight { - margin-left: auto; - margin-right: 5px; - margin-top: 8px; - margin-bottom: 8px; -} - -.ListItem-Item:hover { - background-color: rgba(0, 0, 0, 0.1); -} - -.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; -} diff --git a/src/widgets/List.tsx b/src/widgets/List.tsx index c225437..53e96c2 100644 --- a/src/widgets/List.tsx +++ b/src/widgets/List.tsx @@ -3,119 +3,98 @@ import * as React from 'react'; +import { createStyles, makeStyles } from '@material-ui/core/styles'; +import MuiList from '@material-ui/core/List'; +import MuiListItem from '@material-ui/core/ListItem'; +import MuiListSubheader from '@material-ui/core/ListSubheader'; +import ListItemIcon from '@material-ui/core/ListItemIcon'; +import ListItemText from '@material-ui/core/ListItemText'; +import Divider from '@material-ui/core/Divider'; + import ExternalLink from './ExternalLink'; -import './List.css'; +const useStyles = makeStyles((theme) => (createStyles({ + inset: { + marginLeft: 64, + }, + nested: { + paddingLeft: theme.spacing(4), + }, +}))); -export const List = React.memo((props: { children: React.ReactNode[] | React.ReactNode }) => ( -