Skip to content

Commit

Permalink
add graphics
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiaorongw
xiaorongw committed Jun 17, 2020
1 parent 3a358ae commit 774bac7
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 25 deletions.
20 changes: 19 additions & 1 deletion src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,14 @@ h1, h2, h3 {
margin-top: 15px;
}

/* .task-input {
transition: all 1s ease-in;
} */

.task-input:hover {
transform: scale(1.01);
}

span.today-date {
padding-left: 10px;
color: #606060;
Expand Down Expand Up @@ -102,6 +110,16 @@ span.today-date {

.emoji {
/* opacity: 0.7; */
width: 23px;
width: 27px;
margin-right: 3px;
}

.today-img {
width: 70px;
margin-right: 10px;
}

.addtask-img {
width: 25px;
margin-right: 10px;
}
Binary file added src/assets/add-task.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/today.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
65 changes: 41 additions & 24 deletions src/components/TodoInputComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,33 +57,50 @@ class TodoInput extends Component {
</div>
<div className='row'>
<div className='col'>
<Card body style={{backgroundColor:'rgba(136, 144, 133, 0.7)', borderColor: 'rgb(235, 236, 231)', marginTop:'10px', borderRadius:'20px'}}>
<Form onSubmit={this.handleSubmit}>
<div className='row d-flex justify-content-between'>
<div className='col-10'>
<Input type='text' placeholder='Task of the day' value={this.state.task} onChange={this.handleChange} />
<Card body className='task-input'
style={{backgroundColor:'rgba(136, 144, 133, 0.7)', borderColor: 'rgb(235, 236, 231)', marginTop:'10px', borderRadius:'20px'}}>
<div className='container'>
<div className='row d-flex justify-content-center align-items-center'>
<div className='col-1'>
<img className='today-img' src={require('../assets/today.png')} />
</div>
<div className='col-2'>
<SingleDatePicker
date={this.state.date} // momentPropTypes.momentObj or null
onDateChange={date => this.setState({ date })} // PropTypes.func.isRequired
focused={this.state.focused} // PropTypes.bool
onFocusChange={({ focused }) => this.setState({ focused })} // PropTypes.func.isRequired
id="your_unique_id" // PropTypes.string.isRequired,
placeholder="Due date"
small
block
numberOfMonths={1}
anchorDirection="right"
/>
</div>
</div>
<div className='row' style={{marginTop:'10px'}}>
<div className='col d-flex justify-content-start'>
<Button type='submit' className='task-button'>Add Task</Button>
<div className='col-11'>
<Form onSubmit={this.handleSubmit}>
<div className='row'>
<div className='col'>
<Input type='text' placeholder='Task of the day' value={this.state.task} onChange={this.handleChange} />
</div>
</div>
<div className='row' style={{marginTop:'10px'}}>
<div className='col d-flex justify-content-between'>
<Button type='submit' className='task-button'>
<img className='addtask-img' src={require('../assets/add-task.png')} />
Add Task
</Button>
</div>
<div className='col-2'>
<SingleDatePicker
date={this.state.date} // momentPropTypes.momentObj or null
onDateChange={date => this.setState({ date })} // PropTypes.func.isRequired
focused={this.state.focused} // PropTypes.bool
onFocusChange={({ focused }) => this.setState({ focused })} // PropTypes.func.isRequired
id="your_unique_id" // PropTypes.string.isRequired,
placeholder="Due date"
small
block
numberOfMonths={1}
anchorDirection="right"
/>
</div>
</div>
</Form>
</div>

</div>
</Form>
</div>



</Card>
</div>
</div>
Expand Down

0 comments on commit 774bac7

Please sign in to comment.