move the banner into react-world and use the theme

Author: ryan953

static/app/bootstrap/printConsoleBanner.ts

@@ -0,0 +1,27 @@
+export default function printConsoleBanner(color: string, fontFamily: string) {
+  // eslint-disable-next-line no-console
+  console.log(
+    `%c
+       ██████╗ ███████╗███╗   ██╗████████╗██████╗ ██╗   ██╗
+      ██╔════╝ ██╔════╝████╗  ██║╚══██╔══╝██╔══██╗╚██╗ ██╔╝
+      ╚█████╗  █████╗  ██╔██╗ ██║   ██║   ██████╔╝ ╚████╔╝
+       ╚═══██╗ ██╔══╝  ██║╚██╗██║   ██║   ██╔══██╗  ╚██╔╝
+      ██████╔╝ ███████╗██║ ╚████║   ██║   ██║  ██║   ██║
+      ╚═════╝  ╚══════╝╚═╝  ╚═══╝   ╚═╝   ╚═╝  ╚═╝   ╚═╝
+
+      👋 Hey, you opened the console!
+
+      Found a bug?
+      Yeah, we probably know about it. We literally built a company
+      around finding and fixing bugs. The irony isn't lost on us.
+
+      📚 Docs: https://docs.sentry.io/
+      💬 Ideas? Complaints? Hot takes? https://github.com/getsentry/sentry/discussions
+
+      Like poking around in dev tools? We like that about you.
+      We're hiring: https://sentry.io/careers/
+      (We have snacks. And opinions about error handling.)
+    `,
+    `color: ${color}; font-family: ${fontFamily};`
+  );
+}

static/app/components/themeAndStyleProvider.tsx

@@ -1,8 +1,9 @@
-import {Fragment, lazy, useMemo} from 'react';
+import {Fragment, lazy, useEffect, useMemo} from 'react';
 import {createPortal} from 'react-dom';
 import createCache from '@emotion/cache';
 import {CacheProvider, ThemeProvider} from '@emotion/react';
 
+import printConsoleBanner from 'sentry/bootstrap/printConsoleBanner';
 import {NODE_ENV} from 'sentry/constants';
 import ConfigStore from 'sentry/stores/configStore';
 import {useLegacyStore} from 'sentry/stores/useLegacyStore';
@@ -60,6 +61,11 @@ export function ThemeAndStyleProvider({children}: Props) {
   useHotkeys(themeToggleHotkey);
 
   const theme = config.theme === 'dark' ? darkTheme : lightTheme;
+  useEffect(() => {
+    if (NODE_ENV !== 'development') {
+      printConsoleBanner(theme.colors.blue400, theme.text.familyMono);
+    }
+  }, [theme]);
 
   return (
     <ThemeProvider theme={theme}>

static/app/index.tsx

@@ -68,32 +68,6 @@
 // [1]: https://sentry.io/careers/
 
 async function app() {
-  // eslint-disable-next-line no-console
-  console.log(
-    `%c
-    ██████╗ ███████╗███╗   ██╗████████╗██████╗ ██╗   ██╗
-   ██╔════╝ ██╔════╝████╗  ██║╚══██╔══╝██╔══██╗╚██╗ ██╔╝
-   ╚█████╗  █████╗  ██╔██╗ ██║   ██║   ██████╔╝ ╚████╔╝
-    ╚═══██╗ ██╔══╝  ██║╚██╗██║   ██║   ██╔══██╗  ╚██╔╝
-   ██████╔╝ ███████╗██║ ╚████║   ██║   ██║  ██║   ██║
-   ╚═════╝  ╚══════╝╚═╝  ╚═══╝   ╚═╝   ╚═╝  ╚═╝   ╚═╝
-
-   👋 Hey, you opened the console!
-
-   Found a bug?
-   Yeah, we probably know about it. We literally built a company
-   around finding and fixing bugs. The irony isn't lost on us.
-
-   📚 Docs (we wrote them, please read them): https://docs.sentry.io/
-   💬 Ideas? Complaints? Hot takes? https://github.com/getsentry/sentry/discussions
-
-   Like poking around in dev tools? We like that about you.
-   We're hiring: https://sentry.io/careers/
-   (We have snacks. And opinions about error handling.)
-`,
-    `color: #6C5FC7; font-family: 'Roboto Mono', Monaco, Consolas, 'Courier New', monospace;`
-  );
-
   // We won't need initalizeMainImport until we complete bootstrapping.
   // Initaite the fetch, just don't await it until we need it.
   const initalizeMainImport = import('sentry/bootstrap/initializeMain');

static/app/main.tsx

@@ -23,7 +23,7 @@ function buildRouter() {
   return router;
 }
 
-function Main() {
+export default function Main() {
   const [router] = useState(buildRouter);
 
   useEffect(() => {
@@ -51,5 +51,3 @@ function Main() {
     </AppQueryClientProvider>
   );
 }
-
-export default Main;