fix: Fix the dark theme in ThreatModel Print Preview page (#124)

* fix: Fix the dark theme in ThreatModel Print Preview page

* chore: Fix the alignment of the theme toggle

packages/threat-composer-app/src/containers/ThreatModelPreview/index.tsx

@@ -13,11 +13,27 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  ******************************************************************************************************************** */
+/** @jsxImportSource @emotion/react */
 import { ThreatModelView } from '@aws/threat-composer';
-import Box from '@cloudscape-design/components/box';
+import { Container } from '@cloudscape-design/components';
+import * as awsui from '@cloudscape-design/design-tokens';
+import { css } from '@emotion/react';
 import { FC, useEffect, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 
+const styles = {
+  container: css({
+    'background': awsui.colorBackgroundContainerContent,
+    'width': '100vw',
+    'height': '100vh',
+    '&>div': {
+      border: 'none !important',
+      borderRadius: '0px !important',
+      boxShadow: 'none !important',
+    },
+  }),
+};
+
 const ThreatModelPreview: FC = () => {
   const { dataKey } = useParams();
 
@@ -37,11 +53,11 @@ const ThreatModelPreview: FC = () => {
     };
   }, [dataKey]);
 
-  if (!data) {
-    return <Box>No content</Box>;
-  }
-
-  return <ThreatModelView composerMode='Full' data={data} isPreview />;
+  return (<div css={styles.container}>
+    <Container>
+      {data ? <ThreatModelView composerMode='Full' data={data} isPreview /> : <div>No content</div>}
+    </Container>
+  </div>);
 };
 
 export default ThreatModelPreview;

packages/threat-composer/src/components/generic/ThemeToggle/index.tsx

@@ -22,11 +22,6 @@ import { css } from '@emotion/react';
 import { useThemeContext } from '../ThemeProvider';
 
 const styles = {
-  container: css({
-    height: '100%',
-    display: 'flex',
-    alignItems: 'center',
-  }),
   svg: css({
     color: 'grey !important',
     fill: 'grey !important',
@@ -35,7 +30,7 @@ const styles = {
 
 const ThemeToggle = () => {
   const { theme, setTheme } = useThemeContext();
-  return (<div css={styles.container}>
+  return (<div>
     <SpaceBetween direction="horizontal" size="xs">
       <Toggle
         onChange={({ detail }) =>

packages/threat-composer/src/components/workspaces/WorkspaceSelector/index.tsx

@@ -13,6 +13,8 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  ******************************************************************************************************************** */
+/** @jsxImportSource @emotion/react */
+
 import DeleteConfirmationDialog from '@aws-northstar/ui/components/DeleteConfirmationDialog';
 import Alert from '@cloudscape-design/components/alert';
 import Button from '@cloudscape-design/components/button';
@@ -25,6 +27,7 @@ import {
 } from '@cloudscape-design/components/internal/events';
 import Select, { SelectProps } from '@cloudscape-design/components/select';
 import SpaceBetween from '@cloudscape-design/components/space-between';
+import { css } from '@emotion/react';
 import { FC, useMemo, useState, useCallback, PropsWithChildren } from 'react';
 import { APP_MODE_IDE_EXTENSION } from '../../../configs';
 import {
@@ -41,11 +44,23 @@ import {
 } from '../../../customTypes';
 import useImportExport from '../../../hooks/useExportImport';
 import useRemoveData from '../../../hooks/useRemoveData';
+import getMobileMediaQuery from '../../../utils/getMobileMediaQuery';
 import isWorkspaceExample from '../../../utils/isWorkspaceExample';
 import ThemeToggle from '../../generic/ThemeToggle';
 import EditWorkspace from '../../workspaces/EditWorkspace';
 import FileImport from '../../workspaces/FileImport';
 
+const styles = {
+  themeToggle: css({
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    [getMobileMediaQuery()]: {
+      display: 'none',
+    },
+  }),
+};
+
 export interface WorkspaceSelectorProps {
   embededMode: boolean;
   enabledExportAll?: boolean;
@@ -360,7 +375,7 @@ const WorkspaceSelector: FC<PropsWithChildren<WorkspaceSelectorProps>> = ({
             onItemClick={handleMoreActions}
           />
         )}
-        {appMode !== 'ide-extension' && composerMode === 'Full' && <ThemeToggle />}
+        {appMode !== 'ide-extension' && composerMode === 'Full' && <div css={styles.themeToggle}><ThemeToggle /></div>}
       </SpaceBetween>
       {fileImportModalVisible && (
         <FileImport

projenrc/app.ts

@@ -15,6 +15,7 @@ class ThreatComposerReactAppProject extends ReactTypeScriptProject {
         "@cloudscape-design/global-styles",
         "@cloudscape-design/design-tokens",
         "@aws-northstar/ui",
+        "@emotion/react",
         "@uidotdev/usehooks",
         "react-router-dom",
         "uuid",