Improve URLBox

seladb · Jan 18, 2024 · 4d81f1c · 4d81f1c
1 parent 59b02d2
commit 4d81f1c
Showing 1 changed file with 25 additions and 19 deletions.
diff --git a/src/components/URLBox/URLBox.tsx b/src/components/URLBox/URLBox.tsx
@@ -1,4 +1,4 @@
-import { Divider, IconButton, InputBase, Paper } from "@mui/material";
+import { Box, IconButton, Paper, TextField } from "@mui/material";
 import StarTrackTooltip from "../../shared/Tooltip";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import LinkIcon from "@mui/icons-material/Link";
@@ -41,24 +41,30 @@ export default function URLBox({ repoInfos }: URLBoxProps) {
   };
 
   return (
-    <Paper
-      component="form"
-      sx={{ display: "flex", alignItems: "center", width: "100%" }}
-      elevation={3}
-    >
-      <LinkIcon sx={{ p: "10px" }} />
-      <InputBase fullWidth sx={{ m: 1 }} disabled value={url} />
-      <Divider sx={{ height: 28, m: 0.5 }} orientation="vertical" />
-      <StarTrackTooltip title="Copied" open={showTooltip} onClose={() => setShowTooltip(false)}>
-        <IconButton
-          color="primary"
-          sx={{ p: "10px" }}
-          aria-label="directions"
-          onClick={copyToClipboard}
-        >
-          <ContentCopyIcon />
-        </IconButton>
-      </StarTrackTooltip>
+    <Paper>
+      <TextField
+        value={url}
+        disabled
+        fullWidth
+        InputProps={{
+          startAdornment: (
+            <Box display="flex" justifyContent="center" sx={{ p: 1 }}>
+              <LinkIcon />
+            </Box>
+          ),
+          endAdornment: (
+            <StarTrackTooltip
+              title="Copied"
+              open={showTooltip}
+              onClose={() => setShowTooltip(false)}
+            >
+              <IconButton color="primary" aria-label="directions" onClick={copyToClipboard}>
+                <ContentCopyIcon />
+              </IconButton>
+            </StarTrackTooltip>
+          ),
+        }}
+      ></TextField>
     </Paper>
   );
 }