[Update Package] Update material-ui to @material-ui/core V1-rc & update firestore settings.

2018-05-16 15:26:45 +07:00
parent 8184eb036c
commit f1fb1a6078
45 changed files with 22048 additions and 897 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -18,6 +18,8 @@
  "author": "Amir Movahedi",
  "license": "MIT",
  "dependencies": {
+    "@material-ui/core": "^1.0.0-rc.1",
+    "@material-ui/icons": "^1.0.0-rc.0",
    "@types/react-helmet": "^5.0.5",
    "@types/redux-devtools": "^3.0.43",
    "@types/redux-devtools-dock-monitor": "^1.1.32",
@@ -37,8 +39,6 @@
    "jss-rtl": "^0.2.1",
    "keycode": "^2.1.9",
    "lodash": "^4.17.4",
-    "material-ui": "^1.0.0-beta.40",
-    "material-ui-icons": "^1.0.0-beta.17",
    "moment": "^2.18.1",
    "morgan": "^1.8.1",
    "node-sass-chokidar": "0.0.3",
@@ -102,10 +102,6 @@
    "tslint-config-standard": "^6.0.1",
    "typescript": "^2.8.1"
  },
-  "engines": {
-    "node": "8.9.4",
-    "npm": "5.6.0"
-  },
  "directories": {
    "doc": "docs"
  },
--- a/src/components/circle/CircleComponent.tsx
+++ b/src/components/circle/CircleComponent.tsx
@@ -5,36 +5,35 @@ import { push } from 'react-router-redux'
 import {Map, List as ImuList} from 'immutable'

 // - Material UI
-import List, {
-  ListItem,
-  ListItemIcon,
-  ListItemSecondaryAction,
-  ListItemText
-} from 'material-ui/List'
-import SvgGroup from 'material-ui-icons/GroupWork'
-import IconButton from 'material-ui/IconButton'
-import MoreVertIcon from 'material-ui-icons/MoreVert'
-import TextField from 'material-ui/TextField'
-import { MenuList, MenuItem } from 'material-ui/Menu'
-import { withStyles } from 'material-ui/styles'
+import ListItemText from '@material-ui/core/ListItemText'
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
+import ListItem from '@material-ui/core/ListItem'
+import List from '@material-ui/core/List'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import SvgGroup from '@material-ui/icons/GroupWork'
+import IconButton from '@material-ui/core/IconButton'
+import MoreVertIcon from '@material-ui/icons/MoreVert'
+import TextField from '@material-ui/core/TextField'
+import MenuList from '@material-ui/core/MenuList'
+import MenuItem from '@material-ui/core/MenuItem'
+import { withStyles } from '@material-ui/core/styles'
 import { Manager, Target, Popper } from 'react-popper'
-import Grow from 'material-ui/transitions/Grow'
-import ClickAwayListener from 'material-ui/utils/ClickAwayListener'
+import Grow from '@material-ui/core/Grow'
+import ClickAwayListener from '@material-ui/core/ClickAwayListener'
 import classNames from 'classnames'
 import IconButtonElement from 'layouts/IconButtonElement'
-import Dialog, {
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle
-} from 'material-ui/Dialog'
-import Divider from 'material-ui/Divider'
-import Button from 'material-ui/Button'
-import RaisedButton from 'material-ui/Button'
-import SvgClose from 'material-ui-icons/Close'
-import AppBar from 'material-ui/AppBar'
-import Paper from 'material-ui/Paper'
-import Collapse from 'material-ui/transitions/Collapse'
+import Dialog from '@material-ui/core/Dialog'
+import DialogActions from '@material-ui/core/DialogActions'
+import DialogContent from '@material-ui/core/DialogContent'
+import DialogTitle from '@material-ui/core/DialogTitle'
+import DialogContentText from '@material-ui/core/DialogContentText'
+import Divider from '@material-ui/core/Divider'
+import Button from '@material-ui/core/Button'
+import RaisedButton from '@material-ui/core/Button'
+import SvgClose from '@material-ui/icons/Close'
+import AppBar from '@material-ui/core/AppBar'
+import Paper from '@material-ui/core/Paper'
+import Collapse from '@material-ui/core/Collapse'

 // - Import app components
 import UserAvatar from 'components/userAvatar'
--- a/src/components/comment/CommentComponent.tsx
+++ b/src/components/comment/CommentComponent.tsx
@@ -6,27 +6,32 @@ import { NavLink } from 'react-router-dom'
 import PropTypes from 'prop-types'
 import moment from 'moment/moment'
 import Linkify from 'react-linkify'
-import Popover from 'material-ui/Popover'
+import Popover from '@material-ui/core/Popover'
 import { getTranslate, getActiveLanguage } from 'react-localize-redux'
 import {Map} from 'immutable'

 import { Comment } from 'core/domain/comments'

 // - Import material UI libraries
-import Divider from 'material-ui/Divider'
-import Paper from 'material-ui/Paper'
-import Button from 'material-ui/Button'
-import { grey } from 'material-ui/colors'
-import IconButton from 'material-ui/IconButton'
-import MoreVertIcon from 'material-ui-icons/MoreVert'
-import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List'
-import Menu, { MenuList, MenuItem } from 'material-ui/Menu'
-import TextField from 'material-ui/TextField'
-import { withStyles } from 'material-ui/styles'
+import Divider from '@material-ui/core/Divider'
+import Paper from '@material-ui/core/Paper'
+import Button from '@material-ui/core/Button'
+import { grey } from '@material-ui/core/colors'
+import IconButton from '@material-ui/core/IconButton'
+import MoreVertIcon from '@material-ui/icons/MoreVert'
+import ListItemText from '@material-ui/core/ListItemText'
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
+import ListItem from '@material-ui/core/ListItem'
+import List from '@material-ui/core/List'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import MenuList from '@material-ui/core/MenuList'
+import MenuItem from '@material-ui/core/MenuItem'
+import TextField from '@material-ui/core/TextField'
+import { withStyles } from '@material-ui/core/styles'
 import { Manager, Target, Popper } from 'react-popper'
-import { Card, CardActions, CardHeader, CardMedia, CardContent } from 'material-ui'
-import Grow from 'material-ui/transitions/Grow'
-import ClickAwayListener from 'material-ui/utils/ClickAwayListener'
+import { Card, CardActions, CardHeader, CardMedia, CardContent } from '@material-ui/core'
+import Grow from '@material-ui/core/Grow'
+import ClickAwayListener from '@material-ui/core/ClickAwayListener'
 import classNames from 'classnames'

 // - Import app components
