diff --git a/packages/core/src/components/WarningPanel/WarningPanel.test.js b/packages/core/src/components/WarningPanel/WarningPanel.test.tsx
similarity index 100%
rename from packages/core/src/components/WarningPanel/WarningPanel.test.js
rename to packages/core/src/components/WarningPanel/WarningPanel.test.tsx
diff --git a/packages/core/src/components/WarningPanel/WarningPanel.js b/packages/core/src/components/WarningPanel/WarningPanel.tsx
similarity index 64%
rename from packages/core/src/components/WarningPanel/WarningPanel.js
rename to packages/core/src/components/WarningPanel/WarningPanel.tsx
index 679f7511d8..17b9548b81 100644
--- a/packages/core/src/components/WarningPanel/WarningPanel.js
+++ b/packages/core/src/components/WarningPanel/WarningPanel.tsx
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Typography, withStyles } from '@material-ui/core';
+import React, { FC } from 'react';
+import { Typography, withStyles, makeStyles } from '@material-ui/core';
+import { BackstageTheme } from '@backstage/theme';
 import ErrorOutline from '@material-ui/icons/ErrorOutline';
 
 const errorOutlineStyles = theme => ({
@@ -27,7 +27,7 @@ const errorOutlineStyles = theme => ({
 });
 const ErrorOutlineStyled = withStyles(errorOutlineStyles)(ErrorOutline);
 
-const styles = theme => ({
+const useStyles = makeStyles<typeof BackstageTheme>(theme => ({
   message: {
     display: 'flex',
     flexDirection: 'column',
@@ -47,34 +47,35 @@ const styles = theme => ({
   messageText: {
     color: theme.palette.warningText,
   },
-});
+}));
 
 /**
  * WarningPanel. Show a user friendly error message to a user similar to ErrorPanel except that the warning panel
  * only shows the warning message to the user
  */
-class WarningPanel extends Component {
-  static propTypes = {
-    message: PropTypes.node.isRequired,
-  };
 
-  render() {
-    const { classes, title, message, children } = this.props;
-    return (
-      <div className={classes.message}>
-        <div className={classes.header}>
-          <ErrorOutlineStyled />
-          <Typography className={classes.headerText} variant="subtitle1">
-            {title}
-          </Typography>
-        </div>
-        {message && (
-          <Typography className={classes.messageText}>{message}</Typography>
-        )}
-        {children}
+type Props = {
+  message?: React.ReactNode;
+  title?: string;
+};
+
+const WarningPanel: FC<Props> = props => {
+  const classes = useStyles(props);
+  const { title, message, children } = props;
+  return (
+    <div className={classes.message}>
+      <div className={classes.header}>
+        <ErrorOutlineStyled />
+        <Typography className={classes.headerText} variant="subtitle1">
+          {title}
+        </Typography>
       </div>
-    );
-  }
-}
+      {message && (
+        <Typography className={classes.messageText}>{message}</Typography>
+      )}
+      {children}
+    </div>
+  );
+};
 
-export default withStyles(styles)(WarningPanel);
+export default WarningPanel;
diff --git a/packages/core/src/components/WarningPanel/index.js b/packages/core/src/components/WarningPanel/index.ts
similarity index 100%
rename from packages/core/src/components/WarningPanel/index.js
rename to packages/core/src/components/WarningPanel/index.ts