`Splash` component improvements

This issue describes changes planned for the Splash component in order to make it more customizable.

Customizable logos

Currently, the Splash component’s logo is hard-coded Operational one, with the spinning animation relying on a state flag set every 8 seconds. This should be customizable for outside projects and other use-cases. The following steps are required to make this happen:

• the rotation handling and state management should move from Splash.tsx to Splash.Logo.tsx. This will allow the spinning logo to be self-contained and swappable to a different one with its own animations.
• Splash.tsx should take a logo?: React.ReactNode prop to allow for customizable logos. It should default to the current hard-coded one in case one isn’t provided.

Readable colors

Text colors in the Splash component are currently hard-coded to white, which won’t be readable if the background is set to a very bright color. As in the Button implementation in , this color should toggle between white and dark using the readableTextColor utility. This would involve tweaking animation colors, logo colors and backdrop colors.

Dev workflow

Simply clone the repo and run yarn install + yarn start to get the dev environment going. See React Styleguidist for help developing with styleguidist if you haven’t had the chance to work with it yet.

[adeelibr]

I haven’t yet seen the entire implementation for Splash, i’ll have a look at it when I get free from office today and come up with a approach that we can use for this, i’ll keep the above mentioned guidelines in mind when thinking for an approach for this. @peterszerzo

[TejasQ]

Looking forward to your PR, @adeelibr!