--- a/src/components/commentGroup/CommentGroupComponent.tsx
+++ b/src/components/commentGroup/CommentGroupComponent.tsx
@@ -8,18 +8,22 @@ import moment from 'moment/moment'
 import { getTranslate, getActiveLanguage } from 'react-localize-redux'
 import { Map } from 'immutable'

-import Paper from 'material-ui/Paper'
-import Button from 'material-ui/Button'
-import TextField from 'material-ui/TextField'
-import Divider from 'material-ui/Divider'
-import { ListItemIcon, ListItemText, ListItem } from 'material-ui/List'
-import { grey, teal } from 'material-ui/colors'
-import { LinearProgress } from 'material-ui/Progress'
-import { withStyles } from 'material-ui/styles'
+import Paper from '@material-ui/core/Paper'
+import Button from '@material-ui/core/Button'
+import TextField from '@material-ui/core/TextField'
+import Divider from '@material-ui/core/Divider'
+import ListItemText from '@material-ui/core/ListItemText'
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
+import ListItem from '@material-ui/core/ListItem'
+import List from '@material-ui/core/List'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import { grey, teal } from '@material-ui/core/colors'
+import LinearProgress from '@material-ui/core/LinearProgress'
+import { withStyles } from '@material-ui/core/styles'
 import { Manager, Target, Popper } from 'react-popper'
-import { Card, CardActions, CardHeader, CardMedia, CardContent } from 'material-ui'
-import Grow from 'material-ui/transitions/Grow'
-import ClickAwayListener from 'material-ui/utils/ClickAwayListener'
+import { Card, CardActions, CardHeader, CardMedia, CardContent } from '@material-ui/core'
+import Grow from '@material-ui/core/Grow'
+import ClickAwayListener from '@material-ui/core/ClickAwayListener'
 import classNames from 'classnames'

 // - Import actions
--- a/src/components/commentList/CommentListComponent.tsx
+++ b/src/components/commentList/CommentListComponent.tsx
@@ -5,8 +5,13 @@ import PropTypes from 'prop-types'
 import {Map} from 'immutable'

 // - Material UI
-import { withStyles } from 'material-ui/styles'
-import List, { ListItem, ListItemText } from 'material-ui/List'
+import { withStyles } from '@material-ui/core/styles'
+import ListItemText from '@material-ui/core/ListItemText'
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
+import ListItem from '@material-ui/core/ListItem'
+import List from '@material-ui/core/List'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemAvatar from '@material-ui/core/ListItemAvatar'

 // - Import app components
 import CommentComponent from 'components/comment'
--- a/src/components/editProfile/EditProfileComponent.tsx
+++ b/src/components/editProfile/EditProfileComponent.tsx
@@ -11,27 +11,33 @@ import MomentLocaleUtils, {
 } from 'react-day-picker/moment'
 import {Map} from 'immutable'

-import { grey } from 'material-ui/colors'
-import IconButton from 'material-ui/IconButton'
-import MoreVertIcon from 'material-ui-icons/MoreVert'
-import SvgCamera from 'material-ui-icons/PhotoCamera'
-import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List'
-import Menu, { MenuList, MenuItem } from 'material-ui/Menu'
-import Button from 'material-ui/Button'
-import RaisedButton from 'material-ui/Button'
+import { grey } from '@material-ui/core/colors'
+import IconButton from '@material-ui/core/IconButton'
+import MoreVertIcon from '@material-ui/icons/MoreVert'
+import SvgCamera from '@material-ui/icons/PhotoCamera'
+import ListItemText from '@material-ui/core/ListItemText'
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
+import ListItem from '@material-ui/core/ListItem'
+import List from '@material-ui/core/List'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import MenuList from '@material-ui/core/MenuList'
+import MenuItem from '@material-ui/core/MenuItem'
+import Button from '@material-ui/core/Button'
+import RaisedButton from '@material-ui/core/Button'
 import EventListener, { withOptions } from 'react-event-listener'
-import Dialog, {
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle
-} from 'material-ui/Dialog'
-import Divider from 'material-ui/Divider'
-import Paper from 'material-ui/Paper'
-import TextField from 'material-ui/TextField'
-import Input, { InputLabel } from 'material-ui/Input'
-import { FormControl, FormHelperText } from 'material-ui/Form'
-import { withStyles } from 'material-ui/styles'
+import Dialog from '@material-ui/core/Dialog'
+import DialogActions from '@material-ui/core/DialogActions'
+import DialogContent from '@material-ui/core/DialogContent'
+import DialogTitle from '@material-ui/core/DialogTitle'
+import DialogContentText from '@material-ui/core/DialogContentText'
+import Divider from '@material-ui/core/Divider'
+import Paper from '@material-ui/core/Paper'
+import TextField from '@material-ui/core/TextField'
+import Input from '@material-ui/core/Input'
+import InputLabel from '@material-ui/core/InputLabel'
+import  FormHelperText from '@material-ui/core/FormHelperText'
+import FormControl from '@material-ui/core/FormControl'
+import { withStyles } from '@material-ui/core/styles'

 // - Import app components
 import ImgCover from 'components/imgCover'
--- a/src/components/findPeople/FindPeopleComponent.tsx
+++ b/src/components/findPeople/FindPeopleComponent.tsx
@@ -2,7 +2,7 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
-import Paper from 'material-ui/Paper'
+import Paper from '@material-ui/core/Paper'
 import InfiniteScroll from 'react-infinite-scroller'
 import { getTranslate, getActiveLanguage } from 'react-localize-redux'
 import {Map} from 'immutable'
--- a/src/components/homeHeader/HomeHeaderComponent.tsx
+++ b/src/components/homeHeader/HomeHeaderComponent.tsx
@@ -6,20 +6,22 @@ import classNames from 'classnames'
 import { Map } from 'immutable'

 // - Material UI
