Added shadow to avatar and buttons

[Ki-er]

Proposed Changes

• Added shadow to buttons and avatar - closes #191

Screenshot (If Applicable)

Checklist

• [x] Tested locally
• [x] Ran yarn ci to test my code
• [x] Did not add any unnecessary changes
• [x] All my changes appear after other changes in each file
• [x] Included a screenshot (if adding a new button)
• [x] 🚀

[timothystewart6]

Hey! Thanks! I was thinking of making this configurable with an ENV variable, rather than forcing it on everyone. Something like DROP_SHADOW: true

I was also considering using the Google Material 2dp values

box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);

https://material.io/design/environment/light-shadows.html#shadows

[jjjonesjr33]

Looks good 😄

[jjjonesjr33]

Hey! Thanks! I was thinking of making this configurable with an ENV variable, rather than forcing it on everyone. Something like DROP_SHADOW: true

I was also considering using the Google Material 2dp values

box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);

https://material.io/design/environment/light-shadows.html#shadows

@timothystewart6 I tested the box shadow that you listed, in comparison you can't really tell there is a shadow with. It's almost more of an outline?

Example with your code for shadow

box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20); 

Vs my original

    box-shadow: 5px 5px 5px #0000006e;

Now if there was a way to have a user set their own that could be dynamic that would be awesome or even a dynamic setting like - none, light, medium, or heavy using your DROP_SHADOW: variable. I do like that idea!

[Ki-er]

Will close this for now due to having no idea how to implement the above ideas 😆, if anyone has any guidance them feel free to lemme know and ill try implement it and reopen this PR 😆

[Choubakawa]

Will close this for now due to having no idea how to implement the above ideas 😆, if anyone has any guidance them feel free to lemme know and ill try implement it and reopen this PR 😆

A way to implement it with a boolean in DROP_SHADOW:

Add a new CSS class in brands.css and Avatar.css or higher in normalize.css:

.box-shadow {
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);
}

In Button.js and Avatar.js you add a new condition in className on DROP_SHADOW to add or not the class box-shadow.

it will look like this:

className={  styles ? 'button' : `button button-${name}` + runtimeConfig?.DROP_SHADOW ? ' shadow' : '' }

To use light, medium or heavy instead of a boolean you can use a method, something like this (you will need to have 3 CSS classes .box-shadow-light / .box-shadow-medium / .box-shadow-heavy) :

const addShadow = () => {
    let shadow = '';
     switch (runtimeConfig?.DROP_SHADOW) {
        case 'light':
          shadow = ' shadow-light';
          break;
        case 'medium':
          shadow = ' shadow-medium';
          break;
        case 'heavy':
          shadow = ' shadow-heavy';
          break;
        default:
          break;
     }
    return shadow;
  };

and in className:

className={  styles ? 'button' : `button button-${name}` + addShadow }