fix(setting-modal): consistency and behaviour of setting modal button

src/components/SettingsModal/SettingsView/Appearance/index.tsx

@@ -1,29 +1,49 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
+import { Button } from '@mui/material'
 import styled from 'styled-components'
 import { GraphViewControl } from '~/components/App/ActionsToolbar/GraphViewControl'
-import { Button } from '~/components/Button'
 import { Flex } from '~/components/common/Flex'
 import { Text } from '~/components/common/Text'
 import { useGraphStore } from '~/stores/useGraphStore'
+import { ClipLoader } from 'react-spinners'
+import { colors } from '~/utils'
 
 type Props = {
   onClose: () => void
 }
 
 export const Appearance: FC<Props> = ({ onClose }) => {
   const [graphStyle] = useGraphStore((s) => [s.graphStyle])
+  const [loading, setLoading] = useState(false)
 
   const handleSave = () => {
+    setLoading(true)
     localStorage.setItem('graphStyle', graphStyle)
+    setLoading(false)
     onClose()
   }
 
   return (
     <Wrapper direction="column">
       <StyledText>Default graph view:</StyledText>
       <GraphViewControl />
-      <Flex mt={308}>
-        <Button kind="big" onClick={handleSave}>
+      <Flex mt={308} py={24}>
+        <Button
+          color="secondary"
+          disabled={loading}
+          id="add-node-submit-cta"
+          onClick={handleSave}
+          size="large"
+          startIcon={
+            loading && (
+              <IconWrapper>
+                <ClipLoader color={colors.lightGray} size={12} />
+              </IconWrapper>
+            )
+          }
+          type="submit"
+          variant="contained"
+        >
           Save Changes
         </Button>
       </Flex>
@@ -42,3 +62,15 @@ const StyledText = styled(Text)`
   font-size: 13px;
   font-weight: 400;
 `
+
+const IconWrapper = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 2px;
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`

src/components/SettingsModal/SettingsView/General/index.tsx

@@ -1,39 +1,61 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
+import { Button } from '@mui/material'
 import { FormProvider, useForm } from 'react-hook-form'
 import { ClipLoader } from 'react-spinners'
 import styled from 'styled-components'
-import { Button } from '~/components/Button'
 import { Flex } from '~/components/common/Flex'
 import { TextInput } from '~/components/common/TextInput'
-import { requiredRule } from '~/constants'
+import { NODE_ADD_ERROR, requiredRule } from '~/constants'
 import { TAboutParams, postAboutData } from '~/network/fetchSourcesData'
 import { useAppStore } from '~/stores/useAppStore'
 import { colors } from '~/utils/colors'
+import { SuccessNotify } from '~/components/common/SuccessToast'
+import { MdError } from 'react-icons/md'
 
 type Props = {
   initialValues: TAboutParams
+  onClose: () => void
 }
 
-export const General: FC<Props> = ({ initialValues }) => {
+export const General: FC<Props> = ({ initialValues, onClose }) => {
   const form = useForm<TAboutParams>({ defaultValues: initialValues, mode: 'onSubmit' })
   const { isSubmitting } = form.formState
   const setAppMetaData = useAppStore((s) => s.setAppMetaData)
+  const [error, setError] = useState<string>('')
 
   const onSubmit = form.handleSubmit(async (data) => {
     try {
       const res = (await postAboutData(data)) as Awaited<{ status: string }>
 
       if (res.status === 'success') {
+        SuccessNotify('Changes Saved')
         setAppMetaData(data)
+        onClose()
       }
-    } catch (error) {
-      console.warn(error)
+      // eslint-disable-next-line  @typescript-eslint/no-explicit-any
+    } catch (err: any) {
+      let errorMessage = NODE_ADD_ERROR
+
+      if (err?.status === 400) {
+        const errorRes = await err.json()
+
+        errorMessage = errorRes.errorCode || errorRes?.status || NODE_ADD_ERROR
+      } else if (err instanceof Error) {
+        errorMessage = err.message
+      }
+
+      setError(String(errorMessage))
     }
   })
 
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    onSubmit()
+  }
+
   return (
     <FormProvider {...form}>
-      <StyledForm id="add-node-form" onSubmit={onSubmit}>
+      <StyledForm id="add-node-form" onSubmit={handleSubmit}>
         <>
           <Flex>
             <Flex pt={20}>
@@ -58,33 +80,89 @@ export const General: FC<Props> = ({ initialValues }) => {
               />
             </Flex>
           </Flex>
-          <Flex mt={210} py={24}>
-            {isSubmitting ? (
-              <SubmitLoader>
-                <ClipLoader color={colors.white} size={20} />
-              </SubmitLoader>
-            ) : (
-              <Button disabled={isSubmitting} id="add-node-submit-cta" kind="big" type="submit">
-                Save Changes
-              </Button>
-            )}
+
+          <Flex mt={210} py={error ? 0 : 24}>
+            <Button
+              color="secondary"
+              disabled={isSubmitting}
+              id="add-node-submit-cta"
+              size="large"
+              startIcon={
+                isSubmitting && (
+                  <IconWrapper>
+                    <ClipLoader color={colors.lightGray} size={12} />
+                  </IconWrapper>
+                )
+              }
+              type="submit"
+              variant="contained"
+            >
+              Save Changes
+            </Button>
+            {error ? (
+              <StyledError>
+                <StyledErrorText>
+                  <MdError className="errorIcon" />
+                  <span>{error}</span>
+                </StyledErrorText>
+              </StyledError>
+            ) : null}
           </Flex>
         </>
       </StyledForm>
     </FormProvider>
   )
 }
 
-const SubmitLoader = styled(Flex).attrs({
-  align: 'center',
-  background: 'primaryButton',
-  borderRadius: 8,
-  justify: 'center',
-})`
-  padding: 16px 24px;
-  opacity: 0.5;
-`
-
 const StyledForm = styled.form`
   padding: 36px;
 `
+
+const IconWrapper = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 2px;
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`
+
+const StyledError = styled(Flex)`
+  display: flex;
+  align-items: center;
+  color: ${colors.primaryRed};
+  position: relative;
+  margin-top: 10px;
+`
+
+const StyledErrorText = styled(Flex)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+
+  .errorIcon {
+    display: block;
+    font-size: 13px;
+    min-height: 13px;
+    min-width: 13px;
+  }
+
+  span {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    white-space: normal;
+    letter-spacing: 0.2px;
+    cursor: pointer;
+    padding-left: 4px;
+    font-size: 13px;
+    font-family: Barlow;
+    line-height: 18px;
+  }
+`