fix: Adds pages bg and removes the pseudo element shadow

pages/app/components/page-view.scss

@@ -0,0 +1,13 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@use '~design-tokens' as tokens;
+
+/*
+ This sets a background color to the page's container
+ to reveal the effects of negative z-index.
+*/
+.page-container {
+  background-color: tokens.$color-background-container-content;
+}

pages/app/components/page-view.tsx

@@ -5,6 +5,8 @@ import React, { lazy, Suspense } from 'react';
 import pagesContext from '../pages-context';
 import ErrorBoundary from './error-boundary';
 
+import styles from './page-view.scss';
+
 const pagesComponents: Record<string, ReturnType<typeof lazy>> = {};
 
 export default function PageView({ pageId }: { pageId: string }) {
@@ -15,7 +17,9 @@ export default function PageView({ pageId }: { pageId: string }) {
   return (
     <ErrorBoundary key={pageId}>
       <Suspense fallback={<span>Loading...</span>}>
-        <Page />
+        <div className={styles['page-container']}>
+          <Page />
+        </div>
       </Suspense>
     </ErrorBoundary>
   );

src/flashbar/collapsible.scss

@@ -90,8 +90,8 @@ the grid layout will be:
     );
   }
 
-  > .item:not(:last-child) > .flash::before,
-  > .item.flash::before {
+  > .item:not(:last-child) > .flash,
+  > .item.flash {
     box-shadow: awsui.$shadow-flash-collapsed;
   }
 }

src/flashbar/styles.scss

@@ -38,18 +38,7 @@
   color: awsui.$color-text-notification-default;
   overflow-wrap: break-word;
   word-wrap: break-word;
-
-  &::before {
-    @include styles.base-pseudo-element;
-    border-start-start-radius: awsui.$border-radius-flashbar;
-    border-start-end-radius: awsui.$border-radius-flashbar;
-    border-end-start-radius: awsui.$border-radius-flashbar;
-    border-end-end-radius: awsui.$border-radius-flashbar;
-    box-shadow: awsui.$shadow-flash-sticky;
-  }
-  &-refresh::before {
-    z-index: -1;
-  }
+  box-shadow: awsui.$shadow-flash-sticky;
 }
 
 .flash-list {