#100 moved style from class component to styles userdashboard for Add…

…Todo
compgirl123 · Nov 22, 2019 · 16100a9 · 16100a9
1 parent 06219ed
commit 16100a9
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 16 deletions.
diff --git a/tutify/src/components/UserDashboardPage/AddNotif.js b/tutify/src/components/UserDashboardPage/AddNotif.js
@@ -9,20 +9,15 @@ import Avatar from '@material-ui/core/Avatar';
 import Typography from '@material-ui/core/Typography';
 import Divider from '@material-ui/core/Divider';
 
-
-
 class AddNotif extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            todos: [],
-            title: ''
+
         };
     }
 
-
     render() {
-        const { addTodo } = this.props
         const { notif } = this.props
         return (
 
@@ -54,8 +49,6 @@ class AddNotif extends React.Component {
                                 size="small"
                                 color="secondary"
                                 aria-label="add"
-                                onClick={() => addTodo(notif.announcementTitle)}
-
                             >
                                 <AddIcon />
                             </Fab>
@@ -66,7 +59,6 @@ class AddNotif extends React.Component {
             </Grid>
         )
     }
-
 }
 
 export default AddNotif;
diff --git a/tutify/src/components/UserDashboardPage/Todo/AddTodo.js b/tutify/src/components/UserDashboardPage/Todo/AddTodo.js
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { TextField, Paper, Grid } from "@material-ui/core";
 import AddIcon from '@material-ui/icons/Add';
 import Fab from '@material-ui/core/Fab';
+import { withStyles } from "@material-ui/core/styles";
+import * as UserDashboardStyles from '../../../styles/UserDashboard-styles';
 
 export class AddTodo extends Component {
     state = {
@@ -18,11 +20,12 @@ export class AddTodo extends Component {
     onChange = (e) => this.setState({ title: e.target.value });
 
     render() {
+        const { classes } = this.props
         return (
-            <Paper style={{ margin: 12, padding: 12 }}>
+            <Paper className={classes.addTodoPaper}>
                 <form onSubmit={this.onSubmit}>
                     <Grid container >
-                        <Grid xs={10} md={11} item style={{ paddingRight: 16 }}>
+                        <Grid className={classes.addTodoGrid} xs={10} md={11} item>
                             <TextField
                                 placeholder="Add Todo..."
                                 value={this.state.title}
@@ -43,7 +46,6 @@ export class AddTodo extends Component {
                     </Grid>
                 </form>
             </Paper>
-
         )
     }
 }
@@ -53,4 +55,4 @@ AddTodo.propTypes = {
     addTodo: PropTypes.func.isRequired
 }
 
-export default AddTodo;
+export default withStyles(UserDashboardStyles.styles, { withTheme: true })(AddTodo);
diff --git a/tutify/src/styles/UserDashboard-styles.js b/tutify/src/styles/UserDashboard-styles.js
@@ -17,8 +17,11 @@ export const styles = theme => ({
         height:400,
         overflow: 'auto',
       },
-      addToDoButton: {
-          margin: theme.spacing(1),
+      addTodoPaper: {
+        margin: 12, 
+        padding: 12,
       },
-
+      addTodoGrid: {
+        paddingRight: 16,
+      }
   });