-import SvgDehaze from 'material-ui-icons/Dehaze'
-import { grey, blue } from 'material-ui/colors'
-import Toolbar from 'material-ui/Toolbar'
-import IconButton from 'material-ui/IconButton'
-import Popover from 'material-ui/Popover'
-import AppBar from 'material-ui/AppBar'
-import Menu, { MenuList, MenuItem } from 'material-ui/Menu'
-import Paper from 'material-ui/Paper'
-import Hidden from 'material-ui/Hidden'
-import NotificationsIcon from 'material-ui-icons/Notifications'
-import Tooltip from 'material-ui/Tooltip'
-import Typography from 'material-ui/Typography'
+import SvgDehaze from '@material-ui/icons/Dehaze'
+import { grey, blue } from '@material-ui/core/colors'
+import Toolbar from '@material-ui/core/Toolbar'
+import IconButton from '@material-ui/core/IconButton'
+import Popover from '@material-ui/core/Popover'
+import AppBar from '@material-ui/core/AppBar'
+import MenuList from '@material-ui/core/MenuList'
+import MenuItem from '@material-ui/core/MenuItem'
+import Menu from '@material-ui/core/Menu'
+import Paper from '@material-ui/core/Paper'
+import Hidden from '@material-ui/core/Hidden'
+import NotificationsIcon from '@material-ui/icons/Notifications'
+import Tooltip from '@material-ui/core/Tooltip'
+import Typography from '@material-ui/core/Typography'
 import { Manager, Target, Popper } from 'react-popper'
-import { withStyles } from 'material-ui/styles'
+import { withStyles } from '@material-ui/core/styles'
 import { getTranslate, getActiveLanguage } from 'react-localize-redux'
 import config from 'src/config'

--- a/src/components/imageGallery/ImageGalleryComponent.tsx
+++ b/src/components/imageGallery/ImageGalleryComponent.tsx
@@ -2,15 +2,17 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import GridList, { GridListTile, GridListTileBar } from 'material-ui/GridList'
-import IconButton from 'material-ui/IconButton'
-import StarBorder from 'material-ui-icons/StarBorder'
-import Button from 'material-ui/Button'
-import SvgUpload from 'material-ui-icons/CloudUpload'
-import SvgAddImage from 'material-ui-icons/AddAPhoto'
-import SvgDelete from 'material-ui-icons/Delete'
-import { grey } from 'material-ui/colors'
-import { withStyles } from 'material-ui/styles'
+import GridList from '@material-ui/core/GridList'
+import GridListTileBar  from '@material-ui/core/GridListTileBar'
+import GridListTile from '@material-ui/core/GridListTile'
+import IconButton from '@material-ui/core/IconButton'
+import StarBorder from '@material-ui/icons/StarBorder'
+import Button from '@material-ui/core/Button'
+import SvgUpload from '@material-ui/icons/CloudUpload'
+import SvgAddImage from '@material-ui/icons/AddAPhoto'
+import SvgDelete from '@material-ui/icons/Delete'
+import { grey } from '@material-ui/core/colors'
+import { withStyles } from '@material-ui/core/styles'
 import uuid from 'uuid'
 import { getTranslate, getActiveLanguage } from 'react-localize-redux'
 import {Map} from 'immutable'
--- a/src/components/img/ImgComponent.tsx
+++ b/src/components/img/ImgComponent.tsx
@@ -2,8 +2,8 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import SvgImage from 'material-ui-icons/Image'
-import { withStyles } from 'material-ui/styles'
+import SvgImage from '@material-ui/icons/Image'
+import { withStyles } from '@material-ui/core/styles'
 import { getTranslate, getActiveLanguage } from 'react-localize-redux'
 import { Map } from 'immutable'

--- a/src/components/imgCover/ImgCoverComponent.tsx
+++ b/src/components/imgCover/ImgCoverComponent.tsx
@@ -2,7 +2,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import SvgImage from 'material-ui-icons/Image'
+import SvgImage from '@material-ui/icons/Image'
 import { getTranslate, getActiveLanguage } from 'react-localize-redux'
 import {Map} from 'immutable'

--- a/src/components/masterLoading/MasterLoadingComponent.tsx
+++ b/src/components/masterLoading/MasterLoadingComponent.tsx
@@ -1,12 +1,12 @@
 // - Import react components
 import React, { Component } from 'react'
-import { CircularProgress } from 'material-ui/Progress'
-import Dialog from 'material-ui/Dialog'
-import red from 'material-ui/colors/red'
+import CircularProgress from '@material-ui/core/CircularProgress'
+import Dialog from '@material-ui/core/Dialog'
+import red from '@material-ui/core/colors/red'
 import { IMasterLoadingComponentProps } from './IMasterLoadingComponentProps'
 import { IMasterLoadingComponentState } from './IMasterLoadingComponentState'
-import Grid from 'material-ui/Grid/Grid'
-import { Typography } from 'material-ui'
+import Grid from '@material-ui/core/Grid/Grid'
+import { Typography } from '@material-ui/core'

 // - Import app components

--- a/src/components/notify/NotifyComponent.tsx
+++ b/src/components/notify/NotifyComponent.tsx
@@ -4,12 +4,17 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import classNames from 'classnames'
 import { Manager, Target, Popper } from 'react-popper'
-import ClickAwayListener from 'material-ui/utils/ClickAwayListener'
-import Grow from 'material-ui/transitions/Grow'
-import { withStyles } from 'material-ui/styles'
-import Typography from 'material-ui/Typography'
-import Paper from 'material-ui/Paper'
-import List, { ListItem, ListItemSecondaryAction, ListItemText } from 'material-ui/List'
+import ClickAwayListener from '@material-ui/core/ClickAwayListener'
+import Grow from '@material-ui/core/Grow'
+import { withStyles } from '@material-ui/core/styles'
+import Typography from '@material-ui/core/Typography'
+import Paper from '@material-ui/core/Paper'
+import ListItemText from '@material-ui/core/ListItemText'
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
+import ListItem from '@material-ui/core/ListItem'
+import List from '@material-ui/core/List'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemAvatar from '@material-ui/core/ListItemAvatar'
 import { Map } from 'immutable'

 // - Import app components
--- a/src/components/notifyItem/NotifyItemComponent.tsx
+++ b/src/components/notifyItem/NotifyItemComponent.tsx
@@ -4,10 +4,15 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { NavLink } from 'react-router-dom'
 import { push } from 'react-router-redux'
-import SvgClose from 'material-ui-icons/Close'
-import { grey } from 'material-ui/colors'
-import { withStyles } from 'material-ui/styles'
-import List, { ListItem, ListItemSecondaryAction, ListItemText } from 'material-ui/List'
+import SvgClose from '@material-ui/icons/Close'
+import { grey } from '@material-ui/core/colors'
+import { withStyles } from '@material-ui/core/styles'
+import ListItemText from '@material-ui/core/ListItemText'
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
+import ListItem from '@material-ui/core/ListItem'
+import List from '@material-ui/core/List'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemAvatar from '@material-ui/core/ListItemAvatar'

 // - Import app components
 import UserAvatar from 'components/userAvatar'
