From c2992b06ad345002098e66fb80b10021915a8d5b Mon Sep 17 00:00:00 2001
From: Qing <7880675+devrsi0n@users.noreply.github.com>
Date: Mon, 1 May 2023 22:20:42 +0800
Subject: [PATCH] fix: change sign-in to post when user hasn't signed in in
 comment editor

---
 .../main-button/main-button.tsx               |  2 +-
 .../blocks/sign-in-button/sign-in-button.tsx  | 22 +++++++++++--------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/ui/src/blocks/rich-text-editor/main-button/main-button.tsx b/packages/ui/src/blocks/rich-text-editor/main-button/main-button.tsx
index 4c95d4f32..55b59a2ae 100644
--- a/packages/ui/src/blocks/rich-text-editor/main-button/main-button.tsx
+++ b/packages/ui/src/blocks/rich-text-editor/main-button/main-button.tsx
@@ -104,7 +104,7 @@ export function MainButton({
           </AskNotificationPermissionPopover>
         )
       ) : (
-        <SignInButton size="sm" />
+        <SignInButton size="sm">{buttonChildren}</SignInButton>
       )}
     </div>
   );
diff --git a/packages/ui/src/blocks/sign-in-button/sign-in-button.tsx b/packages/ui/src/blocks/sign-in-button/sign-in-button.tsx
index ece0665a5..54931e433 100644
--- a/packages/ui/src/blocks/sign-in-button/sign-in-button.tsx
+++ b/packages/ui/src/blocks/sign-in-button/sign-in-button.tsx
@@ -8,6 +8,7 @@ import { useSignInWindow } from '../../hooks/use-sign-in-window';
 
 export type SignInButtonProps = Pick<ButtonProps, 'variant' | 'size'> & {
   inPageNav?: boolean;
+  children?: React.ReactNode;
 };
 
 const handleSessionAndSignIn = () => {
@@ -18,10 +19,21 @@ const handleSessionAndSignIn = () => {
 export function SignInButton({
   variant = 'solid',
   inPageNav,
+  children,
   ...restProps
 }: SignInButtonProps): JSX.Element {
   const { loading: signInLoading } = useCurrentUser();
   const handleSignIn = useSignInWindow();
+  const defaultChildren = (
+    <>
+      {signInLoading ? (
+        <IconLoader aria-label="Signing in" className="h-5 w-5 animate-spin" />
+      ) : (
+        <IconLock size="14" />
+      )}
+      <span>Sign in</span>
+    </>
+  );
   return (
     <Button
       color="primary"
@@ -31,15 +43,7 @@ export function SignInButton({
       disabled={!!process.env.NEXT_PUBLIC_MAINTENANCE_MODE}
     >
       <span className="inline-flex flex-row items-center space-x-1">
-        {signInLoading ? (
-          <IconLoader
-            aria-label="Signing in"
-            className="h-5 w-5 animate-spin"
-          />
-        ) : (
-          <IconLock size="14" />
-        )}
-        <span>Sign in</span>
+        {children || defaultChildren}
       </span>
     </Button>
   );