Condense footer (#2555)

ammario · web-flow · commit 9d02a37ba9a3 · 2022-06-21T19:46:43.000Z
Since the footer is included in every page, we should try extra
hard to use little vertical space.

Also, I add an icon to the version text for balance.
diff --git a/site/src/components/Footer/Footer.tsx b/site/src/components/Footer/Footer.tsx
@@ -1,5 +1,6 @@
 import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
+import AccountTreeIcon from "@material-ui/icons/AccountTree"
 import AssistantIcon from "@material-ui/icons/Assistant"
 import * as TypesGen from "../../api/typesGenerated"
 
@@ -22,14 +23,15 @@ export const Footer: React.FC<FooterProps> = ({ buildInfo }) => {
 
   return (
     <div className={styles.root}>
-      <Link className={styles.link} variant="caption" target="_blank" href={githubUrl}>
-        <AssistantIcon className={styles.assistantIcon} /> {Language.reportBugLink}
-      </Link>
       <div className={styles.copyRight}>{Language.copyrightText}</div>
       {buildInfo && (
         <div className={styles.buildInfo}>
           <Link className={styles.link} variant="caption" target="_blank" href={buildInfo.external_url}>
-            {Language.buildInfoText(buildInfo)}
+            <AccountTreeIcon className={styles.icon} /> {Language.buildInfoText(buildInfo)}
+          </Link>
+          &nbsp;|&nbsp;
+          <Link className={styles.link} variant="caption" target="_blank" href={githubUrl}>
+            <AssistantIcon className={styles.icon} /> {Language.reportBugLink}
           </Link>
         </div>
       )}
@@ -51,6 +53,7 @@ const useFooterStyles = makeStyles((theme) => ({
   },
   buildInfo: {
     margin: theme.spacing(0.25),
+    display: "inline-flex",
   },
   link: {
     color: theme.palette.text.secondary,
@@ -59,7 +62,7 @@ const useFooterStyles = makeStyles((theme) => ({
     alignItems: "center",
     justifyContent: "center",
   },
-  assistantIcon: {
+  icon: {
     fontSize: 12,
     color: theme.palette.secondary.dark,
     marginRight: theme.spacing(0.5),
