From 6b6d31a556d5ce019dd664a540764998fbd6e7d0 Mon Sep 17 00:00:00 2001
From: Bilawal Hameed <bil@spotify.com>
Date: Fri, 24 Apr 2020 10:40:54 +0200
Subject: [PATCH] migrated RadarEntry to material-ui styles

---
 .../src/components/RadarEntry/RadarEntry.css  | 16 ------------
 .../src/components/RadarEntry/RadarEntry.js   | 26 ++++++++++++++++---
 2 files changed, 22 insertions(+), 20 deletions(-)
 delete mode 100644 plugins/tech-radar/src/components/RadarEntry/RadarEntry.css

diff --git a/plugins/tech-radar/src/components/RadarEntry/RadarEntry.css b/plugins/tech-radar/src/components/RadarEntry/RadarEntry.css
deleted file mode 100644
index dd91c306fd..0000000000
--- a/plugins/tech-radar/src/components/RadarEntry/RadarEntry.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.text {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  pointer-events: none;
-  user-select: none;
-  font-size: 9px;
-  fill: #fff;
-  text-anchor: middle;
-}
-
-.link {
-  cursor: pointer;
-}
diff --git a/plugins/tech-radar/src/components/RadarEntry/RadarEntry.js b/plugins/tech-radar/src/components/RadarEntry/RadarEntry.js
index 3ed881b1a3..a6dc9e1fa0 100644
--- a/plugins/tech-radar/src/components/RadarEntry/RadarEntry.js
+++ b/plugins/tech-radar/src/components/RadarEntry/RadarEntry.js
@@ -16,9 +16,23 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './RadarEntry.css';
+import { withStyles } from '@material-ui/core';
 
-export default class RadarEntry extends React.PureComponent {
+const styles = {
+  text: {
+    pointerEvents: 'none',
+    userSelect: 'none',
+    fontSize: '9px',
+    fill: '#fff',
+    textAnchor: 'middle',
+  },
+
+  link: {
+    cursor: 'pointer',
+  },
+};
+
+class RadarEntry extends React.PureComponent {
   render() {
     const {
       moved,
@@ -30,6 +44,7 @@ export default class RadarEntry extends React.PureComponent {
       onMouseEnter,
       onMouseLeave,
       onClick,
+      classes,
     } = this.props;
 
     const style = { fill: color };
@@ -45,7 +60,7 @@ export default class RadarEntry extends React.PureComponent {
 
     if (url) {
       blip = (
-        <a href={url} className={styles.link}>
+        <a href={url} className={classes.link}>
           {blip}
         </a>
       );
@@ -59,7 +74,7 @@ export default class RadarEntry extends React.PureComponent {
         onClick={onClick}
       >
         {blip}
-        <text y={3} className={styles.text}>
+        <text y={3} className={classes.text}>
           {number}
         </text>
       </g>
@@ -77,4 +92,7 @@ RadarEntry.propTypes = {
   onMouseEnter: PropTypes.func,
   onMouseLeave: PropTypes.func,
   onClick: PropTypes.func,
+  classes: PropTypes.object.isRequired,
 };
+
+export default withStyles(styles)(RadarEntry);