From 95f98016ded2453d181fb5237533b5fe40689ece Mon Sep 17 00:00:00 2001
From: Gala <calero.vg@gmail.com>
Date: Wed, 2 Nov 2022 13:49:29 +0100
Subject: [PATCH] make label always shrink

---
 .../src/components/Accounts/modals/AddAccountModal.tsx    | 1 +
 .../src/components/Accounts/modals/EditAccountModal.tsx   | 1 +
 .../src/components/Bonding/forms/BondGatewayForm.tsx      | 7 +++++++
 .../src/components/Bonding/forms/BondMixnodeForm.tsx      | 7 +++++++
 .../src/components/Bonding/modals/BondMoreModal.tsx       | 8 +++++++-
 .../src/components/Bonding/modals/NodeSettingsModal.tsx   | 8 +++++++-
 nym-wallet/src/components/Mnemonic.tsx                    | 1 +
 nym-wallet/src/components/Send/SendInputModal.tsx         | 1 +
 nym-wallet/src/components/textfields.tsx                  | 2 ++
 nym-wallet/src/pages/Admin/index.tsx                      | 2 ++
 .../node-settings/settings-pages/NodeUnbondPage.tsx       | 7 ++++++-
 .../settings-pages/general-settings/InfoSettings.tsx      | 5 +++++
 .../general-settings/ParametersSettings.tsx               | 1 +
 nym-wallet/src/pages/internal-docs/DocEntry.tsx           | 1 +
 nym-wallet/src/pages/settings/profile.tsx                 | 6 +++---
 nym-wallet/src/pages/settings/system-variables.tsx        | 1 +
 .../src/components/currency/CurrencyFormField.tsx         | 1 +
 .../src/components/mixnodes/IdentityKeyFormField.tsx      | 1 +
 18 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/nym-wallet/src/components/Accounts/modals/AddAccountModal.tsx b/nym-wallet/src/components/Accounts/modals/AddAccountModal.tsx
index 8a76dba709..61d6f7b9e5 100644
--- a/nym-wallet/src/components/Accounts/modals/AddAccountModal.tsx
+++ b/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 }}>
diff --git a/nym-wallet/src/components/Accounts/modals/EditAccountModal.tsx b/nym-wallet/src/components/Accounts/modals/EditAccountModal.tsx
index 8ddbb207b3..e5dbd0464e 100644
--- a/nym-wallet/src/components/Accounts/modals/EditAccountModal.tsx
+++ b/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>
diff --git a/nym-wallet/src/components/Bonding/forms/BondGatewayForm.tsx b/nym-wallet/src/components/Bonding/forms/BondGatewayForm.tsx
index 12403f5e98..bf0511d51a 100644
--- a/nym-wallet/src/components/Bonding/forms/BondGatewayForm.tsx
+++ b/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>
       )}
diff --git a/nym-wallet/src/components/Bonding/forms/BondMixnodeForm.tsx b/nym-wallet/src/components/Bonding/forms/BondMixnodeForm.tsx
index 79cd8617e0..721d114961 100644
--- a/nym-wallet/src/components/Bonding/forms/BondMixnodeForm.tsx
+++ b/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>
       )}
diff --git a/nym-wallet/src/components/Bonding/modals/BondMoreModal.tsx b/nym-wallet/src/components/Bonding/modals/BondMoreModal.tsx
index 39aeb6443c..88518abc28 100644
--- a/nym-wallet/src/components/Bonding/modals/BondMoreModal.tsx
+++ b/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>
 
