diff --git a/.changeset/selfish-bobcats-applaud.md b/.changeset/selfish-bobcats-applaud.md new file mode 100644 index 0000000000..94fd858927 --- /dev/null +++ b/.changeset/selfish-bobcats-applaud.md @@ -0,0 +1,5 @@ +--- +"@janus-idp/shared-react": patch +--- + +moved css styles from css file to the Status component diff --git a/plugins/shared-react/package.json b/plugins/shared-react/package.json index 2f5a0923f5..1c0d32373f 100644 --- a/plugins/shared-react/package.json +++ b/plugins/shared-react/package.json @@ -43,6 +43,7 @@ "@kubernetes/client-node": "^0.22.1", "@material-ui/core": "^4.12.4", "@mui/icons-material": "5.15.17", + "@mui/material": "^5.15.17", "classnames": "^2.3.2", "date-fns": "^2.30.0", "file-saver": "^2.0.5", diff --git a/plugins/shared-react/src/components/common/StatusIconAndText.css b/plugins/shared-react/src/components/common/StatusIconAndText.css deleted file mode 100644 index f628d3d57e..0000000000 --- a/plugins/shared-react/src/components/common/StatusIconAndText.css +++ /dev/null @@ -1,30 +0,0 @@ -.bs-shared-icon-and-text { - align-items: baseline; - display: flex; - font-weight: 400; - font-size: 14px; -} - -.bs-shared-icon-and-text__icon { - flex-shrink: 0; - margin-right: 5px; -} - -.bs-shared-icon-and-text--lg { - display: block; -} - -.bs-shared-icon-and-text--lg .bs-shared-icon-and-text__icon { - font-size: 1.2rem; - margin-right: 1rem; -} - -.bs-shared-dashboard-icon { - font-size: 1.2rem; -} - -.bs-shared-icon-flex-child { - flex: 0 0 auto; - position: relative; - top: 0.125em; -} diff --git a/plugins/shared-react/src/components/common/StatusIconAndText.tsx b/plugins/shared-react/src/components/common/StatusIconAndText.tsx index 36573aff83..0e3515283a 100644 --- a/plugins/shared-react/src/components/common/StatusIconAndText.tsx +++ b/plugins/shared-react/src/components/common/StatusIconAndText.tsx @@ -1,13 +1,28 @@ import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import Typography from '@mui/material/Typography'; import classNames from 'classnames'; import CamelCaseWrap from './CamelCaseWrap'; -import './StatusIconAndText.css'; - const DASH = '-'; +const useStyles = makeStyles({ + iconAndText: { + alignItems: 'baseline', + display: 'flex', + fontWeight: 400, + fontSize: '14px', + }, + + flexChild: { + flex: ' 0 0 auto', + position: 'relative', + top: '0.125em', + }, +}); + export const StatusIconAndText = ({ icon, title, @@ -23,6 +38,7 @@ export const StatusIconAndText = ({ spin?: boolean; dataTestId?: string; }): React.ReactElement => { + const styles = useStyles(); if (!title) { return <>{DASH}; } @@ -39,8 +55,8 @@ export const StatusIconAndText = ({ } return ( - @@ -48,11 +64,11 @@ export const StatusIconAndText = ({ className: classNames( spin && 'fa-spin', icon.props.className, - 'bs-shared-icon-and-text__icon bs-shared-icon-flex-child', + styles.flexChild, ), })} - + ); }; diff --git a/yarn.lock b/yarn.lock index c89676e3e7..294725f607 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7920,6 +7920,7 @@ __metadata: "@kubernetes/client-node": ^0.22.1 "@material-ui/core": ^4.12.4 "@mui/icons-material": 5.15.17 + "@mui/material": ^5.15.17 "@testing-library/jest-dom": 6.4.8 "@testing-library/react": 14.3.1 "@testing-library/user-event": 14.5.2 @@ -9031,6 +9032,13 @@ __metadata: languageName: node linkType: hard +"@mui/core-downloads-tracker@npm:^5.16.11": + version: 5.16.11 + resolution: "@mui/core-downloads-tracker@npm:5.16.11" + checksum: 87243dedefde3ec4b9b9b84185d48598bc9b0966e829a1d656f47a72e739e3f07a31039d5c010894620693916f53cc146f2870c422d824eca93a8c6ac2d00498 + languageName: node + linkType: hard + "@mui/icons-material@npm:5.15.16": version: 5.15.16 resolution: "@mui/icons-material@npm:5.15.16" @@ -9145,6 +9153,39 @@ __metadata: languageName: node linkType: hard +"@mui/material@npm:^5.15.17": + version: 5.16.11 + resolution: "@mui/material@npm:5.16.11" + dependencies: + "@babel/runtime": ^7.23.9 + "@mui/core-downloads-tracker": ^5.16.11 + "@mui/system": ^5.16.8 + "@mui/types": ^7.2.15 + "@mui/utils": ^5.16.8 + "@popperjs/core": ^2.11.8 + "@types/react-transition-group": ^4.4.10 + clsx: ^2.1.0 + csstype: ^3.1.3 + prop-types: ^15.8.1 + react-is: ^18.3.1 + react-transition-group: ^4.4.5 + peerDependencies: + "@emotion/react": ^11.5.0 + "@emotion/styled": ^11.3.0 + "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + "@types/react": + optional: true + checksum: 6a30ba51377e746ce48181663e9db799c2c78d32759f76a1d69f478f205d15f1fd4ce0d55601d2dbee3ffd341eb978aceb59912d00edff07bd573ecff9600cea + languageName: node + linkType: hard + "@mui/private-theming@npm:^5.15.14, @mui/private-theming@npm:^5.16.6": version: 5.16.6 resolution: "@mui/private-theming@npm:5.16.6" @@ -9162,6 +9203,23 @@ __metadata: languageName: node linkType: hard +"@mui/private-theming@npm:^5.16.8": + version: 5.16.8 + resolution: "@mui/private-theming@npm:5.16.8" + dependencies: + "@babel/runtime": ^7.23.9 + "@mui/utils": ^5.16.8 + prop-types: ^15.8.1 + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 576cf19188c236482a8a698978d3061c7e8d76ba9d891d323ce96d92d6b80d88e1aa2a67fe4698d76b8a43221ef0f8ed21be74971fc684ce1279dc73fd34316b + languageName: node + linkType: hard + "@mui/styled-engine@npm:^5.16.6": version: 5.16.6 resolution: "@mui/styled-engine@npm:5.16.6" @@ -9183,6 +9241,27 @@ __metadata: languageName: node linkType: hard +"@mui/styled-engine@npm:^5.16.8": + version: 5.16.8 + resolution: "@mui/styled-engine@npm:5.16.8" + dependencies: + "@babel/runtime": ^7.23.9 + "@emotion/cache": ^11.11.0 + csstype: ^3.1.3 + prop-types: ^15.8.1 + peerDependencies: + "@emotion/react": ^11.4.1 + "@emotion/styled": ^11.3.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + checksum: 8eab246e985bbe2707af4620a3193166bacefb029df65ac846cfc0ac5d7996fcb72c50327241f60913538f58a2ad9aa6de3ef12b72eb7750c71f8d3c284a420b + languageName: node + linkType: hard + "@mui/styles@npm:5.15.16": version: 5.15.16 resolution: "@mui/styles@npm:5.15.16" @@ -9242,6 +9321,34 @@ __metadata: languageName: node linkType: hard +"@mui/system@npm:^5.16.8": + version: 5.16.8 + resolution: "@mui/system@npm:5.16.8" + dependencies: + "@babel/runtime": ^7.23.9 + "@mui/private-theming": ^5.16.8 + "@mui/styled-engine": ^5.16.8 + "@mui/types": ^7.2.15 + "@mui/utils": ^5.16.8 + clsx: ^2.1.0 + csstype: ^3.1.3 + prop-types: ^15.8.1 + peerDependencies: + "@emotion/react": ^11.5.0 + "@emotion/styled": ^11.3.0 + "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + "@types/react": + optional: true + checksum: 8082b176009fa907cdb0391db59db6cd3589659ad92497caec998c01e1683978ab2eda4ece4d12e523d233b062aa5946d4a438d9a22bf172f0568be1db773e9c + languageName: node + linkType: hard + "@mui/types@npm:^7.2.14, @mui/types@npm:^7.2.15": version: 7.2.18 resolution: "@mui/types@npm:7.2.18" @@ -9274,6 +9381,26 @@ __metadata: languageName: node linkType: hard +"@mui/utils@npm:^5.16.8": + version: 5.16.8 + resolution: "@mui/utils@npm:5.16.8" + dependencies: + "@babel/runtime": ^7.23.9 + "@mui/types": ^7.2.15 + "@types/prop-types": ^15.7.12 + clsx: ^2.1.1 + prop-types: ^15.8.1 + react-is: ^18.3.1 + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: ed714c6aa583bdf17af9f523c9b9ba3789a47677aa6408bc2afd842fa9eaa6d111361c1309435d481ea03b8c695e22ead98c43dc13239c63a3da481c95e5ad72 + languageName: node + linkType: hard + "@n1ru4l/push-pull-async-iterable-iterator@npm:^3.1.0": version: 3.2.0 resolution: "@n1ru4l/push-pull-async-iterable-iterator@npm:3.2.0"