Added copy button and description input type

Client/src/Components/TextFields/Field/index.css

@@ -4,12 +4,14 @@
 .field h3.MuiTypography-root,
 .field h5.MuiTypography-root,
 .field input,
+.field textarea,
 .field .input-error {
   font-size: var(--env-var-font-size-medium);
 }
 .field h3.MuiTypography-root,
 .field h5.MuiTypography-root,
-.field input {
+.field input,
+.field textarea {
   color: var(--env-var-color-5);
 }
 .field h3.MuiTypography-root {
@@ -28,22 +30,42 @@
   opacity: 0.8;
   padding-right: var(--env-var-spacing-1-minus);
 }
-.field .MuiInputBase-root {
+.field .MuiInputBase-root:has(input) {
   height: 34px;
 }
 .field .MuiInputBase-root:has(.MuiInputAdornment-root) {
   padding-right: var(--env-var-spacing-1-minus);
 }
+.field .MuiInputBase-root:has(.MuiInputAdornment-root > .MuiButtonBase-root) {
+  padding-right: 0;
+}
+.field .MuiInputBase-root .MuiInputAdornment-root .MuiButtonBase-root {
+  padding: 0 var(--env-var-spacing-1-minus);
+  font-size: var(--env-var-font-size-medium);
+  border-radius: 0;
+  height: 34px;
+}
+.field .MuiInputBase-root .MuiInputAdornment-root .MuiButtonBase-root svg {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+.field .MuiInputBase-root .MuiInputAdornment-root .MuiButtonBase-root:hover {
+  border-color: var(--env-var-color-29);
+}
 .field input {
   height: 100%;
   padding: 0 var(--env-var-spacing-1-minus);
 }
+.field .MuiInputBase-root:has(textarea) {
+  padding: var(--env-var-spacing-1-minus);
+}
 .field .MuiOutlinedInput-root fieldset {
   border-color: var(--env-var-color-29);
   border-radius: var(--env-var-radius-1);
 }
 .field:not(:has(.input-error))
-  .MuiOutlinedInput-root:hover:not(:has(input:focus))
+  .MuiOutlinedInput-root:hover:not(:has(input:focus)):not(:has(textarea:focus))
   fieldset {
   border-color: var(--env-var-color-29);
 }

Client/src/Components/TextFields/Field/index.jsx

@@ -8,7 +8,10 @@ import {
 } from "@mui/material";
 import VisibilityOff from "@mui/icons-material/VisibilityOff";
 import Visibility from "@mui/icons-material/Visibility";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import Button from "../../Button";
 import "./index.css";
+import { useState } from "react";
 
 const Field = ({
   type = "text",
@@ -18,6 +21,7 @@ const Field = ({
   isOptional,
   isVisible,
   setVisibility,
+  hasCopy,
   autoComplete,
   placeholder,
   value,
@@ -27,6 +31,13 @@ const Field = ({
 }) => {
   const theme = useTheme();
 
+  // TODO - are we using this feature anywhere ?
+  const [copy, setCopy] = useState(false);
+  const handleCopy = () => {
+    setCopy(true);
+    setTimeout(() => setCopy(false), 1000);
+  };
+
   return (
     <Stack gap={theme.gap.xs} className={`field field-${type}`}>
       {label && (
@@ -41,6 +52,8 @@ const Field = ({
         id={id}
         autoComplete={autoComplete}
         placeholder={placeholder}
+        multiline={type === "description"}
+        rows={type === "description" ? 4 : 1}
         value={value}
         onChange={onChange}
         disabled={disabled}
@@ -57,28 +70,48 @@ const Field = ({
               <Typography component="h5">https://</Typography>
             </Stack>
           ),
-          endAdornment: type === "password" && (
-            <InputAdornment position="end">
-              <IconButton
-                aria-label="toggle password visibility"
-                onClick={() => setVisibility((show) => !show)}
-                tabIndex={-1}
-                sx={{
-                  color: theme.palette.section.borderColor,
-                  padding: `calc(${theme.gap.xs} / 2)`,
-                  "&:focus": {
-                    outline: "none",
-                  },
-                  "& .MuiTouchRipple-root": {
-                    pointerEvents: "none",
-                    display: "none",
-                  },
-                }}
-              >
-                {!isVisible ? <VisibilityOff /> : <Visibility />}
-              </IconButton>
-            </InputAdornment>
-          ),
+          endAdornment:
+            type === "password" ? (
+              <InputAdornment position="end">
+                <IconButton
+                  aria-label="toggle password visibility"
+                  onClick={() => setVisibility((show) => !show)}
+                  tabIndex={-1}
+                  sx={{
+                    color: theme.palette.section.borderColor,
+                    padding: `calc(${theme.gap.xs} / 2)`,
+                    "&:focus": {
+                      outline: "none",
+                    },
+                    "& .MuiTouchRipple-root": {
+                      pointerEvents: "none",
+                      display: "none",
+                    },
+                  }}
+                >
+                  {!isVisible ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              </InputAdornment>
+            ) : (
+              hasCopy && (
+                <InputAdornment position="end">
+                  <Button
+                    level="tertiary"
+                    label={copy ? "Copied" : "Copy"}
+                    img={<ContentCopyIcon />}
+                    onClick={handleCopy}
+                    sx={{
+                      borderLeft: `solid 1px ${theme.palette.section.borderColor}`,
+                      lineHeight: 0,
+                      "& .MuiTouchRipple-root": {
+                        pointerEvents: "none",
+                        display: "none",
+                      },
+                    }}
+                  />
+                </InputAdornment>
+              )
+            ),
         }}
       />
       {error && (