Update to match Zalando.

Signed-off-by: Aramis Sennyey <sennyeya@amazon.com>

plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx

@@ -40,6 +40,7 @@ const useStyles = makeStyles<Theme>(theme => ({
     fill: theme.palette.text.primary,
     fontSize: '25px',
     fontWeight: 800,
+    opacity: 0.35,
   },
 }));
 
@@ -62,6 +63,7 @@ const RadarGrid = (props: Props) => {
       y={ringRadius !== undefined ? -ringRadius + 42 : undefined}
       textAnchor="middle"
       className={classes.text}
+      style={{ fill: rings[ringIndex].color }}
     >
       {rings[ringIndex].name}
     </text>,

plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx

@@ -45,6 +45,7 @@ const useStyles = makeStyles<Theme>(theme => ({
   },
   ringEmpty: {
     color: theme.palette.text.secondary,
+    fontSize: '12px',
   },
   ringHeading: {
     pointerEvents: 'none',

plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx

@@ -37,7 +37,9 @@ export const RadarLegendRing = ({
 }: RadarLegendRingProps) => {
   return (
     <div data-testid="radar-ring" key={ring.id} className={classes.ring}>
-      <h3 className={classes.ringHeading}>{ring.name}</h3>
+      <h3 className={classes.ringHeading} style={{ color: ring.color }}>
+        {ring.name}
+      </h3>
       {entries.length === 0 ? (
         <Typography paragraph className={classes.ringEmpty}>
           (empty)

plugins/tech-radar/src/sample.ts

@@ -23,10 +23,10 @@ import {
 } from './api';
 
 const rings = new Array<RadarRing>();
-rings.push({ id: 'adopt', name: 'ADOPT', color: '#93c47d' });
-rings.push({ id: 'trial', name: 'TRIAL', color: '#93d2c2' });
-rings.push({ id: 'assess', name: 'ASSESS', color: '#fbdb84' });
-rings.push({ id: 'hold', name: 'HOLD', color: '#efafa9' });
+rings.push({ id: 'adopt', name: 'ADOPT', color: '#5BA300' });
+rings.push({ id: 'trial', name: 'TRIAL', color: '#009EB0' });
+rings.push({ id: 'assess', name: 'ASSESS', color: '#C7BA00' });
+rings.push({ id: 'hold', name: 'HOLD', color: '#E09B96' });
 
 const quadrants = new Array<RadarQuadrant>();
 quadrants.push({ id: 'infrastructure', name: 'Infrastructure' });