diff --git a/client/src/theme/index.tsx b/client/src/theme/index.tsx
index b9a8288fb..a85c7541c 100644
--- a/client/src/theme/index.tsx
+++ b/client/src/theme/index.tsx
@@ -16,7 +16,6 @@ const theme = createMuiTheme({
secondary: {
main: '#1abc9c'
},
-
background: {
default: '#f1f3f4'
}
diff --git a/client/src/views/Settings.tsx b/client/src/views/Settings.tsx
index f1e43ccb2..1a01e5d5a 100644
--- a/client/src/views/Settings.tsx
+++ b/client/src/views/Settings.tsx
@@ -1,28 +1,43 @@
import React from 'react';
+import classnames from 'classnames';
+
import { useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
import Slide from '@material-ui/core/Slide';
import { TransitionProps } from '@material-ui/core/transitions';
-import SettingsIcon from '@material-ui/icons/Settings';
-
+import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
-import BugReportSettings from './components/BugReportSettings';
-import UpdateSettings from './components/UpdateSettngs';
-import SettingsLanguage from './components/SettingsLanguage';
+import Drawer from '@material-ui/core/Drawer';
+import List from '@material-ui/core/List';
+import Divider from '@material-ui/core/Divider';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
-import UsageStatisticsSettingsCard from './components/UsageAnalyticsSettings';
+import CloseIcon from '@material-ui/icons/Close';
+import SettingsIcon from '@material-ui/icons/Settings';
+// import LibraryBooksIcon from '@material-ui/icons/LibraryBooks';
+import AccountBoxIcon from '@material-ui/icons/AccountBox';
+import UpdateIcon from '@material-ui/icons/Update';
+
+import SettingsList from './components/Settings/GeneralSettingsList';
+import AccountSettingsList from './components/Settings/AccountSettingsList';
+import SettingsLibraryManagement from './components/Settings/LibraryManagement';
+import UpdateSettings from './components/Settings/UpdatesSettings';
import { track } from '../state/track/actions';
+const drawerWidth = 240;
+
const useStyles = makeStyles((theme: Theme) =>
createStyles({
appBar: {
@@ -33,8 +48,8 @@ const useStyles = makeStyles((theme: Theme) =>
flex: 1
},
root: {
- width: '100%',
- display: 'flex'
+ display: 'flex',
+ marginLeft: '100px'
},
heading: {
fontSize: theme.typography.pxToRem(15),
@@ -48,6 +63,24 @@ const useStyles = makeStyles((theme: Theme) =>
center: {
padding: 20,
margin: 'auto'
+ },
+ bg: {
+ background: theme.palette.background.default
+ },
+ paper: {
+ minWidth: '640px'
+ },
+ drawer: {
+ width: drawerWidth,
+ flexShrink: 0
+ },
+ drawerPaper: {
+ width: drawerWidth,
+ marginTop: '64px'
+ },
+ selected: {
+ backgroundColor: theme.palette.background.default,
+ color: theme.palette.primary.main
}
})
);
@@ -65,6 +98,8 @@ export default function FullScreenDialog() {
const { t } = useTranslation();
const dispatch = useDispatch();
+ const [section, setSection] = React.useState('general');
+
const handleClickOpen = () => {
setOpen(true);
dispatch(track('Settings', 'click', 'open'));
@@ -81,7 +116,7 @@ export default function FullScreenDialog() {