--- a/src/components/post/PostComponent.tsx
+++ b/src/components/post/PostComponent.tsx
@@ -11,29 +11,35 @@ import { getTranslate, getActiveLanguage } from 'react-localize-redux'
 import { Map } from 'immutable'

 // - Material UI
-import Card, { CardActions, CardHeader, CardMedia, CardContent } from 'material-ui/Card'
-import {  LinearProgress } from 'material-ui/Progress'
-import Typography from 'material-ui/Typography'
-import SvgShare from 'material-ui-icons/Share'
-import SvgComment from 'material-ui-icons/Comment'
-import SvgFavorite from 'material-ui-icons/Favorite'
-import SvgFavoriteBorder from 'material-ui-icons/FavoriteBorder'
-import Checkbox from 'material-ui/Checkbox'
-import Button from 'material-ui/Button'
-import Divider from 'material-ui/Divider'
-import { grey } from 'material-ui/colors'
-import Paper from 'material-ui/Paper'
-import Menu from 'material-ui/Menu'
-import { MenuList, MenuItem } from 'material-ui/Menu'
-import TextField from 'material-ui/TextField'
-import Dialog from 'material-ui/Dialog'
-import IconButton from 'material-ui/IconButton'
-import MoreVertIcon from 'material-ui-icons/MoreVert'
-import { ListItemIcon, ListItemText } from 'material-ui/List'
-import { withStyles } from 'material-ui/styles'
+import Card from '@material-ui/core/Card'
+import CardActions from '@material-ui/core/CardActions'
+import CardHeader from '@material-ui/core/CardHeader'
+import CardMedia from '@material-ui/core/CardMedia'
+import CardContent from '@material-ui/core/CardContent'
+import LinearProgress from '@material-ui/core/LinearProgress'
+import Typography from '@material-ui/core/Typography'
+import SvgShare from '@material-ui/icons/Share'
+import SvgComment from '@material-ui/icons/Comment'
+import SvgFavorite from '@material-ui/icons/Favorite'
+import SvgFavoriteBorder from '@material-ui/icons/FavoriteBorder'
+import Checkbox from '@material-ui/core/Checkbox'
+import Button from '@material-ui/core/Button'
+import Divider from '@material-ui/core/Divider'
+import { grey } from '@material-ui/core/colors'
+import Paper from '@material-ui/core/Paper'
+import Menu from '@material-ui/core/Menu'
+import MenuList from '@material-ui/core/MenuList'
+import MenuItem from '@material-ui/core/MenuItem'
+import TextField from '@material-ui/core/TextField'
+import Dialog from '@material-ui/core/Dialog'
+import IconButton from '@material-ui/core/IconButton'
+import MoreVertIcon from '@material-ui/icons/MoreVert'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemText from '@material-ui/core/ListItemText'
+import { withStyles } from '@material-ui/core/styles'
 import { Manager, Target, Popper } from 'react-popper'
-import Grow from 'material-ui/transitions/Grow'
-import ClickAwayListener from 'material-ui/utils/ClickAwayListener'
+import Grow from '@material-ui/core/Grow'
+import ClickAwayListener from '@material-ui/core/ClickAwayListener'
 import classNames from 'classnames'

 import reactStringReplace from 'react-string-replace'
--- a/src/components/postWrite/PostWriteComponent.tsx
+++ b/src/components/postWrite/PostWriteComponent.tsx
@@ -5,35 +5,34 @@ import PropTypes from 'prop-types'
 import { getTranslate, getActiveLanguage } from 'react-localize-redux'
 import { Map } from 'immutable'

-import { Card, CardActions, CardHeader, CardMedia, CardContent } from 'material-ui'
-import List, {
-  ListItem,
-  ListItemAvatar,
-  ListItemIcon,
-  ListItemSecondaryAction,
-  ListItemText
-} from 'material-ui/List'
-import Paper from 'material-ui/Paper'
-import Dialog, {
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle
-} from 'material-ui/Dialog'
-import Button from 'material-ui/Button'
-import RaisedButton from 'material-ui/Button'
-import { grey } from 'material-ui/colors'
-import IconButton from 'material-ui/IconButton'
-import TextField from 'material-ui/TextField'
-import Tooltip from 'material-ui/Tooltip'
-import { MenuList, MenuItem } from 'material-ui/Menu'
-import SvgRemoveImage from 'material-ui-icons/RemoveCircle'
-import SvgCamera from 'material-ui-icons/PhotoCamera'
-import MoreVertIcon from 'material-ui-icons/MoreVert'
-import { withStyles } from 'material-ui/styles'
+import { Card, CardActions, CardHeader, CardMedia, CardContent } from '@material-ui/core'
+import ListItemText from '@material-ui/core/ListItemText'
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
+import ListItem from '@material-ui/core/ListItem'
+import List from '@material-ui/core/List'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemAvatar from '@material-ui/core/ListItemAvatar'
+import Paper from '@material-ui/core/Paper'
+import Dialog from '@material-ui/core/Dialog'
+import DialogActions from '@material-ui/core/DialogActions'
+import DialogContent from '@material-ui/core/DialogContent'
+import DialogTitle from '@material-ui/core/DialogTitle'
+import DialogContentText from '@material-ui/core/DialogContentText'
+import Button from '@material-ui/core/Button'
+import RaisedButton from '@material-ui/core/Button'
+import { grey } from '@material-ui/core/colors'
+import IconButton from '@material-ui/core/IconButton'
+import TextField from '@material-ui/core/TextField'
+import Tooltip from '@material-ui/core/Tooltip'
+import MenuList from '@material-ui/core/MenuList'
+import MenuItem from '@material-ui/core/MenuItem'
+import SvgRemoveImage from '@material-ui/icons/RemoveCircle'
+import SvgCamera from '@material-ui/icons/PhotoCamera'
+import MoreVertIcon from '@material-ui/icons/MoreVert'
+import { withStyles } from '@material-ui/core/styles'
 import { Manager, Target, Popper } from 'react-popper'
-import Grow from 'material-ui/transitions/Grow'
-import ClickAwayListener from 'material-ui/utils/ClickAwayListener'
+import Grow from '@material-ui/core/Grow'
+import ClickAwayListener from '@material-ui/core/ClickAwayListener'
 import classNames from 'classnames'

 // - Import app components
