customize textfield

packages/yoroi-extension/app/components/common/TextField.js

@@ -0,0 +1,94 @@
+/* eslint-disable no-nested-ternary */
+// @flow
+import type { Node } from 'react';
+import { IconButton, InputAdornment, TextField as TextFieldBase } from '@mui/material';
+import ErrorIcon from '../../assets/images/forms/error.inline.svg';
+import DoneIcon from '../../assets/images/forms/done.inline.svg';
+import { styled } from '@mui/system';
+import EyeIcon from '../../assets/images/forms/password-eye-close.inline.svg';
+import CloseEyeIcon from '../../assets/images/forms/password-eye.inline.svg';
+import React from 'react';
+
+type Props = {|
+  error?: boolean | string,
+  done?: boolean,
+  type: string,
+  className?: string,
+  value: any,
+  disabled?: boolean,
+  label?: string,
+|};
+
+export default function TextField({
+  label,
+  value,
+  disabled,
+  error,
+  done,
+  type,
+  className,
+  ...props
+}: Props): Node {
+  const [showPassword, setShowPassword] = React.useState(false);
+  const handleClickShowPassword = () => {
+    setShowPassword(prev => !prev);
+  };
+  const handleMouseDownPassword = event => {
+    event.preventDefault();
+  };
+  return (
+    <STextField
+      fullWidth
+      className={className}
+      error={error}
+      label={label}
+      value={value}
+      disabled={disabled}
+      type={type !== 'password' ? type : showPassword ? 'text' : 'password'}
+      InputProps={{
+        endAdornment:
+          type === 'password' ? (
+            <InputAdornment
+              position="end"
+              sx={{ minWidth: '52px', display: 'flex', justifyContent: 'flex-end' }}
+            >
+              {error !== null && error === true ? (
+                <ErrorIcon />
+              ) : done !== null && done === true ? (
+                <DoneIcon />
+              ) : null}
+              <IconButton
+                aria-label="toggle password visibility"
+                onClick={handleClickShowPassword}
+                onMouseDown={handleMouseDownPassword}
+                edge="end"
+              >
+                {showPassword ? <EyeIcon /> : <CloseEyeIcon />}
+              </IconButton>
+            </InputAdornment>
+          ) : (
+            <InputAdornment position="end">
+              {error !== null && error === true ? (
+                <ErrorIcon />
+              ) : done !== null && done === true ? (
+                <DoneIcon />
+              ) : null}
+            </InputAdornment>
+          ),
+      }}
+      {...props}
+    />
+  );
+}
+TextField.defaultProps = {
+  label: '',
+  done: false,
+  error: '',
+  className: '',
+  disabled: false,
+};
+const STextField = styled(TextFieldBase)(({ theme }) => ({
+  paddingBottom: 20,
+  marginTop: theme.name === 'classic' ? 0 : 10,
+  marginBottom: 10,
+}));

packages/yoroi-extension/app/styles/overrides/TextField.js

@@ -2,12 +2,15 @@
 const ClassicTextField = {
   styleOverrides: {
     root: {
-      minWidth: 400,
+      // minWidth: 400,
+      width: '100%',
       borderColor: 'var(--mui-input-border-color)',
+      marginTop: '24px',
       '& label': {
         color: 'var(--mui-input-placeholder-color)',
-        marginTop: '-45px',
-        left: '-12px',
+        position: 'relative',
+        top: 'unset',
+        marginBottom: '10px',
         letterSpacing: '1.12px',
         fontWeight: 500,
       },
@@ -24,6 +27,7 @@ const ClassicTextField = {
         height: '1.2em',
       },
       '& .MuiOutlinedInput-root': {
+        paddingRight: '16px',
         '& fieldset': {
           borderColor: 'var(--mui-input-border-color)',
           borderRadius: 0,
@@ -41,14 +45,17 @@ const ClassicTextField = {
           color: 'var(--mui-input-text-color-disabled)',
         },
         '&.Mui-error fieldset': {
-          borderColor: 'var(--mui-input-border-color-errored)',
+          borderColor: 'var(--mui-input-border-color-error)',
         },
       },
       '& .MuiSelect-select': {
         backgroundColor: 'white',
       },
       '& .MuiFormHelperText-root': {
-        letterSpacing: '0.4px',
+        marginLeft: 0,
+        fontWeight: 400,
+        position: 'absolute',
+        bottom: '-2px',
       },
     },
   },
@@ -80,6 +87,7 @@ const ModernTextField = {
         height: '1.2em',
       },
       '& .MuiOutlinedInput-root': {
+        paddingRight: '16px',
         '& fieldset': {
           borderColor: 'var(--mui-input-border-color)',
           borderRadius: 8,
@@ -97,7 +105,7 @@ const ModernTextField = {
           color: 'var(--mui-input-text-color-disabled)',
         },
         '&.Mui-error fieldset': {
-          borderColor: 'var(--mui-input-border-color-errored)',
+          borderColor: 'var(--mui-input-border-color-error)',
         },
       },
       '& .MuiSelect-select': {
@@ -106,6 +114,10 @@ const ModernTextField = {
       },
       '& .MuiFormHelperText-root': {
         letterSpacing: '0.4px',
+        marginLeft: 0,
+        fontWeight: 400,
+        position: 'absolute',
+        bottom: '-2px',
       },
     },
   },