fix: button transition

Signed-off-by: Innei <i@innei.in>
RSSNext · Sep 22, 2024 · f731d1e · f731d1e
1 parent 563d6a4
commit f731d1e
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 8 deletions.
diff --git a/apps/renderer/src/components/ui/button/index.tsx b/apps/renderer/src/components/ui/button/index.tsx
@@ -163,14 +163,19 @@ export const Button = React.forwardRef<
       {...props}
       onClick={handleClick}
     >
-      <m.span className="center">
-        {isLoading && (
-          <m.span className="center">
-            <LoadingCircle size="small" className="center mr-2" />
+      <span className="contents">
+        {typeof isLoading === "boolean" && (
+          <m.span
+            className="center"
+            animate={{
+              width: isLoading ? "auto" : "0px",
+            }}
+          >
+            {isLoading && <LoadingCircle size="small" className="center mr-2" />}
           </m.span>
         )}
-        <m.span className={cn("center", className)}>{props.children}</m.span>
-      </m.span>
+        <span className={cn("center", className)}>{props.children}</span>
+      </span>
     </MotionButtonBase>
   )
 })

diff --git a/apps/renderer/src/components/ui/button/variants.tsx b/apps/renderer/src/components/ui/button/variants.tsx
@@ -7,7 +7,7 @@ import { cn } from "~/lib/utils"
 
 export const styledButtonVariant = cva(
   [
-    "inline-flex cursor-button select-none items-center justify-center gap-2 outline-offset-2 transition active:transition-none disabled:cursor-not-allowed",
+    "inline-flex cursor-button select-none items-center justify-center outline-offset-2 transition active:transition-none disabled:cursor-not-allowed",
     "ring-accent/20 duration-200 disabled:ring-0",
     "align-middle",
   ],

diff --git a/apps/renderer/src/components/ui/code-highlighter/shiki/Shiki.tsx b/apps/renderer/src/components/ui/code-highlighter/shiki/Shiki.tsx
@@ -203,7 +203,7 @@ const ShikiCode: FC<
         className={"absolute right-2 top-2 opacity-0 duration-200 group-hover:opacity-100"}
       />
       {language !== "plaintext" && (
-        <span className="center absolute bottom-2 right-2 flex gap-1 text-xs uppercase text-white opacity-80">
+        <span className="center absolute bottom-2 right-2 flex gap-1 text-xs uppercase opacity-80 dark:text-white">
           <span className="center [&_svg]:size-4">{getLanguageIcon(language)}</span>
           <span>{language}</span>
         </span>

diff --git a/apps/renderer/src/pages/(external)/invitation.tsx b/apps/renderer/src/pages/(external)/invitation.tsx
@@ -1,6 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import type { DotLottie } from "@lottiefiles/dotlottie-react"
 import { DotLottieReact } from "@lottiefiles/dotlottie-react"
+import { m } from "framer-motion"
 import type { RefCallback } from "react"
 import { useEffect, useState } from "react"
 import { useForm } from "react-hook-form"
@@ -109,10 +110,20 @@ export function Component() {
               />
             )}
             <Button
+              variant={showConfetti ? "outline" : "primary"}
               type="submit"
               disabled={!form.formState.isValid}
               isLoading={invitationMutation.isPending}
             >
+              {showConfetti && (
+                <m.i
+                  initial={{ y: 5 }}
+                  animate={{
+                    y: 0,
+                  }}
+                  className="i-mgc-check-circle-filled mr-2 text-green-500"
+                />
+              )}
               {t("invitation.activate")}
             </Button>
           </div>