added signup event and restyled admin flow

backend/src/server/routes/v3/signup-router.ts

@@ -159,6 +159,17 @@ export const registerSignupRouter = async (server: FastifyZodProvider) => {
         userAgent
       });
 
+      void server.services.telemetry.sendLoopsEvent(user.email, user.firstName || "", user.lastName || "");
+
+      void server.services.telemetry.sendPostHogEvents({
+        event: PostHogEventTypes.UserSignedUp,
+        distinctId: user.email,
+        properties: {
+          email: user.email,
+          attributionSource: "Team Invite"
+        }
+      });
+
       void res.setCookie("jid", refreshToken, {
         httpOnly: true,
         path: "/",

frontend/src/components/signup/DonwloadBackupPDFStep.tsx

@@ -58,8 +58,8 @@ export default function DonwloadBackupPDFStep({
 
   return (
     <div className="flex flex-col items-center w-full h-full md:px-6 mx-auto mb-36 md:mb-16">
-      <p className="text-xl text-center font-medium flex justify-center text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
+      <p className="text-xl text-center font-medium flex flex-col justify-center items-center text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
-        <FontAwesomeIcon icon={faWarning} className="ml-2 mr-3 pt-1 text-2xl text-bunker-200" />
+        <FontAwesomeIcon icon={faWarning} className="ml-2 mr-3 pt-1 mb-6 text-6xl text-bunker-200" />
         {t("signup.step4-message")}
       </p>
       <div className="flex flex-col pb-2 bg-mineshaft-800 border border-mineshaft-600 items-center justify-center text-center lg:w-1/6 w-full md:min-w-[24rem] mt-8 max-w-md text-bunker-300 text-md rounded-md">

frontend/src/views/admin/SignUpPage/SignUpPage.tsx

@@ -128,10 +128,10 @@ export const SignUpPage = () => {
             animate={{ opacity: 1, translateX: 0 }}
             exit={{ opacity: 0, translateX: 30 }}
           >
-            <div className="flex flex-col items-center space-y-4 text-center">
+            <div className="flex flex-col items-center space-y-2 text-center">
               <img src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
-              <div className="text-4xl">Welcome to Infisical</div>
+              <div className="text-4xl pt-4">Welcome to Infisical</div>
-              <div>Create your first Admin Account</div>
+              <div className="text-bunker-300 pb-4">Create your first Super Admin Account</div>
             </div>
             <form onSubmit={handleSubmit(handleFormSubmit)}>
               <div className="mt-8">
@@ -145,7 +145,7 @@ export const SignUpPage = () => {
                         errorText={error?.message}
                         isError={Boolean(error)}
                       >
-                        <Input isFullWidth size="lg" {...field} />
+                        <Input isFullWidth size="md" {...field} />
                       </FormControl>
                     )}
                   />
@@ -158,7 +158,7 @@ export const SignUpPage = () => {
                         errorText={error?.message}
                         isError={Boolean(error)}
                       >
-                        <Input isFullWidth size="lg" {...field} />
+                        <Input isFullWidth size="md" {...field} />
                       </FormControl>
                     )}
                   />
@@ -168,7 +168,7 @@ export const SignUpPage = () => {
                   name="email"
                   render={({ field, fieldState: { error } }) => (
                     <FormControl label="Email" errorText={error?.message} isError={Boolean(error)}>
-                      <Input isFullWidth size="lg" {...field} />
+                      <Input isFullWidth size="md" {...field} />
                     </FormControl>
                   )}
                 />
@@ -181,7 +181,7 @@ export const SignUpPage = () => {
                       errorText={error?.message}
                       isError={Boolean(error)}
                     >
-                      <Input isFullWidth size="lg" type="password" {...field} />
+                      <Input isFullWidth size="md" type="password" {...field} />
                     </FormControl>
                   )}
                 />
@@ -194,13 +194,13 @@ export const SignUpPage = () => {
                       errorText={error?.message}
                       isError={Boolean(error)}
                     >
-                      <Input isFullWidth size="lg" type="password" {...field} />
+                      <Input isFullWidth size="md" type="password" {...field} />
                     </FormControl>
                   )}
                 />
               </div>
-              <Button type="submit" isFullWidth className="mt-4" isLoading={isSubmitting}>
+              <Button type="submit" colorSchema="primary" variant="outline_bg" isFullWidth className="mt-4" isLoading={isSubmitting}>
-                Let&apos;s Go
+                Continue
               </Button>
             </form>
           </motion.div>

frontend/src/views/admin/SignUpPage/components/DownloadBackupKeys/DownloadBackupKeys.tsx

@@ -15,8 +15,8 @@ export const DownloadBackupKeys = ({ onGenerate }: Props): JSX.Element => {
 
   return (
     <div className="flex flex-col items-center w-full h-full md:px-6 mx-auto mb-36 md:mb-16">
-      <p className="text-xl text-center font-medium flex justify-center text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
+      <p className="text-xl text-center font-medium flex flex-col justify-center items-center text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
-        <FontAwesomeIcon icon={faWarning} className="ml-2 mr-3 pt-1 text-2xl text-bunker-200" />
+        <FontAwesomeIcon icon={faWarning} className="ml-2 mr-3 pt-1 mb-6 text-6xl text-bunker-200" />
         {t("signup.step4-message")}
       </p>
       <div className="flex flex-col pb-2 bg-mineshaft-800 border border-mineshaft-600 items-center justify-center text-center lg:w-1/6 w-full md:min-w-[24rem] mt-8 max-w-md text-bunker-300 text-md rounded-md">