ui: onboarding fixes

frontend/app/components/Onboarding/Onboarding.tsx

@@ -1,16 +1,14 @@
 import React from 'react';
 import { Redirect, Route, RouteComponentProps, Switch } from 'react-router';
 import { withRouter } from 'react-router-dom';
-
 import { OB_TABS, onboarding as onboardingRoute, withSiteId } from 'App/routes';
-import { Icon } from 'UI';
-
 import IdentifyUsersTab from './components/IdentifyUsersTab';
 import InstallOpenReplayTab from './components/InstallOpenReplayTab';
 import IntegrationsTab from './components/IntegrationsTab';
 import ManageUsersTab from './components/ManageUsersTab';
 import SideMenu from './components/SideMenu';
 import { useTranslation } from 'react-i18next';
+import { Smartphone, AppWindow } from 'lucide-react';
 
 interface Props {
   match: {
@@ -33,7 +31,7 @@ function Onboarding(props: Props) {
     {
       label: (
         <div className="font-semibold flex gap-2 items-center">
-          <Icon name="browser/browser" size={16} />
+          <AppWindow size={16} />
           &nbsp;{t('Web')}
         </div>
       ),
@@ -42,7 +40,7 @@ function Onboarding(props: Props) {
     {
       label: (
         <div className="font-semibold flex gap-2 items-center">
-          <Icon name="mobile" size={16} />
+          <Smartphone size={16} />
           &nbsp;{t('Mobile')}
         </div>
       ),

frontend/app/components/Onboarding/components/IdentifyUsersTab/IdentifyUsersTab.tsx

@@ -130,18 +130,20 @@ function IdentifyUsersTab(props: Props) {
                 'To identify users through metadata, you will have to explicitly specify your user metadata so it can be injected during sessions. Follow the below steps',
               )}
             </p>
-            <div className="flex items-start">
+            <div className="flex items-center gap-2 mb-2">
               <CircleNumber text="1" />
               <MetadataList />
             </div>
 
             <div className="my-6" />
             <div className="flex items-start">
-              <CircleNumber text="2" />
-              <div className="pt-1 w-full">
+              <div>
+                <CircleNumber text="2" />
                 <span className="font-bold">
                   {t('Inject metadata when recording sessions')}
                 </span>
+              </div>
+              <div className="pt-1 w-full">
                 <div className="my-2">
                   {t('Use the')}&nbsp;
                   <span className="highlight-blue">setMetadata</span>{' '}

frontend/app/components/Onboarding/components/MetadataList/MetadataList.tsx

@@ -55,16 +55,14 @@ function MetadataList() {
       <Button type="default" onClick={() => openModal()}>
         {t('Add Metadata')}
       </Button>
-      <div className="flex ml-2">
-        {fields.map((f, index) => (
-          <TagBadge
-            key={index}
-            text={f.key}
-            onRemove={() => removeMetadata(f)}
-            outline
-          />
-        ))}
-      </div>
+      {fields.map((f, index) => (
+        <TagBadge
+          key={index}
+          text={f.key}
+          onRemove={() => removeMetadata(f)}
+          outline
+        />
+      ))}
     </div>
   );
 }

frontend/app/components/ui/Input/Input.tsx

@@ -31,7 +31,7 @@ const Input = React.forwardRef((props: Props, ref: any) => {
       {icon && (
         <Icon
           name={icon}
-          className="absolute top-0 bottom-0 my-auto ml-4"
+          className="absolute top-0 bottom-0 my-auto ml-4 z-10"
           size="14"
         />
       )}