Fix top and bottom shadow of columns

[Arif-Khalid]

Summary:

Fixes #354 Fixes #353

Type of change:

• 🐛 Bug Fix

Changes Made:

• Change CSS style for bottom shadow to use background image of scroll container
• Refactor shadow style into its own class
• Change background of child elements of scroll to transparent to be able to see background shadow
• Reflect new reference for css shadows

Screenshots:

Before the change After the change

Proposed Commit Message:

A few bugs exist related to column shadows. 
Top shadow is shown when there are no elements
behind header and hidden when there are.
Bottom shadow sticks to the column as a user scrolls.

These are not the intended behaviour of the shadows
to indicate presence of elements behind above or
below columns respectively.

Let's update the CSS to correspond to
appropriate shadow behaviours.

Checklist:

- [x] I have tested my changes thoroughly. - [ ] I have created tests for any new code files created in this PR or provided a link to a issue/PR that addresses this. - [x] I have added or modified code comments to improve code readability where necessary. - [ ] I have updated the project's documentation as necessary.

[damithc]

@Arif-Khalid This is clearly a bug. So, let's write the commit message from that perspective. The current one sounds like we are tweaking the design, not fixing a bug. Also, refactoring should not change behavior. So, this should not be called a refactoring.

Example:

Prevent bottom shadow from sticking to column
---------------------------------------------------
The shadow at the bottom of a column sticks to the column content
as the column is scrolled.

Let's fix this bug so that the shadow stays in place during scrolling.

[Arif-Khalid]

@Arif-Khalid This is clearly a bug. So, let's write the commit message from that perspective. The current one sounds like we are tweaking the design, not fixing a bug. Also, refactoring should not change behavior. So, this should not be called a refactoring.

Example:

Prevent bottom shadow from sticking to column
---------------------------------------------------
The shadow at the bottom of a column sticks to the column content
as the column is scrolled.

Let's fix this bug so that the shadow stays in place during scrolling.

Understood. I have updated my PRs appropriately.