last bits of touching up

aslilac · aslilac · commit 79ef7a8be64b · 2023-10-06T19:47:56.000Z
diff --git a/site/src/pages/IconsPage/IconsPage.tsx b/site/src/pages/IconsPage/IconsPage.tsx
@@ -9,9 +9,15 @@ import { type ReactNode, useMemo, useState } from "react";
 import uFuzzy from "ufuzzy";
 import { CopyableValue } from "components/CopyableValue/CopyableValue";
 import { Margins } from "components/Margins/Margins";
-import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
+import {
+  PageHeader,
+  PageHeaderSubtitle,
+  PageHeaderTitle,
+} from "components/PageHeader/PageHeader";
 import { Stack } from "components/Stack/Stack";
 import icons from "theme/icons.json";
+import { Box, Link } from "@mui/material";
+import { EmptyState } from "components/EmptyState/EmptyState";
 
 const iconsWithoutSuffix = icons.map((icon) => icon.split(".")[0]);
 const fuzzyFinder = new uFuzzy({
@@ -61,8 +67,33 @@ export default function () {
 
   return (
     <Margins>
-      <PageHeader>
+      <PageHeader
+        actions={
+          <Tooltip
+            placement="bottom-end"
+            title={
+              <Box
+                css={{
+                  padding: theme.spacing(1),
+                  fontSize: 13,
+                  lineHeight: 1.5,
+                }}
+              >
+                You can suggest a new icon by submitting a Pull Request to our
+                public GitHub repository. Just keep in mind that it should be
+                relevant to many Coder users, and redistributable under a
+                permissive license.
+              </Box>
+            }
+          >
+            <Link href="">Suggest an icon</Link>
+          </Tooltip>
+        }
+      >
         <PageHeaderTitle>Icons</PageHeaderTitle>
+        <PageHeaderSubtitle>
+          All of the icons included with Coder
+        </PageHeaderSubtitle>
       </PageHeader>
       <TextField
         size="small"
@@ -113,6 +144,9 @@ export default function () {
         justifyContent="center"
         css={(theme) => ({ marginTop: theme.spacing(4) })}
       >
+        {searchedIcons.length === 0 && (
+          <EmptyState message="No results matched your search" />
+        )}
         {searchedIcons.map((icon) => (
           <CopyableValue key={icon.url} value={icon.url} placement="bottom">
             <Stack alignItems="center" css={{ margin: theme.spacing(1.5) }}>
