fix brand messaging storybook

packages/fxa-settings/src/components/BrandMessaging/index.stories.tsx

@@ -5,29 +5,18 @@
 import React from 'react';
 import { Meta } from '@storybook/react';
 import { withLocalization } from 'fxa-react/lib/storybooks';
-import { BrandMessagingPortal } from '.';
+import { BrandMessaging } from '.';
-import { MockSettingsAppLayout } from '../Settings/AppLayout/mocks';
 
 export default {
   title: 'Components/BrandMessaging',
-  component: BrandMessagingPortal,
+  component: BrandMessaging,
   decorators: [withLocalization],
 } as Meta;
 
-export const NoLaunch = () => (
-  <MockSettingsAppLayout>
-    <BrandMessagingPortal viewName="storybook" />
-  </MockSettingsAppLayout>
-);
-
 export const PreLaunch = () => (
-  <MockSettingsAppLayout>
+  <BrandMessaging mode="prelaunch" viewName="storybook" />
-    <BrandMessagingPortal mode="prelaunch" viewName="storybook" />
-  </MockSettingsAppLayout>
 );
 
 export const PostLaunch = () => (
-  <MockSettingsAppLayout>
+  <BrandMessaging mode="postlaunch" viewName="storybook" />
-    <BrandMessagingPortal mode="postlaunch" viewName="storybook" />
-  </MockSettingsAppLayout>
 );

packages/fxa-settings/src/components/Settings/AppLayout/mocks.tsx

@@ -2,6 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+import React from 'react';
 import AppLayout from '.';
 import { createMockSettingsIntegration } from '../mocks';
 

packages/fxa-settings/src/react-app-env.d.ts

@@ -55,7 +55,7 @@ declare module '*.webp' {
 }
 
 declare module '*.svg' {
-  import * as React from 'react';
+  import React from 'react';
 
   export const ReactComponent: React.FunctionComponent<
     React.SVGProps<SVGSVGElement> & { title?: string }