make things prettier

aslilac · aslilac · commit 06c166d18c97 · 2023-10-06T19:06:11.000Z
diff --git a/site/src/pages/IconsPage/IconsPage.tsx b/site/src/pages/IconsPage/IconsPage.tsx
@@ -1,9 +1,16 @@
+import TextField from "@mui/material/TextField";
+import InputAdornment from "@mui/material/InputAdornment";
+import Tooltip from "@mui/material/Tooltip";
+import IconButton from "@mui/material/IconButton";
+import SearchIcon from "@mui/icons-material/SearchOutlined";
+import ClearIcon from "@mui/icons-material/CloseOutlined";
+import { useTheme } from "@emotion/react";
 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 { Stack } from "components/Stack/Stack";
-import { colors } from "theme/colors";
 import icons from "theme/icons.json";
 
 const iconsWithoutSuffix = icons.map((icon) => icon.split(".")[0]);
@@ -16,6 +23,7 @@ const fuzzyFinder = new uFuzzy({
 });
 
 export default function () {
+  const theme = useTheme();
   const [searchText, setSearchText] = useState("");
 
   const searchedIcons = useMemo(() => {
@@ -53,32 +61,74 @@ export default function () {
 
   return (
     <Margins>
-      <input
-        type="search"
-        onChange={(event) => setSearchText(event.target.value)}
+      <PageHeader>
+        <PageHeaderTitle>Icons</PageHeaderTitle>
+      </PageHeader>
+      <TextField
+        size="small"
+        InputProps={{
+          "aria-label": "Filter",
+          name: "query",
+          placeholder: "Search...",
+          value: searchText,
+          onChange: (e) => {
+            setSearchText(e.target.value);
+          },
+          sx: {
+            borderRadius: "6px",
+            marginLeft: "-1px",
+            "& input::placeholder": {
+              color: theme.palette.text.secondary,
+            },
+            "& .MuiInputAdornment-root": {
+              marginLeft: 0,
+            },
+          },
+          startAdornment: (
+            <InputAdornment position="start">
+              <SearchIcon
+                sx={{
+                  fontSize: 14,
+                  color: theme.palette.text.secondary,
+                }}
+              />
+            </InputAdornment>
+          ),
+          endAdornment: searchText && (
+            <InputAdornment position="end">
+              <Tooltip title="Clear filter">
+                <IconButton size="small" onClick={() => setSearchText("")}>
+                  <ClearIcon sx={{ fontSize: 14 }} />
+                </IconButton>
+              </Tooltip>
+            </InputAdornment>
+          ),
+        }}
       />
-      <Stack direction="row" wrap="wrap" spacing={1} justifyContent="center">
+
+      <Stack
+        direction="row"
+        wrap="wrap"
+        spacing={1}
+        justifyContent="center"
+        css={(theme) => ({ marginTop: theme.spacing(4) })}
+      >
         {searchedIcons.map((icon) => (
           <CopyableValue key={icon.url} value={icon.url} placement="bottom">
-            <Stack
-              alignItems="center"
-              css={(theme) => ({ margin: theme.spacing(1.5) })}
-            >
+            <Stack alignItems="center" css={{ margin: theme.spacing(1.5) }}>
               <img
                 src={icon.url}
                 css={{
-                  width: 64,
-                  height: 64,
+                  width: 60,
+                  height: 60,
                   objectFit: "contain",
                   pointerEvents: "none",
-                  backgroundColor: colors.gray[14],
-                  borderRadius: 8,
-                  padding: 8,
+                  padding: theme.spacing(1.5),
                 }}
               />
               <p
                 css={{
-                  width: 96,
+                  width: 72,
                   fontSize: 13,
                   textOverflow: "ellipsis",
                   textAlign: "center",