diff --git a/nym-wallet/src/components/Bonding/modals/NodeSettingsModal.tsx b/nym-wallet/src/components/Bonding/modals/NodeSettingsModal.tsx
index 34b35e7a3f..3a8dca5576 100644
--- a/nym-wallet/src/components/Bonding/modals/NodeSettingsModal.tsx
+++ b/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
diff --git a/nym-wallet/src/components/Mnemonic.tsx b/nym-wallet/src/components/Mnemonic.tsx
index c41fde3d86..d445172e9a 100644
--- a/nym-wallet/src/components/Mnemonic.tsx
+++ b/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',
diff --git a/nym-wallet/src/components/Send/SendInputModal.tsx b/nym-wallet/src/components/Send/SendInputModal.tsx
index c27eb58781..a54541d040 100644
--- a/nym-wallet/src/components/Send/SendInputModal.tsx
+++ b/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"
diff --git a/nym-wallet/src/components/textfields.tsx b/nym-wallet/src/components/textfields.tsx
index c4373176f3..085ede1ab3 100644
--- a/nym-wallet/src/components/textfields.tsx
+++ b/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} />}
diff --git a/nym-wallet/src/pages/Admin/index.tsx b/nym-wallet/src/pages/Admin/index.tsx
index 1642570db9..b3a8c157c5 100644
--- a/nym-wallet/src/pages/Admin/index.tsx
+++ b/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>
diff --git a/nym-wallet/src/pages/bonding/node-settings/settings-pages/NodeUnbondPage.tsx b/nym-wallet/src/pages/bonding/node-settings/settings-pages/NodeUnbondPage.tsx
index 89efefb0a8..4a6097b8da 100644
--- a/nym-wallet/src/pages/bonding/node-settings/settings-pages/NodeUnbondPage.tsx
+++ b/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
diff --git a/nym-wallet/src/pages/bonding/node-settings/settings-pages/general-settings/InfoSettings.tsx b/nym-wallet/src/pages/bonding/node-settings/settings-pages/general-settings/InfoSettings.tsx
index d48f9c20bf..7b85f1c0c2 100644
--- a/nym-wallet/src/pages/bonding/node-settings/settings-pages/general-settings/InfoSettings.tsx
+++ b/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>
diff --git a/nym-wallet/src/pages/bonding/node-settings/settings-pages/general-settings/ParametersSettings.tsx b/nym-wallet/src/pages/bonding/node-settings/settings-pages/general-settings/ParametersSettings.tsx
index ce7a3d0250..ad9b3d03af 100644
--- a/nym-wallet/src/pages/bonding/node-settings/settings-pages/general-settings/ParametersSettings.tsx
+++ b/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>
diff --git a/nym-wallet/src/pages/internal-docs/DocEntry.tsx b/nym-wallet/src/pages/internal-docs/DocEntry.tsx
index 0901151b14..43c26b6491 100644
--- a/nym-wallet/src/pages/internal-docs/DocEntry.tsx
+++ b/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>
diff --git a/nym-wallet/src/pages/settings/profile.tsx b/nym-wallet/src/pages/settings/profile.tsx
index c9c5021ce9..f97ac9513d 100644
--- a/nym-wallet/src/pages/settings/profile.tsx
+++ b/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
diff --git a/nym-wallet/src/pages/settings/system-variables.tsx b/nym-wallet/src/pages/settings/system-variables.tsx
index 9cbfe2e1e5..015034f76e 100644
--- a/nym-wallet/src/pages/settings/system-variables.tsx
+++ b/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"
diff --git a/ts-packages/react-components/src/components/currency/CurrencyFormField.tsx b/ts-packages/react-components/src/components/currency/CurrencyFormField.tsx
index 34fb118c34..d4449a8d40 100644
--- a/ts-packages/react-components/src/components/currency/CurrencyFormField.tsx
+++ b/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}
     />
   );
diff --git a/ts-packages/react-components/src/components/mixnodes/IdentityKeyFormField.tsx b/ts-packages/react-components/src/components/mixnodes/IdentityKeyFormField.tsx
index f15465438a..94fa6ae382 100644
--- a/ts-packages/react-components/src/components/mixnodes/IdentityKeyFormField.tsx
+++ b/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 }}
     />
   );
 };