Make project template workspace icon tab navigable

apps/src/templates/ProjectTemplateWorkspaceIcon.jsx

@@ -2,6 +2,9 @@ import React from 'react';
 import ReactTooltip from 'react-tooltip';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
+import moduleStyles from './project-template-workspace-icon.module.scss';
+import classNames from 'classnames';
+
 var msg = require('@cdo/locale');
 
 const IMAGE_BASE_URL = '/blockly/media/';
@@ -18,43 +21,36 @@ export default class ProjectTemplateWorkspaceIcon extends React.Component {
 
   render() {
     return (
-      <div style={styles.container}>
-        <img
-          style={styles.projectTemplateIcon}
-          className="projectTemplateWorkspaceIcon"
-          src={IMAGE_BASE_URL + 'connect.svg'}
+      <div className={moduleStyles.container}>
+        <button
+          type="button"
           data-tip
           data-for={this.tooltipId}
           aria-describedby={this.tooltipId}
-          alt={msg.workspaceProjectTemplateLevel()}
-        />
+          data-event="mouseenter mouseleave click"
+          className={moduleStyles.projectTemplateButton}
+        >
+          <img
+            className={classNames(
+              'projectTemplateWorkspaceIcon',
+              moduleStyles.projectTemplateIcon
+            )}
+            src={IMAGE_BASE_URL + 'connect.svg'}
+            alt={msg.workspaceProjectTemplateLevel()}
+          />
+        </button>
         <ReactTooltip
           id={this.tooltipId}
           role="tooltip"
           wrapper="div"
           effect="solid"
           place={this.props.tooltipPlace}
         >
-          <div style={styles.tooltip}>
+          <div className={moduleStyles.tooltip}>
             {msg.workspaceProjectTemplateLevel()}
           </div>
         </ReactTooltip>
       </div>
     );
   }
 }
-
-const styles = {
-  container: {
-    display: 'inline-block',
-  },
-  tooltip: {
-    maxWidth: 200,
-    lineHeight: '20px',
-    whiteSpace: 'normal',
-  },
-  projectTemplateIcon: {
-    marginRight: 5,
-    marginTop: -1,
-  },
-};

apps/src/templates/project-template-workspace-icon.module.scss

@@ -0,0 +1,24 @@
+@import '@cdo/apps/mixins.scss';
+@import 'color.scss';
+
+.container {
+  display: inline-block;
+}
+
+.tooltip {
+  max-width: 200px;
+  line-height: 20px;
+  white-space: normal;
+}
+
+.projectTemplateIcon {
+  padding-top: 9px;
+  padding-bottom: 10px;
+  opacity: 1;
+}
+
+.projectTemplateButton {
+  @include remove-button-styles;
+  margin-right: 5px;
+  margin-bottom: -1px;
+}