After reviewing the documents, I couldn't find any answers to my questions. Is there a way to create some space between the buttons? Currently, they are positioned right next to each other. Thank you!
import React from "react";
import { connect } from "react-redux";
class Todo extends React.Component {
state = {
color: null
}
render() {
let color;
if(this.props.todo.priorityLevel === "3" ) {
color = "#ff5252 red accent-2";
} else if (this.props.todo.priorityLevel === "2") {
color = "#ff8a65 deep-orange lighten-2";
} else {
color = "#fff176 yellow lighten-2";
}
return(
<div className={"card-panel " + color}>
<div id="todoInfo">
<h2>{`Title: ${this.props.todo.todoTitle}`}</h2>
<span id="todoDescription">{`Description: ${this.props.todo.description}`}</span>
<span id="todoPriorityLevel">{`Priority Level: ${this.props.todo.priorityLevel}`}</span>
</div>
<div id="todoActions">
<button className="btn-floating btn-large cyan pulse actionButtons" onClick={()=>this.props.dispatch({type:"EDIT_TODO", id: this.props.todo.id})}>Edit</button>
<button className="btn waves-effect #d50000 red accent-4 pulse actionButtons" onClick={()=>this.props.dispatch({type:"DELETE_TODO", id: this.props.todo.id})}>Delete</button>
</div>
</div>
)
}
}
export default connect()(Todo);