make app icon url not required, swap change theme button icons, fix loading spinners render, add loading state to submit button on create page

src/components/Modal/ModalAppDetails/ModalAppDetails.tsx

@@ -3,7 +3,7 @@ import { Button } from '@/shared/Button/Button'
 import { Input } from '@/shared/Input/Input'
 import { Modal } from '@/shared/Modal/Modal'
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
-import { Autocomplete, CircularProgress, Stack, Typography } from '@mui/material'
+import { Autocomplete, Stack, Typography } from '@mui/material'
 import { StyledInput } from './styled'
 import { FormEvent, useEffect, useState } from 'react'
 import { isEmptyString } from '@/utils/helpers/helpers'
@@ -13,6 +13,7 @@ import { selectApps } from '@/store'
 import { dbi } from '@/modules/db'
 import { useEnqueueSnackbar } from '@/hooks/useEnqueueSnackbar'
 import { setApps } from '@/store/reducers/content.slice'
+import { LoadingSpinner } from '@/shared/LoadingSpinner/LoadingSpinner'
 
 export const ModalAppDetails = () => {
   const { getModalOpened, createHandleCloseReplace } = useModalSearchParams()
@@ -118,7 +119,7 @@ export const ModalAppDetails = () => {
     }
   }
 
-  const isFormValid = !isEmptyString(url) && !isEmptyString(name) && !isEmptyString(icon)
+  const isFormValid = !isEmptyString(url) && !isEmptyString(name)
 
   return (
     <Modal open={isModalOpened} onClose={handleCloseModal}>
@@ -165,7 +166,7 @@ export const ModalAppDetails = () => {
         />
 
         <Button varianttype="secondary" type="submit" fullWidth disabled={!isFormValid || isLoading}>
-          Save changes {isLoading && <CircularProgress sx={{ marginLeft: '0.5rem' }} size={'1rem'} />}
+          Save changes {isLoading && <LoadingSpinner />}
         </Button>
       </Stack>
     </Modal>

src/components/Modal/ModalImportKeys/ModalImportKeys.tsx

@@ -5,7 +5,7 @@ import { Button } from '@/shared/Button/Button'
 import { Input } from '@/shared/Input/Input'
 import { Modal } from '@/shared/Modal/Modal'
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
-import { CircularProgress, Stack, Typography, useTheme } from '@mui/material'
+import { Stack, Typography, useTheme } from '@mui/material'
 import { StyledAppLogo } from './styled'
 import { useNavigate } from 'react-router-dom'
 import { useForm } from 'react-hook-form'
@@ -18,6 +18,7 @@ import { fetchNip05 } from '@/utils/helpers/helpers'
 import { DOMAIN } from '@/utils/consts'
 import { CheckmarkIcon } from '@/assets'
 import { getPublicKey, nip19 } from 'nostr-tools'
+import { LoadingSpinner } from '@/shared/LoadingSpinner/LoadingSpinner'
 
 const FORM_DEFAULT_VALUES = {
   username: '',
@@ -195,7 +196,7 @@ export const ModalImportKeys = () => {
         />
 
         <Button type="submit" disabled={isLoading}>
-          Import key {isLoading && <CircularProgress sx={{ marginLeft: '0.5rem' }} size={'1rem'} />}
+          Import key {isLoading && <LoadingSpinner />}
         </Button>
       </Stack>
     </Modal>

src/components/Modal/ModalLogin/ModalLogin.tsx

@@ -4,7 +4,7 @@ import { useModalSearchParams } from '@/hooks/useModalSearchParams'
 import { swicCall } from '@/modules/swic'
 import { Modal } from '@/shared/Modal/Modal'
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
-import { CircularProgress, Stack, Typography } from '@mui/material'
+import { Stack, Typography } from '@mui/material'
 import { StyledAppLogo } from './styled'
 import { Input } from '@/shared/Input/Input'
 import { Button } from '@/shared/Button/Button'
@@ -16,6 +16,7 @@ import { DOMAIN } from '@/utils/consts'
 import { fetchNip05 } from '@/utils/helpers/helpers'
 import { usePassword } from '@/hooks/usePassword'
 import { dbi } from '@/modules/db'
+import { LoadingSpinner } from '@/shared/LoadingSpinner/LoadingSpinner'
 
 const FORM_DEFAULT_VALUES = {
   username: '',
@@ -120,7 +121,7 @@ export const ModalLogin = () => {
           error={!!errors.password}
         />
         <Button type="submit" fullWidth disabled={isLoading}>
-          Add account {isLoading && <CircularProgress sx={{ marginLeft: '0.5rem' }} size={'1rem'} />}
+          Add account {isLoading && <LoadingSpinner />}
         </Button>
       </Stack>
     </Modal>

src/components/Modal/ModalSettings/ModalSettings.tsx

@@ -1,7 +1,7 @@
 import { useModalSearchParams } from '@/hooks/useModalSearchParams'
 import { Modal } from '@/shared/Modal/Modal'
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
-import { Box, CircularProgress, Stack, Typography } from '@mui/material'
+import { Box, Stack, Typography } from '@mui/material'
 import { StyledButton, StyledSettingContainer, StyledSynchedText } from './styled'
 import { SectionTitle } from '@/shared/SectionTitle/SectionTitle'
 import { CheckmarkIcon } from '@/assets'
@@ -16,6 +16,7 @@ import { usePassword } from '@/hooks/usePassword'
 import { useAppSelector } from '@/store/hooks/redux'
 import { selectKeys } from '@/store'
 import { isValidPassphase, isWeakPassphase } from '@/modules/keys'
+import { LoadingSpinner } from '@/shared/LoadingSpinner/LoadingSpinner'
 
 type ModalSettingsProps = {
   isSynced: boolean
@@ -141,7 +142,7 @@ export const ModalSettings: FC<ModalSettingsProps> = ({ isSynced }) => {
             </Typography>
           )}
           <StyledButton type="submit" fullWidth disabled={!isChecked}>
-            Sync {isLoading && <CircularProgress sx={{ marginLeft: '0.5rem' }} size={'1rem'} />}
+            Sync {isLoading && <LoadingSpinner mode="secondary" />}
           </StyledButton>
         </StyledSettingContainer>
       </Stack>

src/components/Modal/ModalSignUp/ModalSignUp.tsx

@@ -2,7 +2,7 @@ import { useEnqueueSnackbar } from '@/hooks/useEnqueueSnackbar'
 import { useModalSearchParams } from '@/hooks/useModalSearchParams'
 import { Modal } from '@/shared/Modal/Modal'
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
-import { CircularProgress, Stack, Typography, useTheme } from '@mui/material'
+import { Stack, Typography, useTheme } from '@mui/material'
 import React, { ChangeEvent, useEffect, useState } from 'react'
 import { StyledAppLogo } from './styled'
 import { Input } from '@/shared/Input/Input'
@@ -12,6 +12,7 @@ import { swicCall } from '@/modules/swic'
 import { useNavigate } from 'react-router-dom'
 import { DOMAIN } from '@/utils/consts'
 import { fetchNip05 } from '@/utils/helpers/helpers'
+import { LoadingSpinner } from '@/shared/LoadingSpinner/LoadingSpinner'
 
 export const ModalSignUp = () => {
   const { getModalOpened, createHandleCloseReplace } = useModalSearchParams()
@@ -110,7 +111,7 @@ export const ModalSignUp = () => {
           }}
         />
         <Button fullWidth type="submit" disabled={isLoading}>
-          Create account {isLoading && <CircularProgress sx={{ marginLeft: '0.5rem' }} size={'1rem'} />}
+          Create account {isLoading && <LoadingSpinner />}
         </Button>
       </Stack>
     </Modal>

src/layout/Header/Header.tsx

@@ -23,7 +23,7 @@ export const Header = () => {
   }
 
   const isDarkMode = themeMode === 'dark'
-  const themeIcon = isDarkMode ? <DarkModeIcon htmlColor="#fff" /> : <LightModeIcon htmlColor="#000" />
+  const themeIcon = isDarkMode ? <LightModeIcon htmlColor="#fff" /> : <DarkModeIcon htmlColor="#000" />
 
   const handleChangeMode = () => {
     dispatch(setThemeMode({ mode: isDarkMode ? 'light' : 'dark' }))

src/pages/CreatePage/Create.Page.tsx

@@ -9,6 +9,7 @@ import { useModalSearchParams } from '@/hooks/useModalSearchParams'
 import { MODAL_PARAMS_KEYS } from '@/types/modal'
 import { useState } from 'react'
 import { getReferrerAppUrl } from '@/utils/helpers/helpers'
+import { LoadingSpinner } from '@/shared/LoadingSpinner/LoadingSpinner'
 
 const CreatePage = () => {
   const notify = useEnqueueSnackbar()
@@ -17,6 +18,8 @@ const CreatePage = () => {
 
   const [searchParams] = useSearchParams()
 
+  const [isLoading, setIsLoading] = useState(false)
+
   const name = searchParams.get('name') || ''
   const token = searchParams.get('token') || ''
   const appNpub = searchParams.get('appNpub') || ''
@@ -31,12 +34,14 @@ const CreatePage = () => {
 
   const handleClickAddAccount = async () => {
     try {
+      setIsLoading(true)
       const key: any = await swicCall('generateKey', name)
 
-      const appUrl = getReferrerAppUrl();
+      const appUrl = getReferrerAppUrl()
 
       console.log('Created', key.npub, 'app', appUrl)
       setCreated(true)
+      setIsLoading(false)
 
       handleOpen(MODAL_PARAMS_KEYS.CONFIRM_CONNECT, {
         search: {
@@ -53,6 +58,7 @@ const CreatePage = () => {
       })
     } catch (error: any) {
       notify(error.message || error.toString(), 'error')
+      setIsLoading(false)
     }
   }
 
@@ -88,7 +94,9 @@ const CreatePage = () => {
               <Typography textAlign={'left'} variant="h6" paddingTop="0.5em">
                 Chosen name: <b>{nip05}</b>
               </Typography>
-              <GetStartedButton onClick={handleClickAddAccount}>Create account</GetStartedButton>
+              <GetStartedButton onClick={handleClickAddAccount}>
+                Create account {isLoading && <LoadingSpinner />}
+              </GetStartedButton>
 
               <Typography textAlign={'left'} variant="h5" paddingTop="1em">
                 What you need to know:

src/pages/KeyPage/styled.tsx

@@ -48,6 +48,7 @@ export const StyledEmptyAppsBox = styled(Box)(({ theme }) => {
       placeItems: 'center',
       color: theme.palette.text.primary,
       opacity: '0.6',
+      maxHeight: '100%',
     },
   }
 })

src/shared/Button/Button.tsx

@@ -28,20 +28,20 @@ const StyledButton = styled(
       },
       color: theme.palette.text.primary,
       '&.disabled': {
-        opacity: 0.5,
+        background: `${theme.palette.backgroundSecondary.default}50`,
         cursor: 'not-allowed',
       },
     }
   }
   return {
     ...commonStyles,
-    '&.button:is(:hover, :active, &, .disabled)': {
+    '&.button:is(:hover, :active, &)': {
       background: theme.palette.primary.main,
     },
     color: theme.palette.text.secondary,
     '&.disabled': {
       color: theme.palette.text.secondary,
-      opacity: 0.5,
+      background: `${theme.palette.primary.main}50`,
       cursor: 'not-allowed',
     },
   }

src/shared/LoadingSpinner/LoadingSpinner.tsx

@@ -0,0 +1,17 @@
+import { CircularProgress, CircularProgressProps, styled } from '@mui/material'
+import { FC } from 'react'
+
+type LoadingSpinnerProps = CircularProgressProps & {
+  mode?: 'default' | 'secondary'
+}
+
+export const LoadingSpinner: FC<LoadingSpinnerProps> = (props) => {
+  return <StyledCircularProgress {...props} />
+}
+
+export const StyledCircularProgress = styled((props: LoadingSpinnerProps) => (
+  <CircularProgress size={'1rem'} {...props} />
+))(({ theme, mode = 'default' }) => ({
+  marginLeft: '0.5rem',
+  color: mode === 'default' ? theme.palette.text.secondary : theme.palette.text.primary,
+}))