Implement logic for timer

[adilanchian]

FocusBlock will be based on a timer system. The logic for this timer should be as follows:

• [x] Display a customer selector for timer
• [x] Start timer on button click
• [x] If timer time is passed, send out email to designated person
• [x] Create some fancy css animation

This should handle all/most of the logic for the timer.

[adilanchian]

Custom timer option is setup and working.

[adilanchian]

Decision for email client: https://smtpjs.com/ & https://www.sendgrid.com

[adilanchian]

Possible random quote api?

[adilanchian]

Almost done with the block animation. Currently, it pulses green until it reaches half the timer value then switched to yellow. When there is 1 minute left it pulses red until it ends. Need to do the following:

• Instead of starting the local var in the timer method at start set it to whatever the progress in the state is for that time
• Need to find a way to smoothly transition into another color space instead of back to white. I am thinking setting the background color for each class to whatever that progress color is.

[adilanchian]

Went ahead and added tweaking for the way the progress color should be switching.

[adilanchian]

One thing I would like to note is that there should be some sort of reset message or motivational message when stopping a focus block. Will iron this out down the line.

This issue can now be closed.