Merge pull request #92 from hanzoai/auth/login-panel-links

Auth, UI: Visually updated StepIndicator component, open terms in new tab

Author: zeekay

packages/auth/components/login-panel.tsx

@@ -163,7 +163,7 @@ const LoginPanel: React.FC<PropsWithChildren & {
           <ProviderLoginButton provider='github' isLoading={isLoading} loginWithProvider={loginWithProvider}>
             <GitHub height={20}/>Github
           </ProviderLoginButton>
-          <p className='text-sm text-muted-2'>By logging in, you agree to our <Link href={termsOfServiceUrl ?? ''}>Terms of Service</Link> and <Link href={privacyPolicyUrl ?? ''}>Privacy Policy</Link>.</p>
+          <p className='text-sm text-muted-2'>By logging in, you agree to our <Link href={termsOfServiceUrl ?? ''} target='_blank'>Terms of Service</Link> and <Link href={privacyPolicyUrl ?? ''} target='_blank'>Privacy Policy</Link>.</p>
         </>
       )}
     </ApplyTypography>

packages/ui/primitives/step-indicator.tsx

@@ -27,20 +27,37 @@ const StepIndicator: React.FC<{
         style={{ paddingLeft: pX, paddingRight: pX }}
       >
         {steps.map((ignore, index) => (<>
-          {index !== 0 && (<div key={`sep-${index}`} className={'h-[1px] grow ' + (muted ? 'bg-muted' : 'bg-foreground')}/>)}
+          {index !== 0 && (
+            <div
+              key={`sep-${index}`}
+              className={cn(
+                'h-[1px] grow',
+                currentStep >= index ? (muted ? 'bg-muted' : 'bg-foreground') : (muted ? 'bg-muted-3' : 'bg-level-3'),
+              )}
+            />
+          )}
           <div 
             key={`circle-${index}`} 
             style={{width: `${dotSizeRem}rem`, height: `${dotSizeRem}rem`}} 
             className={cn(
-              'shrink-0 rounded-full border-[1.5px] ' + (muted ? 'border-muted' : 'border-foreground') , 
-              currentStep === index ? (muted ? 'bg-muted' : 'bg-foreground') : ''
+              'shrink-0 rounded-full border-[1.5px]', 
+              currentStep === index ? (muted ? 'bg-muted-3 border-muted' : 'bg-level-3 border-foreground') : '',
+              currentStep > index || currentStep === steps.length - 1 ? (muted ? 'bg-muted border-muted' : 'bg-foreground border-foreground') : ''
             )} 
           />
         </>))}
       </div>
       <div key='two' className={'grid ' + `grid-cols-${steps.length}` /* These are white listed already */} >
         {steps.map((label, index) => (
-          <div key={index} className={'text-center whitespace-nowrap ' + (muted ? 'text-muted' : 'text-foreground')} >{label}</div>
+          <div
+            key={index}
+            className={cn(
+              'text-center whitespace-nowrap',
+              (muted ? 'text-muted' : 'text-foreground')
+            )}
+          >
+            {label}
+          </div>
         ))}
       </div>
     </div>