Merge pull request #1733 from nymtech/417-inputs-label

Wallet: make input's label always shrink

nym-wallet/src/components/Accounts/modals/AddAccountModal.tsx

@@ -122,6 +122,7 @@ const NameAccount = ({ onNext, onBack }: { onNext: (value: string) => void; onBa
             setError(undefined);
           }}
           fullWidth
+          InputLabelProps={{ shrink: true }}
         />
       </DialogContent>
       <DialogActions sx={{ p: 3, pt: 0, gap: 2 }}>

nym-wallet/src/components/Accounts/modals/EditAccountModal.tsx

@@ -55,6 +55,7 @@ export const EditAccountModal = () => {
               value={accountName}
               onChange={(e) => setAccountName(e.target.value)}
               autoFocus
+              InputLabelProps={{ shrink: true }}
             />
           </Box>
         </DialogContent>

nym-wallet/src/components/Bonding/forms/BondGatewayForm.tsx

@@ -47,6 +47,7 @@ const NodeFormData = ({ gatewayData, onNext }: { gatewayData: GatewayData; onNex
         label="Sphinx key"
         error={Boolean(errors.sphinxKey)}
         helperText={errors.sphinxKey?.message}
+        InputLabelProps={{ shrink: true }}
       />
       <TextField
         {...register('ownerSignature')}
@@ -54,6 +55,7 @@ const NodeFormData = ({ gatewayData, onNext }: { gatewayData: GatewayData; onNex
         label="Owner signature"
         error={Boolean(errors.ownerSignature)}
         helperText={errors.ownerSignature?.message}
+        InputLabelProps={{ shrink: true }}
       />
       <TextField
         {...register('location')}
@@ -62,6 +64,7 @@ const NodeFormData = ({ gatewayData, onNext }: { gatewayData: GatewayData; onNex
         error={Boolean(errors.location)}
         helperText={errors.location?.message}
         required
+        InputLabelProps={{ shrink: true }}
         sx={{ flexBasis: '50%' }}
       />
       <Stack direction="row" gap={3}>
@@ -72,6 +75,7 @@ const NodeFormData = ({ gatewayData, onNext }: { gatewayData: GatewayData; onNex
           error={Boolean(errors.host)}
           helperText={errors.host?.message}
           required
+          InputLabelProps={{ shrink: true }}
           sx={{ flexBasis: '50%' }}
         />
         <TextField
@@ -81,6 +85,7 @@ const NodeFormData = ({ gatewayData, onNext }: { gatewayData: GatewayData; onNex
           error={Boolean(errors.version)}
           helperText={errors.version?.message}
           required
+          InputLabelProps={{ shrink: true }}
           sx={{ flexBasis: '50%' }}
         />
       </Stack>
@@ -97,6 +102,7 @@ const NodeFormData = ({ gatewayData, onNext }: { gatewayData: GatewayData; onNex
             error={Boolean(errors.mixPort)}
             helperText={errors.mixPort?.message}
             fullWidth
+            InputLabelProps={{ shrink: true }}
           />
           <TextField
             {...register('clientsPort')}
@@ -105,6 +111,7 @@ const NodeFormData = ({ gatewayData, onNext }: { gatewayData: GatewayData; onNex
             error={Boolean(errors.clientsPort)}
             helperText={errors.clientsPort?.message}
             fullWidth
+            InputLabelProps={{ shrink: true }}
           />
         </Stack>
       )}

nym-wallet/src/components/Bonding/forms/BondMixnodeForm.tsx

@@ -47,6 +47,7 @@ const NodeFormData = ({ mixnodeData, onNext }: { mixnodeData: MixnodeData; onNex
         label="Sphinx key"
         error={Boolean(errors.sphinxKey)}
         helperText={errors.sphinxKey?.message}
+        InputLabelProps={{ shrink: true }}
       />
       <TextField
         {...register('ownerSignature')}
@@ -54,6 +55,7 @@ const NodeFormData = ({ mixnodeData, onNext }: { mixnodeData: MixnodeData; onNex
         label="Owner signature"
         error={Boolean(errors.ownerSignature)}
         helperText={errors.ownerSignature?.message}
+        InputLabelProps={{ shrink: true }}
       />
       <Stack direction="row" gap={3}>
         <TextField
@@ -63,6 +65,7 @@ const NodeFormData = ({ mixnodeData, onNext }: { mixnodeData: MixnodeData; onNex
           error={Boolean(errors.host)}
           helperText={errors.host?.message}
           required
+          InputLabelProps={{ shrink: true }}
           sx={{ flexBasis: '50%' }}
         />
         <TextField
@@ -72,6 +75,7 @@ const NodeFormData = ({ mixnodeData, onNext }: { mixnodeData: MixnodeData; onNex
           error={Boolean(errors.version)}
           helperText={errors.version?.message}
           required
+          InputLabelProps={{ shrink: true }}
           sx={{ flexBasis: '50%' }}
         />
       </Stack>
@@ -88,6 +92,7 @@ const NodeFormData = ({ mixnodeData, onNext }: { mixnodeData: MixnodeData; onNex
             error={Boolean(errors.mixPort)}
             helperText={errors.mixPort?.message}
             fullWidth
+            InputLabelProps={{ shrink: true }}
           />
           <TextField
             {...register('verlocPort')}
@@ -96,6 +101,7 @@ const NodeFormData = ({ mixnodeData, onNext }: { mixnodeData: MixnodeData; onNex
             error={Boolean(errors.verlocPort)}
             helperText={errors.verlocPort?.message}
             fullWidth
+            InputLabelProps={{ shrink: true }}
           />
           <TextField
             {...register('httpApiPort')}
@@ -104,6 +110,7 @@ const NodeFormData = ({ mixnodeData, onNext }: { mixnodeData: MixnodeData; onNex
             error={Boolean(errors.httpApiPort)}
             helperText={errors.httpApiPort?.message}
             fullWidth
+            InputLabelProps={{ shrink: true }}
           />
         </Stack>
       )}

nym-wallet/src/components/Bonding/modals/BondMoreModal.tsx

@@ -100,7 +100,13 @@ export const BondMoreModal = ({
         </Box>
 
         <Box>
-          <TextField fullWidth label="Signature" value={signature} onChange={(e) => setSignature(e.target.value)} />
+          <TextField
+            fullWidth
+            label="Signature"
+            value={signature}
+            onChange={(e) => setSignature(e.target.value)}
+            InputLabelProps={{ shrink: true }}
+          />
           {errorSignature && <FormHelperText sx={{ color: 'error.main' }}>Invalid signature</FormHelperText>}
         </Box>
 

nym-wallet/src/components/Bonding/modals/NodeSettingsModal.tsx

@@ -114,7 +114,13 @@ export const NodeSettings = ({
           Set profit margin
         </Typography>
         <Box sx={{ mb: 3 }}>
-          <TextField label="Profit margin" value={pm} onChange={(e) => setPm(e.target.value)} fullWidth />
+          <TextField
+            label="Profit margin"
+            value={pm}
+            onChange={(e) => setPm(e.target.value)}
+            fullWidth
+            InputLabelProps={{ shrink: true }}
+          />
           {error && (
             <FormHelperText sx={{ color: 'error.main' }}>
               Profit margin should be a number between 0 and 100

nym-wallet/src/components/Mnemonic.tsx

@@ -30,6 +30,7 @@ export const Mnemonic = ({
           height: '160px',
         },
       }}
+      InputLabelProps={{ shrink: true }}
       sx={{
         'input::-webkit-textfield-decoration-container': {
           alignItems: 'start',

nym-wallet/src/components/Send/SendInputModal.tsx

@@ -62,6 +62,7 @@ export const SendInputModal = ({
           fullWidth
           onChange={(e) => onAddressChange(e.target.value)}
           value={toAddress}
+          InputLabelProps={{ shrink: true }}
         />
         <CurrencyFormField
           label="Amount"

nym-wallet/src/components/textfields.tsx

@@ -26,6 +26,7 @@ export const MnemonicInput: React.FC<{
             height: '160px',
           },
         }}
+        InputLabelProps={{ shrink: true }}
         sx={{
           'input::-webkit-textfield-decoration-container': {
             alignItems: 'start',
@@ -71,6 +72,7 @@ export const PasswordInput: React.FC<{
               </IconButton>
             ),
           }}
+          InputLabelProps={{ shrink: true }}
         />
       </Box>
       {error && <Error message={error} />}

nym-wallet/src/pages/Admin/index.tsx

@@ -35,6 +35,7 @@ const AdminForm: React.FC<{
               fullWidth
               error={!!errors.minimum_mixnode_pledge}
               helperText={`${errors?.minimum_mixnode_pledge?.amount?.message} ${errors?.minimum_mixnode_pledge?.denom?.message}`}
+              InputLabelProps={{ shrink: true }}
             />
           </Grid>
           <Grid item xs={12}>
@@ -48,6 +49,7 @@ const AdminForm: React.FC<{
               fullWidth
               error={!!errors.minimum_gateway_pledge}
               helperText={`${errors?.minimum_gateway_pledge?.amount?.message} ${errors?.minimum_gateway_pledge?.denom?.message}`}
+              InputLabelProps={{ shrink: true }}
             />
           </Grid>
         </Grid>

nym-wallet/src/pages/bonding/node-settings/settings-pages/NodeUnbondPage.tsx

@@ -49,7 +49,12 @@ export const NodeUnbondPage = ({ bondedNode, onConfirm, onError }: Props) => {
             </Typography>
           </Grid>
           <Grid item>
-            <TextField fullWidth value={confirmField} onChange={(e) => setConfirmField(e.target.value)} />
+            <TextField
+              fullWidth
+              value={confirmField}
+              onChange={(e) => setConfirmField(e.target.value)}
+              InputLabelProps={{ shrink: true }}
+            />
           </Grid>
           <Grid item sx={{ mt: 2 }}>
             <Button

nym-wallet/src/pages/bonding/node-settings/settings-pages/general-settings/InfoSettings.tsx

@@ -87,6 +87,7 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon
                 fullWidth
                 error={!!errors.mixPort}
                 helperText={errors.mixPort?.message}
+                InputLabelProps={{ shrink: true }}
               />
             </Grid>
             <Grid item width={1}>
@@ -97,6 +98,7 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon
                 fullWidth
                 error={!!errors.verlocPort}
                 helperText={errors.verlocPort?.message}
+                InputLabelProps={{ shrink: true }}
               />
             </Grid>
             <Grid item width={1}>
@@ -107,6 +109,7 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon
                 fullWidth
                 error={!!errors.httpApiPort}
                 helperText={errors.httpApiPort?.message}
+                InputLabelProps={{ shrink: true }}
               />
             </Grid>
           </Grid>
@@ -137,6 +140,7 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon
                 fullWidth
                 error={!!errors.host}
                 helperText={errors.host?.message}
+                InputLabelProps={{ shrink: true }}
               />
             </Grid>
           </Grid>
@@ -167,6 +171,7 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon
                 fullWidth
                 error={!!errors.version}
                 helperText={errors.version?.message}
+                InputLabelProps={{ shrink: true }}
               />
             </Grid>
           </Grid>

nym-wallet/src/pages/bonding/node-settings/settings-pages/general-settings/ParametersSettings.tsx

@@ -160,6 +160,7 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode
                     </InputAdornment>
                   ),
                 }}
+                InputLabelProps={{ shrink: true }}
               />
               {pendingUpdates && (
                 <FormHelperText>

nym-wallet/src/pages/internal-docs/DocEntry.tsx

@@ -69,6 +69,7 @@ export const DocEntry: React.FC<DocEntryProps> = (props) => {
             label={arg.name}
             id={argKey(props.function.name, arg.name)}
             key={argKey(props.function.name, arg.name)}
+            InputLabelProps={{ shrink: true }}
           />
         ))}
       </div>

nym-wallet/src/pages/settings/profile.tsx

@@ -15,9 +15,9 @@ export const Profile = () => {
             Node identity: {mixnodeDetails?.bond_information.mix_node.identity_key || 'n/a'}
           </Typography>
           <Divider />
-          <TextField label="Mixnode name" disabled />
-          <TextField multiline label="Mixnode description" rows={3} disabled />
-          <TextField label="Link" disabled />
+          <TextField label="Mixnode name" disabled InputLabelProps={{ shrink: true }} />
+          <TextField multiline label="Mixnode description" rows={3} disabled InputLabelProps={{ shrink: true }} />
+          <TextField label="Link" disabled InputLabelProps={{ shrink: true }} />
         </Stack>
       </Box>
       <Box

nym-wallet/src/pages/settings/system-variables.tsx

@@ -131,6 +131,7 @@ export const SystemVariables = ({
             }}
             error={!!errors.profitMarginPercent}
             disabled={isSubmitting}
+            InputLabelProps={{ shrink: true }}
           />
           <DataField
             title="Estimated reward"

ts-packages/react-components/src/components/currency/CurrencyFormField.tsx

@@ -148,6 +148,7 @@ export const CurrencyFormField: React.FC<{
       placeholder={placeholder}
       label={label}
       onChange={handleChange}
+      InputLabelProps={{ shrink: true }}
       sx={sx}
     />
   );

ts-packages/react-components/src/components/mixnodes/IdentityKeyFormField.tsx

@@ -99,6 +99,7 @@ export const IdentityKeyFormField: React.FC<{
       helperText={validationError}
       defaultValue={initialValue}
       onChange={handleChange}
+      InputLabelProps={{ shrink: true }}
     />
   );
 };