add body txt and standardize btn size

Kira-Pilot · Kira-Pilot · commit 59be45a0a144 · 2022-05-19T16:10:10.000Z
diff --git a/site/src/components/CodeBlock/CodeBlock.tsx b/site/src/components/CodeBlock/CodeBlock.tsx
@@ -35,6 +35,8 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({ lines, ctas, className = "
 const useStyles = makeStyles((theme) => ({
   root: {
     minHeight: 156,
+    maxHeight: 240,
+    overflowY: "scroll",
     background: theme.palette.background.default,
     color: theme.palette.text.primary,
     fontFamily: MONOSPACE_FONT_FAMILY,
diff --git a/site/src/components/RuntimeErrorState/ReportButtons.tsx b/site/src/components/RuntimeErrorState/ReportButtons.tsx
@@ -59,12 +59,14 @@ const useStyles = makeStyles((theme) => ({
     marginLeft: 0,
     flex: theme.spacing(1),
     textTransform: "uppercase",
+    fontSize: theme.typography.button.fontSize,
   },
 
   copyButton: {
     width: "100%",
     marginRight: theme.spacing(1),
     backgroundColor: theme.palette.primary.main,
     textTransform: "uppercase",
+    fontSize: theme.typography.button.fontSize,
   },
 }))
diff --git a/site/src/components/RuntimeErrorState/RuntimeErrorState.tsx b/site/src/components/RuntimeErrorState/RuntimeErrorState.tsx
@@ -2,13 +2,17 @@ import Box from "@material-ui/core/Box"
 import { makeStyles } from "@material-ui/core/styles"
 import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline"
 import React, { useEffect, useReducer } from "react"
+import { Link } from "react-router-dom"
 import { mapStackTrace } from "sourcemapped-stacktrace"
 import { Margins } from "../Margins/Margins"
 import { Section } from "../Section/Section"
+import { Typography } from "../Typography/Typography"
 import { reducer, RuntimeErrorReport, stackTraceAvailable, stackTraceUnavailable } from "./RuntimeErrorReport"
 
 const Language = {
   title: "Coder encountered an error",
+  body: "Please copy the crash log using the button below and",
+  link: "send it to us.",
 }
 
 interface RuntimeErrorStateProps {
@@ -20,7 +24,6 @@ interface RuntimeErrorStateProps {
  */
 const ErrorStateTitle = () => {
   const styles = useStyles()
-
   return (
     <Box className={styles.title} display="flex" alignItems="center">
       <ErrorOutlineIcon />
@@ -29,6 +32,28 @@ const ErrorStateTitle = () => {
   )
 }
 
+/**
+ * A description for our error boundary UI
+ */
+const ErrorStateDescription = () => {
+  const styles = useStyles()
+  return (
+    <Typography variant="body2" color="textSecondary">
+      {Language.body}&nbsp;
+      <Link
+        to="#"
+        onClick={(e) => {
+          window.location.href = "mailto:support@coder.com"
+          e.preventDefault()
+        }}
+        className={styles.link}
+      >
+        {Language.link}
+      </Link>
+    </Typography>
+  )
+}
+
 /**
  * An error UI that is displayed when our error boundary (ErrorBoundary.tsx) is triggered
  */
@@ -47,7 +72,7 @@ export const RuntimeErrorState: React.FC<RuntimeErrorStateProps> = ({ error }) =
   return (
     <Box display="flex" flexDirection="column">
       <Margins>
-        <Section className={styles.reportContainer} title={<ErrorStateTitle />}>
+        <Section className={styles.reportContainer} title={<ErrorStateTitle />} description={<ErrorStateDescription />}>
           <RuntimeErrorReport error={reportState.error} mappedStack={reportState.mappedStack} />
         </Section>
       </Margins>
@@ -65,7 +90,10 @@ const useStyles = makeStyles((theme) => ({
       color: theme.palette.error.main,
     },
   },
-
+  link: {
+    textDecoration: "none",
+    color: theme.palette.primary.main,
+  },
   reportContainer: {
     display: "flex",
     justifyContent: "center",
diff --git a/site/src/components/Stack/Stack.tsx b/site/src/components/Stack/Stack.tsx
@@ -14,8 +14,6 @@ const useStyles = makeStyles((theme) => ({
 }))
 
 export const Stack: React.FC<StackProps> = ({ children, spacing = 2 }) => {
-  throw new Error("uh oh")
-
   const styles = useStyles({ spacing })
   return <div className={styles.stack}>{children}</div>
 }

Original file line number	Diff line number	Diff line change
`@@ -14,8 +14,6 @@ const useStyles = makeStyles((theme) => ({`
`14`	`14`	`}))`
`15`	`15`
`16`	`16`	`export const Stack: React.FC<StackProps> = ({ children, spacing = 2 }) => {`
`17`		`- throw new Error("uh oh")`
`18`		`-`
`19`	`17`	`const styles = useStyles({ spacing })`
`20`	`18`	`return <div className={styles.stack}>{children}</div>`
`21`	`19`	`}`