Add 'Mark as Done' icon on a Footstep

[xlogix]

We're working on adding a progress bar on a learning path. A progress bar can only 'progress' if the user is able to select the Footstep(s) and mark them as 'done'.

Refer to issue #17

[Samriddhi25]

I would like to take this task

[xlogix]

Assigned!

[aditianshu]

@xlogix this issue is necessary for another issue I'm assigned for, the issue has been dormant for long, can I be assigned if it's okay?

[xlogix]

Go ahead!

[aditianshu]

@xlogix is this okay?

[xlogix]

Can we add a Fab (with check icon) on the side so this button doesn't take unnecessary space? See the possibilities in Ant Design

[aditianshu]

Okay, I'll check it out.

[aditianshu]

@xlogix
FAB wasn't available in the design module, I've added a button.

[xlogix]

Alright. maybe you can make it bigger and keep it on the right? Make it half-way on the card and half outside... maybe that'll look better

[aditianshu]

@xlogix done!
Made a PR.

[xlogix]

Can you put up a screenshot?

[aditianshu]

@xlogix
The tick looked out of place when below the arrow of visit website therefore it's in the extreme right. I reduced the size of the description a bit, as I had to fit it.

[aditianshu]

Also, I had an issue with the checks, could you help me with it?😅

[xlogix]

Let's move it to the top right? The bottom looks a bit more cluttered. @R3l3ntl3ss Any ideas?

[D3vd]

Moving it to somewhere in the top sounds good to me.

[aditianshu]

@xlogix how about this? Next to the title. Looks neat.

[xlogix]

Can you just add a green background to the icon?

Also, convert all the shadows in the page to:

• Blur: 17px
• Color: #222222
• Opacity: 9% or 11%

[aditianshu]

Added the background and modified the shadows

[xlogix]

Awesome @aditianshu. Have you pushed the changes in the PR you raised?

[aditianshu]

I've pushed the changes in the PR