Merge pull request #491 from kinvolk/plugins-in-style

plugins: Show how to use styles inside a plugin

plugins/examples/pod-counter/src/index.tsx

@@ -1,24 +1,30 @@
-import React from 'react';
-import { Headlamp, Plugin, Registry, K8s } from '@kinvolk/headlamp-plugin/lib';
+import { Headlamp, K8s, Plugin, Registry } from '@kinvolk/headlamp-plugin/lib';
 import { Typography } from '@material-ui/core';
-
+import { makeStyles } from '@material-ui/styles';
+import React from 'react';
 // import { SectionBox } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 
+const useStyle = makeStyles(() => ({
+  pods: {
+    fontStyle: 'italic',
+  },
+}));
+
 function PodCounter() {
+  const classes = useStyle();
   const [pods, error] = K8s.ResourceClasses.Pod.useList();
   const msg = pods === null ? 'Loading…' : pods.length.toString();
 
   return (
-      <Typography color="textPrimary">{!error ? `# Pods: ${msg}` : 'Uh, pods!?'}</Typography>
+    <Typography color="textPrimary" className={classes.pods}>
+      {!error ? `# Pods: ${msg}` : 'Uh, pods!?'}
+    </Typography>
   );
 }
 
 class PodCounterPlugin extends Plugin {
   initialize(registry: Registry) {
-    registry.registerAppBarAction('pod-counter-action', () =>
-      <PodCounter />
-    );
-
+    registry.registerAppBarAction('pod-counter-action', () => <PodCounter />);
     return true;
   }
 }