fix reload on submit, button disabled styles, profile name styles in header

src/components/Modal/ModalAppDetails/ModalAppDetails.tsx

@@ -43,7 +43,7 @@ export const ModalAppDetails = () => {
     })
 
     // eslint-disable-next-line
-  }, [appNpub])
+  }, [appNpub, isModalOpened])
 
   useEffect(() => {
     return () => {
@@ -164,7 +164,7 @@ export const ModalAppDetails = () => {
           value={details.icon}
         />
 
-        <Button type="submit" fullWidth disabled={!isFormValid || isLoading}>
+        <Button varianttype="secondary" type="submit" fullWidth disabled={!isFormValid || isLoading}>
           Save changes {isLoading && <CircularProgress sx={{ marginLeft: '0.5rem' }} size={'1rem'} />}
         </Button>
       </Stack>

src/components/Modal/ModalImportKeys/ModalImportKeys.tsx

@@ -110,9 +110,10 @@ export const ModalImportKeys = () => {
           </Typography>
         </Stack>
         <Input
-          label="Username or nip05 or npub"
+          label="Username"
           fullWidth
-          placeholder="name or name@domain.com or npub1..."
+          placeholder="Enter a Username"
+          endAdornment={<Typography color={'#FFFFFFA8'}>@{DOMAIN}</Typography>}
           {...register('username')}
           error={!!errors.username}
           helperText={inputHelperText}

src/components/Modal/ModalSignUp/ModalSignUp.tsx

@@ -51,11 +51,11 @@ export const ModalSignUp = () => {
   const inputHelperText = getInputHelperText()
 
   const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
     if (isLoading || !isAvailable) return undefined
 
     const name = enteredValue.trim()
     if (!name.length) return
-    e.preventDefault()
 
     try {
       setIsLoading(true)
@@ -89,9 +89,9 @@ export const ModalSignUp = () => {
           </Typography>
         </Stack>
         <Input
-          label="Enter a Username"
+          label="Username"
           fullWidth
-          placeholder="Username"
+          placeholder="Enter a Username"
           helperText={inputHelperText}
           endAdornment={<Typography color={'#FFFFFFA8'}>@{DOMAIN}</Typography>}
           onChange={handleInputChange}

src/layout/Header/styled.tsx

@@ -41,9 +41,6 @@ export const StyledProfileContainer = styled((props: StackProps) => <Stack {...p
   },
   '& .username': {
     cursor: 'pointer',
-    '&:hover': {
-      textDecoration: 'underline',
-    },
   },
 }))
 

src/shared/Button/Button.tsx

@@ -7,7 +7,7 @@ export type AppButtonProps = MuiButtonProps & {
 
 export const Button = forwardRef<HTMLButtonElement, AppButtonProps>(({ children, ...restProps }, ref) => {
   return (
-    <StyledButton classes={{ root: 'button' }} {...restProps} ref={ref}>
+    <StyledButton classes={{ root: 'button', disabled: 'disabled' }} {...restProps} ref={ref}>
       {children}
     </StyledButton>
   )
@@ -27,19 +27,22 @@ const StyledButton = styled(
         background: theme.palette.backgroundSecondary.default,
       },
       color: theme.palette.text.primary,
+      '&.disabled': {
+        opacity: 0.5,
+        cursor: 'not-allowed',
+      },
     }
   }
   return {
     ...commonStyles,
-    '&.button:is(:hover, :active, &)': {
+    '&.button:is(:hover, :active, &, .disabled)': {
       background: theme.palette.primary.main,
     },
     color: theme.palette.text.secondary,
-    ':disabled': {
+    '&.disabled': {
-      '&.button:is(:hover, :active, &)': {
+      color: theme.palette.text.secondary,
-        background: theme.palette.backgroundSecondary.default,
+      opacity: 0.5,
-      },
+      cursor: 'not-allowed',
-      color: theme.palette.backgroundSecondary.paper,
     },
   }
 })