diff --git a/packages/threat-composer-app/.projen/deps.json b/packages/threat-composer-app/.projen/deps.json index 972bb8dc..2e3030c3 100644 --- a/packages/threat-composer-app/.projen/deps.json +++ b/packages/threat-composer-app/.projen/deps.json @@ -113,6 +113,10 @@ "name": "@cloudscape-design/global-styles", "type": "runtime" }, + { + "name": "@emotion/react", + "type": "runtime" + }, { "name": "@uidotdev/usehooks", "type": "runtime" diff --git a/packages/threat-composer-app/.projen/tasks.json b/packages/threat-composer-app/.projen/tasks.json index 816e9526..5b365c14 100644 --- a/packages/threat-composer-app/.projen/tasks.json +++ b/packages/threat-composer-app/.projen/tasks.json @@ -145,13 +145,13 @@ }, "steps": [ { - "exec": "npx npm-check-updates@16 --upgrade --target=minor --peer --dep=dev,peer,prod,optional --filter=@cloudscape-design/jest-preset,@testing-library/jest-dom,@testing-library/react,@testing-library/user-event,@types/jest,@types/react,@types/react-dom,@types/react-router-dom,@types/uuid,eslint-import-resolver-typescript,eslint-plugin-import,merge,@aws-northstar/ui,@aws/threat-composer,@cloudscape-design/components,@cloudscape-design/design-tokens,@cloudscape-design/global-styles,@uidotdev/usehooks,docx,react,react-dom,react-router-dom,unist-util-visit,uuid,web-vitals" + "exec": "npx npm-check-updates@16 --upgrade --target=minor --peer --dep=dev,peer,prod,optional --filter=@cloudscape-design/jest-preset,@testing-library/jest-dom,@testing-library/react,@testing-library/user-event,@types/jest,@types/react,@types/react-dom,@types/react-router-dom,@types/uuid,eslint-import-resolver-typescript,eslint-plugin-import,merge,@aws-northstar/ui,@aws/threat-composer,@cloudscape-design/components,@cloudscape-design/design-tokens,@cloudscape-design/global-styles,@emotion/react,@uidotdev/usehooks,docx,react,react-dom,react-router-dom,unist-util-visit,uuid,web-vitals" }, { "exec": "yarn install --check-files" }, { - "exec": "yarn upgrade @cloudscape-design/jest-preset @testing-library/jest-dom @testing-library/react @testing-library/user-event @types/jest @types/node @types/react @types/react-dom @types/react-router-dom @types/uuid @typescript-eslint/eslint-plugin @typescript-eslint/parser constructs eslint-import-resolver-typescript eslint-plugin-import eslint merge projen typescript @aws-northstar/ui @aws/threat-composer @cloudscape-design/components @cloudscape-design/design-tokens @cloudscape-design/global-styles @uidotdev/usehooks docx react react-dom react-router-dom react-scripts remark-frontmatter remark-gfm remark-parse unified unist-util-visit uuid web-vitals" + "exec": "yarn upgrade @cloudscape-design/jest-preset @testing-library/jest-dom @testing-library/react @testing-library/user-event @types/jest @types/node @types/react @types/react-dom @types/react-router-dom @types/uuid @typescript-eslint/eslint-plugin @typescript-eslint/parser constructs eslint-import-resolver-typescript eslint-plugin-import eslint merge projen typescript @aws-northstar/ui @aws/threat-composer @cloudscape-design/components @cloudscape-design/design-tokens @cloudscape-design/global-styles @emotion/react @uidotdev/usehooks docx react react-dom react-router-dom react-scripts remark-frontmatter remark-gfm remark-parse unified unist-util-visit uuid web-vitals" }, { "exec": "npx projen" diff --git a/packages/threat-composer-app/package.json b/packages/threat-composer-app/package.json index 052a660d..d751172d 100644 --- a/packages/threat-composer-app/package.json +++ b/packages/threat-composer-app/package.json @@ -44,6 +44,7 @@ "@cloudscape-design/components": "^3.0.517", "@cloudscape-design/design-tokens": "^3.0.34", "@cloudscape-design/global-styles": "^1.0.23", + "@emotion/react": "^11.11.4", "@uidotdev/usehooks": "^2.4.1", "docx": "^8.5.0", "react": "^18.2.0", diff --git a/packages/threat-composer-app/src/containers/ThreatModelPreview/index.tsx b/packages/threat-composer-app/src/containers/ThreatModelPreview/index.tsx index f4fb8e63..67178a74 100644 --- a/packages/threat-composer-app/src/containers/ThreatModelPreview/index.tsx +++ b/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 No content; - } - - return ; + return (
+ + {data ? :
No content
} + +
); }; export default ThreatModelPreview; \ No newline at end of file diff --git a/packages/threat-composer/src/components/generic/ThemeToggle/index.tsx b/packages/threat-composer/src/components/generic/ThemeToggle/index.tsx index b97455e5..797478c1 100644 --- a/packages/threat-composer/src/components/generic/ThemeToggle/index.tsx +++ b/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 (
+ return (
diff --git a/packages/threat-composer/src/components/workspaces/WorkspaceSelector/index.tsx b/packages/threat-composer/src/components/workspaces/WorkspaceSelector/index.tsx index ff062bc8..f01e0344 100644 --- a/packages/threat-composer/src/components/workspaces/WorkspaceSelector/index.tsx +++ b/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> = ({ onItemClick={handleMoreActions} /> )} - {appMode !== 'ide-extension' && composerMode === 'Full' && } + {appMode !== 'ide-extension' && composerMode === 'Full' &&
} {fileImportModalVisible && (