Update logos site-wide with new OpenSearch branding

[tmarkley]

Description

• Overall, I couldn't figure out a way to import a custom SVG as an EUI iconType and include it with CSS. I resorted to importing the SVG files and using them directly in the EUI components as stated in the documentation.
• The header logo component would not accept an SVG so I created a React SVG component instead.
• The elastic logo SVG code was still in the Template component so I replaced that with the OpenSearch mark.
• There is still a reference to the heatmap icon in src/plugins/home/public/application/components/tutorial/introduction.test.js but it's unclear how that is used outside of the test or whether it needs to be changed.
• The welcome logo needed to use the centered mark because of the spacing, but that required changing the padding.
• I don't yet know how to test the icons used for each of the plugins: dev_tools, opensearch_logs, opensearch_metrics, or the management plugin.

Brand Guidelines: https://opensearch.org/brand.html

Loading

Welcome

Header

Issues Resolved

#370

Check List

• New functionality includes testing.
  • Unit tests pass
  • Integration tests pass
  • Functional tests pass (WIP)
• New functionality has been documented.
  • New functionality has javadoc added (N/A)
• Commits are signed per the DCO using --signoff

[opensearch-ci-bot]

✅   DCO Check Passed a9661a6

[kavilla]

Functional tests are passing. I think overall looks good. It mimics how svgs are import EUI but can probably have some conditionality based on if the user is using darkmode or not

[kavilla]

I think for draft purposes it's probably like this but we can probably be consistent with the other svgs were an svg file was created and accessed in the react component (without the helper functions):

addBasePath(
 `/plugins/${PLUGIN_ID}/assets/opensearch_dashboards_${appId}_${
   IS_DARK_THEME ? 'dark' : 'light'
   }.svg`
 )}

then we just make this opensearch_dashboards_logo.tsx

[tmarkley]

Are you saying that this code would go in header_logo.tsx? Where do the PLUGIN_ID, appId, and IS_DARK_THEME props get passed in to the component from?

[tmarkley]

And how do I test enabling/disabling dark mode?

[tmarkley]

In order to get these changes out for 1.0, I've added a follow-up task to the meta issue to address this feature for darkmode/default logos based on the theme: #372

[ananzh]

LGTM

[kavilla]

Followup and improvements can be made but good first pass for replacing the heatmap.