ui: fixes for onboarding ui

frontend/app/components/Onboarding/components/InstallOpenReplayTab/InstallOpenReplayTab.tsx

@@ -8,6 +8,7 @@ import MobileOnboardingTabs from '../OnboardingTabs/OnboardingMobileTabs';
 import ProjectFormButton from '../ProjectFormButton';
 import withOnboarding, { WithOnboardingProps } from '../withOnboarding';
 import { useTranslation } from 'react-i18next';
+import { CircleHelp } from 'lucide-react'
 
 interface Props extends WithOnboardingProps {
   platforms: Array<{
@@ -45,8 +46,8 @@ function InstallOpenReplayTab(props: Props) {
         </div>
         <a href={"https://docs.openreplay.com/en/sdk/using-or/"} target="_blank">
           <Button size={"small"} type={"text"} className="ml-2 flex items-center gap-2">
-            <Icon name={"question-circle"} />
+            <CircleHelp size={14} />
-            <div className={"text-main"}>{t('See Documentation')}</div>
+            <div>{t('See Documentation')}</div>
           </Button>
         </a>
       </h1>

frontend/app/components/Onboarding/components/OnboardingTabs/Callouts.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import DocCard from "App/components/shared/DocCard";
+import { useTranslation } from 'react-i18next';
+import { Mail } from 'lucide-react'
+import { CopyButton } from "UI";
+
+export function CollabCard({ showUserModal }: { showUserModal: () => void }) {
+  const { t } = useTranslation();
+
+  return (
+    <DocCard title={t('Need help from team member?')}>
+      <div className={'text-main cursor-pointer flex items-center gap-2'} onClick={showUserModal}>
+        <Mail size={14} />
+        <span>
+          {t('Invite and Collaborate')}
+        </span>
+      </div>
+    </DocCard>
+  )
+}
+
+export function ProjectKeyCard({ projectKey }: { projectKey: string }) {
+  const { t } = useTranslation();
+  return (
+    <DocCard title={t('Project Key')}>
+      <div className="p-2 rounded bg-white flex justify-between items-center">
+        <div className={'font-mono'}>{projectKey}</div>
+        <CopyButton content={projectKey} className={'capitalize font-medium text-neutral-400'} />
+      </div>
+    </DocCard>
+  )
+}

frontend/app/components/Onboarding/components/OnboardingTabs/OnboardingMobileTabs.tsx

@@ -4,6 +4,7 @@ import DocCard from 'Shared/DocCard/DocCard';
 import { useModal } from 'App/components/Modal';
 import UserForm from 'App/components/Client/Users/components/UserForm/UserForm';
 import AndroidInstallDocs from 'Components/Onboarding/components/OnboardingTabs/InstallDocs/AndroidInstallDocs';
+import { CollabCard, ProjectKeyCard } from "./Callouts";
 import MobileInstallDocs from './InstallDocs/MobileInstallDocs';
 import { useTranslation } from 'react-i18next';
 
@@ -39,18 +40,9 @@ function MobileTrackingCodeModal(props: Props) {
             </div>
 
             <div className="col-span-2">
-              <DocCard title={t('Need help from team member?')}>
+              <CollabCard showUserModal={showUserModal} />
-                <a className="link" onClick={showUserModal}>
-                  {t('Invite and Collaborate')}
-                </a>
-              </DocCard>
 
-              <DocCard title={t('Project Key')}>
+              <ProjectKeyCard projectKey={site.projectKey} />
-                <div className="p-2 rounded bg-white flex justify-between items-center">
-                  {site.projectKey}
-                  <CopyButton content={site.projectKey} />
-                </div>
-              </DocCard>
             </div>
           </div>
         );
@@ -62,18 +54,9 @@ function MobileTrackingCodeModal(props: Props) {
             </div>
 
             <div className="col-span-2">
-              <DocCard title={t('Need help from team member?')}>
+              <CollabCard showUserModal={showUserModal} />
-                <a className="link" onClick={showUserModal}>
-                  {t('Invite and Collaborate')}
-                </a>
-              </DocCard>
 
-              <DocCard title={t('Project Key')}>
+              <ProjectKeyCard projectKey={site.projectKey} />
-                <div className="p-2 rounded bg-white flex justify-between items-center">
-                  {site.projectKey}
-                  <CopyButton content={site.projectKey} />
-                </div>
-              </DocCard>
             </div>
           </div>
         );

frontend/app/components/Onboarding/components/OnboardingTabs/OnboardingTabs.tsx

@@ -3,6 +3,7 @@ import { Tabs, Icon, CopyButton } from 'UI';
 import DocCard from 'Shared/DocCard/DocCard';
 import { useModal } from 'App/components/Modal';
 import UserForm from 'App/components/Client/Users/components/UserForm/UserForm';
+import { CollabCard, ProjectKeyCard } from "./Callouts";
 import InstallDocs from './InstallDocs';
 import ProjectCodeSnippet from './ProjectCodeSnippet';
 import { useTranslation } from 'react-i18next';
@@ -37,20 +38,9 @@ function TrackingCodeModal(props: Props) {
             </div>
 
             <div className="col-span-2">
-              <DocCard title="Need help from team member?">
+              <CollabCard showUserModal={showUserModal} />
-                <a className="link" onClick={showUserModal}>
+
-                  {t('Invite and Collaborate')}
+              <ProjectKeyCard projectKey={site.projectKey} />
-                </a>
-              </DocCard>
-              <DocCard title="Project Key">
-                <div className="rounded bg-white px-2 py-1 flex items-center justify-between">
-                  <span>{site.projectKey}</span>
-                  <CopyButton
-                    content={site.projectKey}
-                    className="capitalize"
-                  />
-                </div>
-              </DocCard>
               <DocCard title="Other ways to install">
                 <a
                   className="link flex items-center"
@@ -77,18 +67,9 @@ function TrackingCodeModal(props: Props) {
             </div>
 
             <div className="col-span-2">
-              <DocCard title="Need help from team member?">
+              <CollabCard showUserModal={showUserModal} />
-                <a className="link" onClick={showUserModal}>
-                  {t('Invite and Collaborate')}
-                </a>
-              </DocCard>
 
-              <DocCard title="Project Key">
+              <ProjectKeyCard projectKey={site.projectKey} />
-                <div className="p-2 rounded bg-white flex justify-between items-center">
-                  {site.projectKey}
-                  <CopyButton content={site.projectKey} />
-                </div>
-              </DocCard>
             </div>
           </div>
         );

frontend/app/components/Onboarding/components/SideMenu.tsx

@@ -41,7 +41,7 @@ function SideMenu(props: Props) {
         <Menu
           mode="inline"
           onClick={handleClick}
-          style={{ marginTop: '8px', border: 'none' }}
+          style={{ border: 'none' }}
           selectedKeys={activeTab ? [activeTab] : []}
         >
           <Menu.Item

frontend/app/components/shared/DocCard/DocCard.tsx

@@ -18,7 +18,7 @@ function DocCard(props: Props) {
   } = props;
 
   return (
-    <div className={cn('p-5 bg-gray-lightest mb-4 rounded', className)}>
+    <div className={cn('p-5 bg-gray-lightest mb-4 rounded-lg', className)}>
       <div className="font-medium mb-2 flex items-center">
         {props.icon && (
           <div