@@ -50,7 +49,7 @@ import * as postActions from 'store/actions/postActions'
 import { IPostWriteComponentProps } from './IPostWriteComponentProps'
 import { IPostWriteComponentState } from './IPostWriteComponentState'
 import { Post } from 'core/domain/posts'
-import Grid from 'material-ui/Grid/Grid'
+import Grid from '@material-ui/core/Grid/Grid'

 const styles = (theme: any) => ({
  fullPageXs: {
--- a/src/components/profileHeader/ProfileHeaderComponent.tsx
+++ b/src/components/profileHeader/ProfileHeaderComponent.tsx
@@ -5,12 +5,14 @@ import config from 'src/config'
 import {Map} from 'immutable'

 // - Material UI
-import { grey } from 'material-ui/colors'
-import IconButton from 'material-ui/IconButton'
-import MoreVertIcon from 'material-ui-icons/MoreVert'
-import { MenuList, MenuItem } from 'material-ui/Menu'
-import Button from 'material-ui/Button'
-import RaisedButton from 'material-ui/Button'
+import { grey } from '@material-ui/core/colors'
+import IconButton from '@material-ui/core/IconButton'
+import MoreVertIcon from '@material-ui/icons/MoreVert'
+import MenuList from '@material-ui/core/MenuList'
+import MenuItem from '@material-ui/core/MenuItem'
+import Menu from '@material-ui/core/Menu'
+import Button from '@material-ui/core/Button'
+import RaisedButton from '@material-ui/core/Button'
 import EventListener, { withOptions } from 'react-event-listener'
 import { Parallax, Background } from 'react-parallax'
 import { getTranslate, getActiveLanguage } from 'react-localize-redux'
--- a/src/components/sendFeedback/SendFeedbackComponent.tsx
+++ b/src/components/sendFeedback/SendFeedbackComponent.tsx
@@ -6,16 +6,16 @@ import classNames from 'classnames'
 import {Map} from 'immutable'

 // - Material UI
-import Paper from 'material-ui/Paper'
-import TextField from 'material-ui/TextField'
-import IconButton from 'material-ui/IconButton'
-import SvgHappy from 'material-ui-icons/TagFaces'
-import SvgSad from 'material-ui-icons/Face'
-import SvgClose from 'material-ui-icons/Clear'
-import { CircularProgress } from 'material-ui/Progress'
-import Tooltip from 'material-ui/Tooltip'
+import Paper from '@material-ui/core/Paper'
+import TextField from '@material-ui/core/TextField'
+import IconButton from '@material-ui/core/IconButton'
+import SvgHappy from '@material-ui/icons/TagFaces'
+import SvgSad from '@material-ui/icons/Face'
+import SvgClose from '@material-ui/icons/Clear'
+import CircularProgress from '@material-ui/core/CircularProgress'
+import Tooltip from '@material-ui/core/Tooltip'
 import { getTranslate, getActiveLanguage } from 'react-localize-redux'
-import { withStyles } from 'material-ui/styles'
+import { withStyles } from '@material-ui/core/styles'

 // - Import app components

@@ -150,9 +150,7 @@ export class SendFeedbackComponent extends Component<ISendFeedbackComponentProps
        color='secondary'
        size={50}
        variant='determinate'
-        value={25}
-        min={0}
-        max={50}
+        value={(25 - 0) / (50 - 0) * 100}
      />
      </div>
    </div>)
--- a/src/components/shareDialog/ShareDialogComponent.tsx
+++ b/src/components/shareDialog/ShareDialogComponent.tsx
@@ -2,8 +2,8 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import SvgImage from 'material-ui-icons/Image'
-import { withStyles } from 'material-ui/styles'
+import SvgImage from '@material-ui/icons/Image'
+import { withStyles } from '@material-ui/core/styles'
 import { getTranslate, getActiveLanguage } from 'react-localize-redux'
 import classNames from 'classnames'

@@ -28,8 +28,8 @@ import {
 // - Import actions
 import { IShareDialogComponentProps } from './IShareDialogComponentProps'
 import { IShareDialogComponentState } from './IShareDialogComponentState'
-import { Dialog, Paper, MenuList, MenuItem, ListItemIcon, ListItemText, TextField, Typography } from 'material-ui'
-import SvgLink from 'material-ui-icons/Link'
+import { Dialog, Paper, MenuList, MenuItem, ListItemIcon, ListItemText, TextField, Typography } from '@material-ui/core'
+import SvgLink from '@material-ui/icons/Link'

 const styles = (theme: any) => ({
  image: {
--- a/src/components/userAvatar/UserAvatarComponent.tsx
+++ b/src/components/userAvatar/UserAvatarComponent.tsx
@@ -2,7 +2,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import Avatar from 'material-ui/Avatar'
+import Avatar from '@material-ui/core/Avatar'
 import { Map } from 'immutable'

 // - Import app components
--- a/src/components/userBox/UserBoxComponent.tsx
+++ b/src/components/userBox/UserBoxComponent.tsx
@@ -9,26 +9,29 @@ import classNames from 'classnames'
 import {Map, List as ImuList} from 'immutable'

 // - Material UI
-import Paper from 'material-ui/Paper'
-import Button from 'material-ui/Button'
-import RaisedButton from 'material-ui/Button'
-import Menu, { MenuItem } from 'material-ui/Menu'
-import Checkbox from 'material-ui/Checkbox'
-import TextField from 'material-ui/TextField'
-import Tooltip from 'material-ui/Tooltip'
-import { withStyles } from 'material-ui/styles'
-import List, { ListItem, ListItemSecondaryAction, ListItemText } from 'material-ui/List'
-import Divider from 'material-ui/Divider'
-import Dialog, {
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  withMobileDialog
-} from 'material-ui/Dialog'
-import SvgAdd from 'material-ui-icons/Add'
-import IconButton from 'material-ui/IconButton'
-import { grey } from 'material-ui/colors'
+import Paper from '@material-ui/core/Paper'
+import Button from '@material-ui/core/Button'
+import RaisedButton from '@material-ui/core/Button'
+import MenuList from '@material-ui/core/MenuList'
+import MenuItem from '@material-ui/core/MenuItem'
+import Checkbox from '@material-ui/core/Checkbox'
+import TextField from '@material-ui/core/TextField'
+import Tooltip from '@material-ui/core/Tooltip'
+import { withStyles } from '@material-ui/core/styles'
+import ListItemText from '@material-ui/core/ListItemText'
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
+import ListItem from '@material-ui/core/ListItem'
+import List from '@material-ui/core/List'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import Divider from '@material-ui/core/Divider'
+import Dialog from '@material-ui/core/Dialog'
+import DialogActions from '@material-ui/core/DialogActions'
+import DialogContent from '@material-ui/core/DialogContent'
+import DialogTitle from '@material-ui/core/DialogTitle'
+import DialogContentText from '@material-ui/core/DialogContentText'
+import SvgAdd from '@material-ui/icons/Add'
+import IconButton from '@material-ui/core/IconButton'
+import { grey } from '@material-ui/core/colors'

 // - Import app components
 import UserAvatar from 'components/userAvatar'
--- a/src/components/yourCircles/YourCirclesComponent.tsx
+++ b/src/components/yourCircles/YourCirclesComponent.tsx
@@ -4,7 +4,7 @@ import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import {Map} from 'immutable'

-import List from 'material-ui/List'
+import List from '@material-ui/core/List'

 // - Import app components
 import CircleComponent from 'components/circle'
--- a/src/containers/emailVerification/EmailVerificationComponent.tsx
+++ b/src/containers/emailVerification/EmailVerificationComponent.tsx
@@ -3,19 +3,19 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { NavLink, withRouter } from 'react-router-dom'
 import { push } from 'react-router-redux'
-import Paper from 'material-ui/Paper'
-import TextField from 'material-ui/TextField'
-import RaisedButton from 'material-ui/Button'
-import Button from 'material-ui/Button'
+import Paper from '@material-ui/core/Paper'
+import TextField from '@material-ui/core/TextField'
+import RaisedButton from '@material-ui/core/Button'
+import Button from '@material-ui/core/Button'
 import config from 'src/config'
-import { withStyles } from 'material-ui/styles'
+import { withStyles } from '@material-ui/core/styles'
 import { getTranslate, getActiveLanguage } from 'react-localize-redux'

 // - Import actions
 import * as authorizeActions from 'src/store/actions/authorizeActions'
 import { IEmailVerificationComponentProps } from './IEmailVerificationComponentProps'
 import { IEmailVerificationComponentState } from './IEmailVerificationComponentState'
-import { Grid } from 'material-ui'
+import { Grid } from '@material-ui/core'

 const styles = (theme: any) => ({
  textField: {
--- a/src/containers/home/HomeComponent.tsx
+++ b/src/containers/home/HomeComponent.tsx
@@ -10,23 +10,27 @@ import { getTranslate, getActiveLanguage } from 'react-localize-redux'
 import config from 'src/config'
 import classNames from 'classnames'

-import { withStyles } from 'material-ui/styles'
-import Drawer from 'material-ui/Drawer'
-import Menu from 'material-ui/Menu'
-import { MenuList, MenuItem } from 'material-ui/Menu'
-import { ListItemIcon, ListItemText } from 'material-ui/List'
-import Divider from 'material-ui/Divider'
-import SvgArrowLeft from 'material-ui-icons/KeyboardArrowLeft'
-import SvgHome from 'material-ui-icons/Home'
-import SvgFeedback from 'material-ui-icons/Feedback'
-import SvgSettings from 'material-ui-icons/Settings'
-import SvgAccountCircle from 'material-ui-icons/AccountCircle'
-import SvgPeople from 'material-ui-icons/People'
-import List from 'material-ui/List'
-import Typography from 'material-ui/Typography'
-import IconButton from 'material-ui/IconButton'
-import Hidden from 'material-ui/Hidden'
-import MenuIcon from 'material-ui-icons/Menu'
+import { withStyles } from '@material-ui/core/styles'
+import Drawer from '@material-ui/core/Drawer'
+import Menu from '@material-ui/core/Menu'
+import MenuList from '@material-ui/core/MenuList'
+import MenuItem from '@material-ui/core/MenuItem'
+import ListItem from '@material-ui/core/ListItem'
+import ListIcon from '@material-ui/core/ListItemIcon'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemText from '@material-ui/core/ListItemText'
+import Divider from '@material-ui/core/Divider'
+import SvgArrowLeft from '@material-ui/icons/KeyboardArrowLeft'
+import SvgHome from '@material-ui/icons/Home'
+import SvgFeedback from '@material-ui/icons/Feedback'
+import SvgSettings from '@material-ui/icons/Settings'
+import SvgAccountCircle from '@material-ui/icons/AccountCircle'
+import SvgPeople from '@material-ui/icons/People'
+import List from '@material-ui/core/List'
+import Typography from '@material-ui/core/Typography'
+import IconButton from '@material-ui/core/IconButton'
+import Hidden from '@material-ui/core/Hidden'
+import MenuIcon from '@material-ui/icons/Menu'

 // - Import app components
 import Sidebar from 'src/components/sidebar'
--- a/src/containers/login/LoginComponent.tsx
+++ b/src/containers/login/LoginComponent.tsx
@@ -3,14 +3,14 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { NavLink, withRouter } from 'react-router-dom'
 import { push } from 'react-router-redux'
-import Paper from 'material-ui/Paper'
-import TextField from 'material-ui/TextField'
-import RaisedButton from 'material-ui/Button'
-import Button from 'material-ui/Button'
-import IconButton from 'material-ui/IconButton'
-import Divider from 'material-ui/Divider'
-import ActionAndroid from 'material-ui-icons/Android'
-import { withStyles } from 'material-ui/styles'
+import Paper from '@material-ui/core/Paper'
+import TextField from '@material-ui/core/TextField'
+import RaisedButton from '@material-ui/core/Button'
+import Button from '@material-ui/core/Button'
+import IconButton from '@material-ui/core/IconButton'
+import Divider from '@material-ui/core/Divider'
+import ActionAndroid from '@material-ui/icons/Android'
+import { withStyles } from '@material-ui/core/styles'
 import config from 'src/config'
 import { localize } from 'react-localize-redux'

@@ -19,7 +19,7 @@ import * as authorizeActions from 'src/store/actions/authorizeActions'
 import { ILoginComponentProps } from './ILoginComponentProps'
 import { ILoginComponentState } from './ILoginComponentState'
 import { OAuthType } from 'src/core/domain/authorize'
-import Grid from 'material-ui/Grid/Grid'
+import Grid from '@material-ui/core/Grid/Grid'
 import CommonAPI from 'api/CommonAPI'

 const styles = (theme: any) => ({
--- a/src/containers/master/MasterComponent.tsx
+++ b/src/containers/master/MasterComponent.tsx
@@ -4,8 +4,8 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { Route, Switch, NavLink, withRouter, Redirect } from 'react-router-dom'
 import { push } from 'react-router-redux'
-import Snackbar from 'material-ui/Snackbar'
-import { LinearProgress } from 'material-ui/Progress'
+import Snackbar from '@material-ui/core/Snackbar'
+import LinearProgress from '@material-ui/core/LinearProgress'
 import {Helmet} from 'react-helmet'
 import {Map} from 'immutable'

--- a/src/containers/people/PeopleComponent.tsx
+++ b/src/containers/people/PeopleComponent.tsx
@@ -3,11 +3,12 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 import PropTypes from 'prop-types'
-import Tabs, { Tab } from 'material-ui/Tabs'
-import { grey, cyan } from 'material-ui/colors'
+import Tabs from '@material-ui/core/Tabs'
+import Tab from '@material-ui/core/Tab'
+import { grey, cyan } from '@material-ui/core/colors'
 import { push } from 'react-router-redux'
-import AppBar from 'material-ui/AppBar'
-import Typography from 'material-ui/Typography'
+import AppBar from '@material-ui/core/AppBar'
+import Typography from '@material-ui/core/Typography'
 import { getTranslate, getActiveLanguage } from 'react-localize-redux'
 import {Map} from 'immutable'

--- a/src/containers/profile/ProfileComponent.tsx
+++ b/src/containers/profile/ProfileComponent.tsx
@@ -2,9 +2,9 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
-import Dialog from 'material-ui/Dialog'
-import Button from 'material-ui/Button'
-import RaisedButton from 'material-ui/Button'
+import Dialog from '@material-ui/core/Dialog'
+import Button from '@material-ui/core/Button'
+import RaisedButton from '@material-ui/core/Button'
 import { getTranslate, getActiveLanguage } from 'react-localize-redux'
 import {Map} from 'immutable'

--- a/src/containers/profile/dialogTitle/DialogTitleComponent.tsx
+++ b/src/containers/profile/dialogTitle/DialogTitleComponent.tsx
@@ -1,10 +1,10 @@
 // - Import react components
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { grey } from 'material-ui/colors'
-import SvgClose from 'material-ui-icons/Close'
-import Button from 'material-ui/Button'
-import Divider from 'material-ui/Divider'
+import { grey } from '@material-ui/core/colors'
+import SvgClose from '@material-ui/icons/Close'
+import Button from '@material-ui/core/Button'
+import Divider from '@material-ui/core/Divider'
 import { IDialogTitleComponentProps } from './IDialogTitleComponentProps'
 import { IDialogTitleComponentState } from './IDialogTitleComponentState'

--- a/src/containers/resetPassword/ResetPasswordComponent.tsx
+++ b/src/containers/resetPassword/ResetPasswordComponent.tsx
@@ -7,13 +7,13 @@ import config from 'src/config'
 import { getTranslate, getActiveLanguage } from 'react-localize-redux'

 // - Material UI
-import Paper from 'material-ui/Paper'
-import TextField from 'material-ui/TextField'
-import RaisedButton from 'material-ui/Button'
-import Button from 'material-ui/Button'
-import { withStyles } from 'material-ui/styles'
-import Typography from 'material-ui/Typography'
-import { Grid } from 'material-ui'
+import Paper from '@material-ui/core/Paper'
+import TextField from '@material-ui/core/TextField'
+import RaisedButton from '@material-ui/core/Button'
+import Button from '@material-ui/core/Button'
+import { withStyles } from '@material-ui/core/styles'
+import Typography from '@material-ui/core/Typography'
+import { Grid } from '@material-ui/core'

 // - Import actions
 import * as authorizeActions from 'src/store/actions/authorizeActions'
--- a/src/containers/setting/SettingComponent.tsx
+++ b/src/containers/setting/SettingComponent.tsx
@@ -3,11 +3,11 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { NavLink, withRouter } from 'react-router-dom'
 import { push } from 'react-router-redux'
-import Paper from 'material-ui/Paper'
-import TextField from 'material-ui/TextField'
-import RaisedButton from 'material-ui/Button'
-import Button from 'material-ui/Button'
-import { withStyles } from 'material-ui/styles'
+import Paper from '@material-ui/core/Paper'
+import TextField from '@material-ui/core/TextField'
+import RaisedButton from '@material-ui/core/Button'
+import Button from '@material-ui/core/Button'
+import { withStyles } from '@material-ui/core/styles'
 import config from 'src/config'
 import { getTranslate, getActiveLanguage } from 'react-localize-redux'

@@ -15,7 +15,7 @@ import { getTranslate, getActiveLanguage } from 'react-localize-redux'
 import * as authorizeActions from 'src/store/actions/authorizeActions'
 import { ISettingComponentProps } from './ISettingComponentProps'
 import { ISettingComponentState } from './ISettingComponentState'
-import { Grid } from 'material-ui'
+import { Grid } from '@material-ui/core'

 const styles = (theme: any) => ({
  textField: {
--- a/src/containers/signup/SignupComponent.tsx
+++ b/src/containers/signup/SignupComponent.tsx
@@ -3,11 +3,11 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { push } from 'react-router-redux'
 import { NavLink, withRouter } from 'react-router-dom'
-import Paper from 'material-ui/Paper'
-import TextField from 'material-ui/TextField'
-import RaisedButton from 'material-ui/Button'
-import Button from 'material-ui/Button'
-import { withStyles } from 'material-ui/styles'
+import Paper from '@material-ui/core/Paper'
+import TextField from '@material-ui/core/TextField'
+import RaisedButton from '@material-ui/core/Button'
+import Button from '@material-ui/core/Button'
+import { withStyles } from '@material-ui/core/styles'
 import config from 'src/config'
 import { getTranslate, getActiveLanguage } from 'react-localize-redux'

@@ -21,7 +21,7 @@ import StringAPI from 'src/api/StringAPI'
 import { ISignupComponentProps } from './ISignupComponentProps'
 import { ISignupComponentState } from './ISignupComponentState'
 import { UserRegisterModel } from 'src/models/users/userRegisterModel'
-import { Grid } from 'material-ui'
+import { Grid } from '@material-ui/core'

 const styles = (theme: any) => ({
  textField: {
--- a/src/containers/stream/StreamComponent.tsx
+++ b/src/containers/stream/StreamComponent.tsx
@@ -3,11 +3,16 @@ import React, { Component } from 'react'
 import { withRouter } from 'react-router-dom'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
-import Button from 'material-ui/Button'
-import { grey, teal } from 'material-ui/colors'
-import SvgCamera from 'material-ui-icons/PhotoCamera'
-import Paper from 'material-ui/Paper'
-import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List'
+import Button from '@material-ui/core/Button'
+import { grey, teal } from '@material-ui/core/colors'
+import SvgCamera from '@material-ui/icons/PhotoCamera'
+import Paper from '@material-ui/core/Paper'
+import ListItemText from '@material-ui/core/ListItemText'
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
+import ListItem from '@material-ui/core/ListItem'
+import List from '@material-ui/core/List'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemAvatar from '@material-ui/core/ListItemAvatar'
 import InfiniteScroll from 'react-infinite-scroller'
 import { getTranslate, getActiveLanguage } from 'react-localize-redux'
 import { Map, List as ImuList } from 'immutable'
--- a/src/data/firestoreClient/index.ts
+++ b/src/data/firestoreClient/index.ts
@@ -10,7 +10,7 @@ try {
    storageBucket: config.firebase.storageBucket,
    messagingSenderId: config.firebase.messagingSenderId
  }
-
+  
  firebase.initializeApp(firebaseConfig)
 } catch (error) {
  console.log('=========Firebase firestore initializer==============')
@@ -22,8 +22,12 @@ try {
 export let storageRef = firebase.storage().ref()

 // Initialize Cloud Firestore through Firebase
-export const db = firebase.firestore()
-
+const db = firebase.firestore()
+const settings = {timestampsInSnapshots: true}
+db.settings(settings)
+export {
+  db
+}
 // - Database authorize
 export let firebaseAuth = firebase.auth
 export let firebaseRef = firebase.database().ref()
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,7 +2,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import injectTapEventPlugin from 'react-tap-event-plugin'
-import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'
+import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'
 import 'reflect-metadata'
 import 'typeface-roboto'
 import registerServiceWorker from './registerServiceWorker'
--- a/src/layouts/appInput/AppInputComponent.tsx
+++ b/src/layouts/appInput/AppInputComponent.tsx
@@ -1,13 +1,13 @@
 // - Import react components
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { grey } from 'material-ui/colors'
-import SvgClose from 'material-ui-icons/Close'
-import Button from 'material-ui/Button'
-import Divider from 'material-ui/Divider'
+import { grey } from '@material-ui/core/colors'
+import SvgClose from '@material-ui/icons/Close'
+import Button from '@material-ui/core/Button'
+import Divider from '@material-ui/core/Divider'
 import { IAppInputComponentProps } from './IAppInputComponentProps'
 import { IAppInputComponentState } from './IAppInputComponentState'
-import { TextField } from 'material-ui'
+import { TextField } from '@material-ui/core'

 /**
 * Create component class
--- a/src/layouts/dialogTitle/DialogTitleComponent.tsx
+++ b/src/layouts/dialogTitle/DialogTitleComponent.tsx
@@ -1,10 +1,10 @@
 // - Import react components
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { grey } from 'material-ui/colors'
-import SvgClose from 'material-ui-icons/Close'
-import Button from 'material-ui/Button'
-import Divider from 'material-ui/Divider'
+import { grey } from '@material-ui/core/colors'
+import SvgClose from '@material-ui/icons/Close'
+import Button from '@material-ui/core/Button'
+import Divider from '@material-ui/core/Divider'
 import { IDialogTitleComponentProps } from './IDialogTitleComponentProps'
 import { IDialogTitleComponentState } from './IDialogTitleComponentState'

--- a/src/layouts/iconButtonElement/IconButtonElementComponent.tsx
+++ b/src/layouts/iconButtonElement/IconButtonElementComponent.tsx
@@ -1,8 +1,8 @@
 // - Import react components
 import React, { Component } from 'react'
-import IconButton from 'material-ui/IconButton'
-import MoreVertIcon from 'material-ui-icons/MoreVert'
-import { grey } from 'material-ui/colors'
+import IconButton from '@material-ui/core/IconButton'
+import MoreVertIcon from '@material-ui/icons/MoreVert'
+import { grey } from '@material-ui/core/colors'

 /**
 * DOM styles
--- a/src/layouts/loadMoreProgress/LoadMoreProgressComponent.tsx
+++ b/src/layouts/loadMoreProgress/LoadMoreProgressComponent.tsx
@@ -1,7 +1,7 @@
 // - Import react components
 import React, { Component } from 'react'
-import { teal } from 'material-ui/colors'
-import { CircularProgress } from 'material-ui/Progress'
+import { teal } from '@material-ui/core/colors'
+import CircularProgress from '@material-ui/core/CircularProgress'

 /**
 * Create component class
--- a/src/store/sagas/localeSaga.ts
+++ b/src/store/sagas/localeSaga.ts
@@ -13,7 +13,6 @@ import { GlobalActionType } from 'constants/globalActionType'
 * Initialize localization
 */
 function* initLocalization() {
-    debugger
    const languages = [
        { name: 'English', code: LanguageType.English },
        { name: 'French', code: LanguageType.French },
--- a/src/store/sagas/rootSaga.ts
+++ b/src/store/sagas/rootSaga.ts
@@ -3,7 +3,6 @@ import commentSaga from './commentSaga'
 import localeSaga from './localeSaga'

 export default function* root() {
-  debugger
    yield all([
      localeSaga(),
      commentSaga(),
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -372,7 +372,7 @@ select:-webkit-autofill:focus {
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  box-sizing: border-box;
  font-family: Roboto, sans-serif;
-  -webkit-tap-highlight-color: transparent;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
  border-radius: 50%;
  display: inline-block;
@@ -391,7 +391,7 @@ select:-webkit-autofill:focus {
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  box-sizing: border-box;
  font-family: Roboto, sans-serif;
-  -webkit-tap-highlight-color: transparent;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
  border-radius: 50%;
  display: inline-block;
@@ -559,9 +559,9 @@ g__input-underline::after {
  padding: 24px;
  flex-direction: row;
  align-items: center;
-  background-color: transparent;
-  background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.46));
-  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.46));
+  background-color: rgba(0, 0, 0, 0);
+  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.46));
+  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.46));
  display: flex; }
  .profile__head-info div.left {
    display: flex;
--- a/tslint.json
+++ b/tslint.json
@@ -45,7 +45,7 @@
        ],
        "no-consecutive-blank-lines": true,
        "no-construct": true,
-        "no-debugger": false,
+        "no-debugger": true,
        "no-duplicate-variable": true,
        "no-empty": false,
        "no-eval": true,
--- a/yarn.lock
+++ b/yarn.lock