chore: adjust toast top distance (#2953)

* adjust toast top distance

* save button top

packages/web/hooks/useToast.ts

@@ -1,14 +1,17 @@
 import { useToast as uToast, UseToastOptions } from '@chakra-ui/react';
-import { useCallback, useMemo } from 'react';
+import { CSSProperties, useCallback } from 'react';
+
+export const useToast = (props?: UseToastOptions & { containerStyle?: CSSProperties }) => {
+  const { containerStyle, ...toastProps } = props || {};
 
-export const useToast = (props?: UseToastOptions) => {
   const toast = uToast({
     position: 'top',
     duration: 2000,
     containerStyle: {
-      fontSize: 'sm'
+      fontSize: 'sm',
+      ...containerStyle
     },
-    ...props
+    ...toastProps
   });
 
   const myToast = useCallback(

projects/app/src/pages/app/detail/components/Workflow/components/SaveButton.tsx

@@ -25,7 +25,12 @@ const SaveButton = ({
 }) => {
   const { t } = useTranslation();
   const [isSave, setIsSave] = useState(false);
-  const { toast } = useToast();
+  const { toast } = useToast({
+    containerStyle: {
+      mt: 20,
+      fontSize: 'sm'
+    }
+  });
 
   const {
     isOpen: isSaveAndPublishModalOpen,

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/components/SaveAndPublish.tsx

@@ -20,7 +20,12 @@ const SaveAndPublishModal = ({
   onClickSave: (data: { isPublish: boolean; versionName: string }) => Promise<void>;
 }) => {
   const { t } = useTranslation();
-  const { toast } = useToast();
+  const { toast } = useToast({
+    containerStyle: {
+      mt: 20,
+      fontSize: 'sm'
+    }
+  });
   const { register, handleSubmit } = useForm<FormType>({
     defaultValues: {
       versionName: formatTime2YMDHMS(new Date()),