From c56aeb71ff9ce39be3802c24d2490a07f61395a7 Mon Sep 17 00:00:00 2001
From: Nabhag Motivaras <65061890+Nabhag8848@users.noreply.github.com>
Date: Tue, 13 Aug 2024 15:08:25 +0530
Subject: [PATCH] fix: onboarding usernames and vue logo (#609)

* fix: metadata for views

* fix: revert logo to be svg

* fix(ui): vue image

* fix: username in onboarding

* fix: vue image to have svg
---
 .../app/dashboard/onboarding/FrontendSdk.tsx  |  2 +-
 .../app/dashboard/onboarding/page.tsx         |  4 +++-
 packages/revert-next/components/icons.tsx     | 22 +++++++++++++++++++
 .../components/ui/sidenav/SideNav.tsx         |  2 +-
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/packages/revert-next/app/dashboard/onboarding/FrontendSdk.tsx b/packages/revert-next/app/dashboard/onboarding/FrontendSdk.tsx
index da3b8740..ebbd79a7 100644
--- a/packages/revert-next/app/dashboard/onboarding/FrontendSdk.tsx
+++ b/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>
diff --git a/packages/revert-next/app/dashboard/onboarding/page.tsx b/packages/revert-next/app/dashboard/onboarding/page.tsx
index ce9029c6..7693861f 100644
--- a/packages/revert-next/app/dashboard/onboarding/page.tsx
+++ b/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>
diff --git a/packages/revert-next/components/icons.tsx b/packages/revert-next/components/icons.tsx
index fd626126..3107b88d 100644
--- a/packages/revert-next/components/icons.tsx
+++ b/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 {
diff --git a/packages/revert-next/components/ui/sidenav/SideNav.tsx b/packages/revert-next/components/ui/sidenav/SideNav.tsx
index f010da1d..c10504ce 100644
--- a/packages/revert-next/components/ui/sidenav/SideNav.tsx
+++ b/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>