ir-engine · Tortillaguy · Jun 6, 2025 · Jun 3, 2025 · Jun 3, 2025 · Jun 4, 2025
@@ -66,6 +66,7 @@
     "@types/three": "0.176.0",
     "css-modules-require-hook": "4.2.3",
     "esbuild": "0.17.12",
+    "msw": "^2.9.0",
     "react-dom": "18.2.0",
     "rimraf": "4.4.0",
     "sass": "1.59.3",

@@ -23,11 +23,12 @@ All portions of the code written by the Infinite Reality Engine team are Copyrig
 Infinite Reality Engine. All Rights Reserved.
 */
 
+import { useMutableState } from '@ir-engine/hyperflux'
+import { GlassButton } from '@ir-engine/ui/src/components/viewer/Button'
 import React from 'react'
 import { HiChatBubbleLeftRight } from 'react-icons/hi2'
 import { twMerge } from 'tailwind-merge'
 
-import { useMutableState } from '@ir-engine/hyperflux'
 import { Send01Md } from '@ir-engine/ui/src/icons'
 import { AuthState } from '../../user/services/AuthService'
 import { useChatProvider } from './ChatProvider'
@@ -144,15 +145,12 @@ export const ChatMenu = ({ navigateTo }: { navigateTo: (screenKey: string, histo
 
   if (isGuest) {
     return (
-      <div className="flex h-full max-w-screen-sm flex-col items-center justify-center gap-8 font-dm-sans">
+      <div className="flex h-full w-full max-w-screen-sm flex-col items-center justify-center gap-8 font-dm-sans">
         <HiChatBubbleLeftRight className="mx-auto h-[5.5rem] w-[5.5rem]" />
-        <div className="text-shadow-md text-2xl text-white">Want to chat with others?</div>
-        <button
-          onClick={onCTAClicked}
-          className="mt-6 w-[80%] rounded-full border border-white/20 bg-white/15 px-6 py-4 text-lg font-bold text-white/90 shadow-lg drop-shadow-xl backdrop-blur-sm"
-        >
+        <div className="text-shadow font-manrope text-2xl text-white">Want to chat with others?</div>
+        <GlassButton className={'w-[90%]'} onClick={onCTAClicked}>
           Create an Account
-        </button>
+        </GlassButton>
       </div>
     )
   }

@@ -195,6 +195,7 @@ const contentStyles = `
 
   lg:px-14
   lg:pt-12
+
 `
 
 const contentContainerStyles = `

@@ -38,9 +38,7 @@ interface ScreenProps {
 const AccountSettings: React.FC<ScreenProps> = ({ navigateTo }) => (
   <div className="h-full space-y-4">
     <Section>
-      <MenuItem label="Username & Password"  => navigateTo('Settings', 'usernamePassword')} hasChevron />
-      <Divider />
-      <MenuItem label="User ID"  => navigateTo('Settings', 'userId')} hasChevron />
+      <MenuItem label="Display Name"  => navigateTo('Settings', 'displayName')} hasChevron />
       <Divider />
       <MenuItem label="Permissions"  => navigateTo('Settings', 'permissions')} hasChevron />
     </Section>

@@ -0,0 +1,86 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/ir-engine/ir-engine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and
+provide for limited attribution for the Original Developer. In addition,
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Infinite Reality Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Infinite Reality Engine team.
+
+All portions of the code written by the Infinite Reality Engine team are Copyright © 2021-2025
+Infinite Reality Engine. All Rights Reserved.
+*/
+
+import { GlassButton } from '@ir-engine/ui/src/components/viewer/Button'
+import { motion } from 'motion/react'
+import React from 'react'
+
+interface ButtonOption {
+  label: string
+  onClick: () => void
+  isPrimary?: boolean
+}
+
+interface ButtonGroupProps {
+  options: ButtonOption[]
+  className?: string
+}
+
+const ButtonGroup: React.FC<ButtonGroupProps> = ({ options, className = '' }) => {
+  const containerVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.3,
+        delay: 0.1,
+        staggerChildren: 0.1,
+        delayChildren: 0.3
+      }
+    }
+  }
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.3 }
+    }
+  }
+
+  return (
+    <motion.div
+      initial="hidden"
+      animate="visible"
+      variants={containerVariants}
+      className={`flex w-full max-w-xs flex-col items-center space-y-3 ${className}`}
+    >
+      {options.map((option, index) => (
+        <motion.div key={index} variants={itemVariants} className="w-full">
+          <GlassButton
+            >
+            className="w-full rounded-xl py-3.5 font-medium text-white transition-all hover:scale-105"
+          >
+            {option.label}
+          </GlassButton>
+        </motion.div>
+      ))}
+    </motion.div>
+  )
+}
+
+export default ButtonGroup
@@ -23,124 +23,52 @@ All portions of the code written by the Infinite Reality Engine team are Copyrig
 Infinite Reality Engine. All Rights Reserved.
 */
 
-import { CheckSm } from '@ir-engine/ui/src/icons'
+import { useMutableState } from '@ir-engine/hyperflux'
 import { motion } from 'motion/react'
-import React, { useState } from 'react'
+import React from 'react'
+import { AuthService, AuthState } from '../../user/services/AuthService'
+import ButtonGroup from './ButtonGroup'
 
 interface DeleteAccountScreenProps {
   navigateTo: (screenKey: string, historyKey: string) => void
   navigateClose: () => void
 }
 
 const DeleteAccountScreen: React.FC<DeleteAccountScreenProps> = ({ navigateTo, navigateClose }) => {
-  const [showConfirmation, setShowConfirmation] = useState(true)
-  const [showSuccess, setShowSuccess] = useState(false)
+  const { id } = useMutableState(AuthState).user
 
   const handleDelete = () => {
-    setShowConfirmation(false)
-    setShowSuccess(true)
+    AuthService.removeUser(id.value)
+    // This will force a full page reload
+    AuthService.logoutUser()
   }
 
   const handleStayHere = () => {
     navigateTo('Settings', 'account')
   }
 
-  const handleClose = () => {
-    navigateClose()
-  }
-
-  if (showSuccess) {
-    return (
-      <div className="flex h-full flex-col items-center justify-center space-y-8 text-center">
-        {/* Success Checkmark */}
-        <motion.div
-          initial={{ scale: 0 }}
-          animate={{ scale: 1 }}
-          transition={{ duration: 0.3, delay: 0.2 }}
-          className="flex h-16 w-16 items-center justify-center rounded-full"
-        >
-          <CheckSm className="h-8 w-8 text-white" />
-        </motion.div>
-
-        {/* Success Message */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.3, delay: 0.4 }}
-          className="flex flex-col gap-2"
-        >
-          <p className="text-lg font-medium text-white/90">Your account has been</p>
-          <p className="text-lg font-medium text-white/90">successfully deleted.</p>
-        </motion.div>
-
-        {/* Close Button */}
-        <motion.button
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.3, delay: 0.6 }}
-          >
-          className="w-full max-w-xs rounded-xl py-3.5 font-medium text-white transition-all hover:scale-105"
-          style={{
-            background: 'linear-gradient(145deg, rgba(255,255,255,0.15), rgba(255,255,255,0.08))',
-            border: '1px solid rgba(255, 255, 255, 0.1)'
-          }}
-        >
-          Close
-        </motion.button>
-      </div>
-    )
-  }
-
-  if (showConfirmation) {
-    return (
-      <div className="flex h-full flex-col items-center justify-center space-y-8 text-center">
-        {/* Confirmation Message */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.3 }}
-          className="space-y-2"
-        >
-          <p className="text-lg font-medium text-white/90">Are you sure you want to</p>
-          <p className="text-lg font-medium text-white/90">delete your account?</p>
-        </motion.div>
-
-        {/* Action Buttons */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.3, delay: 0.2 }}
-          className="w-full max-w-xs space-y-3"
-        >
-          {/* Stay Here Button */}
-          <button
-            >
-            className="w-full rounded-xl py-3.5 font-medium text-white transition-all hover:scale-105"
-            style={{
-              background: 'linear-gradient(145deg, rgba(255,255,255,0.15), rgba(255,255,255,0.08))',
-              border: '1px solid rgba(255, 255, 255, 0.1)'
-            }}
-          >
-            Stay Here
-          </button>
-
-          {/* Delete Button */}
-          <button
-            >
-            className="w-full rounded-xl py-3.5 font-medium text-white transition-all hover:scale-105"
-            style={{
-              background: 'linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05))',
-              border: '1px solid rgba(255, 255, 255, 0.08)'
-            }}
-          >
-            Delete
-          </button>
-        </motion.div>
-      </div>
-    )
-  }
-
-  return null
+  return (
+    <div className="flex h-full flex-col items-center justify-between space-y-8 pb-4 text-center">
+      {/* Confirmation Message */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
+        className="flex h-full flex-1 flex-col items-center justify-center space-y-2"
+      >
+        <p className="text-lg font-medium text-white/90 md:text-2xl">Are you sure you want to</p>
+        <p className="text-lg font-medium text-white/90 md:text-2xl">delete your account?</p>
+      </motion.div>
+
+      {/* Action Buttons */}
+      <ButtonGroup
+        options={[
+          { label: 'Stay Here', onClick: handleStayHere },
+          { label: 'Delete', onClick: handleDelete }
+        ]}
+      />
+    </div>
+  )
 }
 
 export default DeleteAccountScreen
-Original file line number
+Diff line change
@@ Expand Up / @@ -195,6 +195,7 @@ const contentStyles = ` @@
       lg:px-14
       lg:pt-12
     `
     const contentContainerStyles = `
@@ Expand Down @@