Port over QuestionHelp component

bryphe-coder · bryphe-coder · commit ad56a134d46d · 2022-01-31T18:38:13.000Z
diff --git a/site/components/QuestionHelp.tsx b/site/components/QuestionHelp.tsx
@@ -0,0 +1,23 @@
+import { makeStyles } from "@material-ui/core/styles"
+import HelpIcon from "@material-ui/icons/Help"
+import * as React from "react"
+
+export const QuestionHelp: React.FC = () => {
+  const styles = useStyles()
+  return (
+    <HelpIcon className={styles.icon} />
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  icon: {
+    display: "block",
+    height: 20,
+    width: 20,
+    color: theme.palette.text.secondary,
+    opacity: 0.5,
+    "&:hover": {
+      opacity: 1,
+    },
+  },
+}))
diff --git a/site/components/Workspace/Workspace.tsx b/site/components/Workspace/Workspace.tsx
@@ -129,6 +129,7 @@ import TimelineSeparator from '@material-ui/lab/TimelineSeparator';
 import TimelineConnector from '@material-ui/lab/TimelineConnector';
 import TimelineContent from '@material-ui/lab/TimelineContent';
 import TimelineDot from '@material-ui/lab/TimelineDot';
+import { QuestionHelp } from "../QuestionHelp"
 
 export const WorkspaceTimeline: React.FC = () => {
   return <Timeline>
@@ -168,7 +169,7 @@ export const Workspace: React.FC<WorkspaceProps> = ({ workspace }) => {
     <div className={styles.horizontal}>
       <div className={styles.sideBar}>
         <Paper elevation={0} className={styles.section}>
-          <Title>Applications</Title>
+          <Title><span>Applications</span><QuestionHelp /></Title>
 
           <div className={styles.vertical}>
             <ResourceRow name={"Code Web"} icon={"/static/vscode.svg"} status={"active"} />
diff --git a/site/components/index.tsx b/site/components/index.tsx
@@ -1,4 +1,5 @@
 export * from "./Button"
 export * from "./EmptyState"
 export * from "./Page"
+export * from "./QuestionHelp"
 export * from "./Redirect"
