fix(shared-react): move css styles from css file to the Status compon…

…ent (#2601)

.changeset/selfish-bobcats-applaud.md

@@ -0,0 +1,5 @@
+---
+"@janus-idp/shared-react": patch
+---
+
+moved css styles from css file to the Status component

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",

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,20 +55,20 @@ export const StatusIconAndText = ({
   }
 
   return (
-    <span
-      className={classNames('bs-shared-icon-and-text', className)}
+    <Typography
+      className={classNames(styles.iconAndText, className)}
       data-testid={dataTestId ?? `icon-with-title-${title}`}
       title={title}
     >
       {React.cloneElement(icon, {
         className: classNames(
           spin && 'fa-spin',
           icon.props.className,
-          'bs-shared-icon-and-text__icon bs-shared-icon-flex-child',
+          styles.flexChild,
         ),
       })}
       <CamelCaseWrap value={title} dataTest="status-text" />
-    </span>
+    </Typography>
   );
 };