chore: improve copy field border and label behavior & add padding to zoom (#280)

Using hideLabel makes the text field more compact without interfering
with the label if its present

Co-authored-by: Juan <[email protected]>

Author: juaoose

web-editor/src/component/CopyIconTextField.jsx

@@ -18,6 +18,7 @@ export const CopyIconTextField = ({ value, multiline, row, label, type }) => {
   return (
     <TextField
       disabled
+      hiddenLabel
       label={label}
       readOnly
       multiline={multiline}
@@ -28,6 +29,7 @@ export const CopyIconTextField = ({ value, multiline, row, label, type }) => {
       sx={{ paddingRight: "3%" }}
       InputProps={{
         disableUnderline: true,
+        sx: { borderRadius: "8px" },
         startAdornment: (
           <InputAdornment position="start">
             <Tooltip title={copied ? "Copied" : "Copy"} placement={"top"}>

web-editor/src/component/MultipleSelect.jsx

@@ -17,7 +17,7 @@ function MultipleSelect({ selected, setSelected, inputLabel, fullSet }) {
   const rest = fullSet.filter((item) => !selected.includes(item));
 
   return (
-    <Box sx={{ paddingTop: "15px" }}>
+    <Box sx={{ paddingTop: "15px", paddingLeft: "12px" }}>
       <FormControl fullWidth>
         <InputLabel> {inputLabel} </InputLabel>
         <Select

web-editor/src/component/ZoomSlider.jsx

@@ -26,11 +26,11 @@ export const ZoomSlider = ({
   };
 
   return (
-    <Box bgcolor="black">
+    <Box bgcolor="black" paddingLeft={"12px"}>
       <Typography
         id="input-slider"
         gutterBottom
-        sx={{ paddingLeft: "28px", paddingTop: "10px" }}
+        sx={{ paddingLeft: "16px", paddingTop: "10px" }}
       >
         Zoom level
       </Typography>