fix: onboarding usernames and vue logo

packages/revert-next/app/dashboard/onboarding/FrontendSdk.tsx

@@ -36,7 +36,7 @@ export function FrontendSdk({ userId, environment }: { userId: string; environme
                     onClick={() => (!customPreferenceView ? setCustomPreferenceView(true) : null)}
                 >
                     <div className="flex items-start justify-start gap-3">
-                        <img src="/vuejs-icon.svg" alt="Vuejs" height={24} width={24} />
+                        <Icons.vue />
                         <div className="flex flex-col gap-1">
                             <h4 className="text-left text-gray-50/70 text-base font-bold">Vue.js</h4>
                         </div>

packages/revert-next/app/dashboard/onboarding/page.tsx

@@ -16,13 +16,15 @@ export default async function Page() {
         return null;
     }
 
+    const userName = user?.firstName ?? user?.username ?? user?.fullName;
+
     return (
         <div>
             <div className="relative">
                 <div className="w-auto h-32 border border-none rounded-lg bg-gradient-to-br from-accent-500 to-shade-800 mb-4">
                     <div className="absolute ml-8 mt-10">
                         <h1 className={`${inter.className} mb-2 text-xl md:text-2xl font-bold`}>
-                            Welcome to Revert, {user.firstName}
+                            Welcome to Revert{userName ? `, ${userName}` : ``}
                         </h1>
                         <p>Complete these following steps to get your integration up and running</p>
                     </div>

packages/revert-next/components/icons.tsx

@@ -1,3 +1,5 @@
+import { Icon } from '@tremor/react';
+
 type IconProps = React.HTMLAttributes<SVGElement>;
 
 export const Icons = {
@@ -382,6 +384,26 @@ export const Icons = {
             </defs>
         </svg>
     ),
+    vue: (props: IconProps) => (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            aria-label="Vue"
+            role="img"
+            viewBox="0 0 64 64"
+            width={24}
+            height={24}
+            {...props}
+        >
+            <path
+                d="M 39.33333,5.5 32,18.33333 24.666667,5.5 H 0 L 32,61 64,5.5 Z"
+                style={{ fill: '#42b883', strokeWidth: 0.16666667 }}
+            />
+            <path
+                d="M 39.33333,5.5 32,18.33333 24.666667,5.5 H 12.833333 L 32,38.83333 51.16667,5.5 Z"
+                style={{ fill: '#35495e', strokeWidth: 0.16666667 }}
+            />
+        </svg>
+    ),
 };
 
 export {

packages/revert-next/components/ui/sidenav/SideNav.tsx

@@ -47,7 +47,7 @@ export function SideNav({ value }: SideNavProps) {
                 </div>
                 <div className="flex items-center pl-2 h-12 revert-focus-outline rounded-lg">
                     <UserButton />
-                    <p className="ml-3 hidden md:block">{user?.fullName ?? 'User Name'}</p>
+                    <p className="ml-3 hidden md:block">{user?.fullName ?? user?.firstName ?? user?.username}</p>
                 </div>
             </div>
         </div>