[TreeView] Make the search textbox more visible

sillsdev · Jul 5, 2024 · 7e8cc83 · 7e8cc83
1 parent 457eafe
commit 7e8cc83
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -14,7 +14,7 @@
     "descriptionP4": "Sign up to get started with your word collection!"
   },
   "treeView": {
-    "findDomain": "Find a domain",
+    "findDomain": "Find a domain:",
     "domainNotFound": "Domain not found",
     "returnToTop": "Return to the top of the domain tree."
   },

diff --git a/src/components/TreeView/TreeSearch.tsx b/src/components/TreeView/TreeSearch.tsx
@@ -1,4 +1,4 @@
-import { Grid, TextField } from "@mui/material";
+import { Stack, TextField, Typography } from "@mui/material";
 import {
   type ChangeEvent,
   type KeyboardEvent,
@@ -41,12 +41,16 @@ export default function TreeSearch(props: TreeSearchProps): ReactElement {
   };
 
   return (
-    <Grid style={{ maxWidth: 200 }}>
+    <Stack
+      alignItems="center"
+      direction="row"
+      gap={1}
+      style={{ maxWidth: 300 }}
+    >
+      <Typography>{t("treeView.findDomain")}</Typography>
       <TextField
-        variant="standard"
         fullWidth
         id="domain-tree-search-field"
-        label={t("treeView.findDomain")}
         onKeyDown={stopPropagation}
         onChange={handleChange}
         onKeyUp={handleOnKeyUp}
@@ -57,7 +61,7 @@ export default function TreeSearch(props: TreeSearchProps): ReactElement {
         error={searchError}
         helperText={searchError ? t("treeView.domainNotFound") : undefined}
       />
-    </Grid>
+    </Stack>
   );
 }