Update Docs for z-index & drop-shadow for better clarity

[nucleogenesis]

🌱 Are you new to the codebase? Welcome! Please see the contributing guidelines.

Desired behavior

In discussion re: learningequality/kolibri#12630 we discussed that the (pr 723 Netlify Deploy version) Elevation & Shadow docs is a bit ambiguous and could use a bit of reworking. (Related Notion doc).

This follows up from #723 which added docs for drop-shadows

• The Google Material Design elevation image is not relevant to our approach to drop-shadows, so it should be moved down to the "z-index" section where it is more relevant.

Acceptance criteria

• The dropshadow image is displayed under the z-index section.

(Optional) The Value Add

Clearer guidance reduces the potential for confusion while referring to the drop-shadow docs.

[RONAK-AI647]

Hey @AlexVelezLl Assign it to me please!!!

[AlexVelezLl]

For sure @RONAK-AI647! Thanks for volunteering!

[RONAK-AI647]

Hey @AlexVelezLl ,it is mentioned 'Google Material Design elevation image is not relevant to our approach to drop-shadows'
I suppose the image under "elevation and shadows" is more relevant .

[AlexVelezLl]

Hey @RONAK-AI647! Yes, its the same image, but it should be shown in the Z-index section where is more relevant

[RONAK-AI647]

@AlexVelezLl ,I am bit confused ,few minutes earlier the pic was this

and now it shows this

Another thing ,if I just move it to z-index, the dropshadows section would look empty ,as the pic is showcased in an example with a logic code.

[AlexVelezLl]

Oh I think you are checking the wrong website 😅. In the issue is described this docs page: https://deploy-preview-723--kolibri-design-system.netlify.app/styling/#elevation which is from our develop branch. There you will find this image which is the one the issue talks about:

[RONAK-AI647]

I was doing the same thing ,but due to misconception ,I stepped back....anyways thankyou @AlexVelezLl I have raised the PR.

[MisRob]

Closed by #819