feat: more design tweaks (#206)

.editorconfig

@@ -2,7 +2,7 @@ root = true
 
 [*]
 indent_style = tab
-indent_size = 2
+indent_size = 4
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true

packages/react/src/components/IDKitWidget/States/ErrorState.tsx

@@ -3,6 +3,7 @@ import useIDKitStore from '@/store/idkit'
 import type { IDKitStore } from '@/store/idkit'
 import ErrorIcon from '@/components/Icons/ErrorIcon'
 import { AppErrorCodes } from '@worldcoin/idkit-core'
+import ReloadIcon from '@/components/Icons/ReloadIcon'
 
 const getParams = ({ retryFlow, errorState }: IDKitStore) => ({ retryFlow, errorState })
 
@@ -54,8 +55,9 @@ const ErrorState = () => {
 				<button
 					type="button"
 					onClick={retryFlow}
-					className="inline-flex items-center rounded-full border border-transparent bg-indigo-600 px-8 py-3 font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-indigo-600"
+					className="inline-flex items-center rounded-lg border border-ebecef bg-transparent px-8 py-3 font-medium text-3c424b shadow-sm transition duration-300 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-40"
 				>
+					<ReloadIcon className="mr-1.5 h-5 w-5" />
 					{__('Try Again')}
 				</button>
 			</div>

packages/react/src/components/IDKitWidget/States/WorldID/QRState.tsx

@@ -6,7 +6,6 @@ import { classNames } from '@/lib/utils'
 import Qrcode from '@/components/QRCode'
 import { useCallback, useState } from 'react'
 import { AnimatePresence, motion } from 'framer-motion'
-import LoadingIcon from '@/components/Icons/LoadingIcon'
 import WorldcoinIcon from '@/components/Icons/WorldcoinIcon'
 import QRPlaceholderIcon from '@/components/Icons/QRPlaceholderIcon'
 
@@ -45,7 +44,7 @@ const QRState: FC<Props> = ({ qrData, showQR, setShowQR }) => {
 										opacity: 1,
 										height: 'auto',
 										marginTop: 8,
-										y: 6,
+										y: -20,
 										transition: {
 											duration: 0.25,
 											opacity: { delay: 0.05, duration: 0.2 },

packages/react/src/components/IDKitWidget/States/WorldIDState.tsx

@@ -82,13 +82,26 @@ const WorldIDState = () => {
 					Please use your World App to scan the QR code
 				</p>
 			</div>
-			{verificationState === VerificationState.WaitingForApp ? (
-				<div className="flex items-center justify-center">
-					<LoadingIcon className="h-20 w-20" />
+			<div className="relative">
+				{verificationState == VerificationState.WaitingForApp && (
+					<div className="absolute inset-0 flex flex-col items-center justify-center space-y-6">
+						<LoadingIcon className="h-6 w-6" />
+						<div>
+							<p className="font-bold text-657080">Verifying</p>
+							<p className="text-sm text-657080">Please continue in app</p>
+						</div>
+					</div>
+				)}
+				<div
+					className={
+						verificationState === VerificationState.WaitingForApp
+							? 'opacity-40 blur-lg transition duration-500 ease-in-out'
+							: 'transition duration-500 ease-in-out'
+					}
+				>
+					<QRState showQR={showQR} setShowQR={setShowQR} qrData={connectorURI} />
 				</div>
-			) : (
-				<QRState showQR={showQR} setShowQR={setShowQR} qrData={connectorURI} />
-			)}
+			</div>
 		</div>
 	)
 }

packages/react/src/components/Icons/LoadingIcon.tsx

@@ -1,16 +1,19 @@
-import { __ } from '@/lang'
+import type { SVGAttributes } from 'react'
 
-const LoadingIcon = ({ className = '' }: { className?: string }) => (
-	<div className="flex items-center justify-center">
-		<div
-			className={`inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite] ${className}`}
-			role="status"
-		>
-			<span className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">
-				{__('Loading...')}
-			</span>
-		</div>
-	</div>
+const LoadingIcon = ({ className, ...props }: SVGAttributes<SVGElement>) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+		className={`animate-spin motion-reduce:animate-[spin_1.5s_linear_infinite] ${className}`}
+		{...props}
+	>
+		<circle cx="12" cy="12" r="10.75" stroke="#191C20" strokeOpacity=".16" strokeWidth="2.5" />
+		<path
+			fill="#191C20"
+			d="M17.28 2.633c.338-.6.127-1.368-.505-1.642A12 12 0 0 0 7.459.892c-.638.261-.864 1.024-.539 1.632.326.607 1.08.827 1.725.584a9.504 9.504 0 0 1 6.897.073c.64.257 1.399.053 1.737-.548Z"
+		/>
+	</svg>
 )
 
 export default LoadingIcon

packages/react/src/components/Icons/ReloadIcon.tsx

@@ -0,0 +1,15 @@
+import type { SVGAttributes } from 'react'
+
+const ReloadIcon = (props: SVGAttributes<SVGElement>) => (
+	<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+		<path
+			d="M12.3809 1.6665L13.3626 4.24214C12.3754 3.66434 11.2263 3.33317 9.99992 3.33317C6.31802 3.33317 3.33325 6.31794 3.33325 9.99984C3.33325 11.2141 3.6579 12.3526 4.22513 13.3332M7.61897 18.3332L6.63719 15.7575C7.62438 16.3353 8.77348 16.6665 9.99992 16.6665C13.6818 16.6665 16.6666 13.6817 16.6666 9.99984C16.6666 8.78555 16.3419 7.64708 15.7747 6.6665"
+			stroke="#3C424B"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+	</svg>
+)
+
+export default ReloadIcon

packages/react/src/types/config.ts

@@ -22,7 +22,10 @@ export type WidgetConfig = {
 
 export type Config = Required<Pick<IDKitConfig, 'action'>> &
 	WidgetConfig &
-	((Exclude<IDKitConfig, 'app_id'> & { advanced: { self_hosted: true } }) | (IDKitConfig & { advanced?: { self_hosted?: false } }))
+	(
+		| (Exclude<IDKitConfig, 'app_id'> & { advanced: { self_hosted: true } })
+		| (IDKitConfig & { advanced?: { self_hosted?: false } })
+	)
 
 export type WidgetProps = Config & {
 	children?: ({ open }: { open: () => void }) => JSX.Element

packages/react/tailwind.config.cjs

@@ -27,19 +27,19 @@ module.exports = {
 	darkMode: 'class',
 	theme: {
 		fontSize: {
-			xs: ["12px", { lineHeight: "16px" }],
-			sm: ["14px", { lineHeight: "20px" }],
-			base: ["16px", { lineHeight: "24px" }],
-			lg: ["18px", { lineHeight: "28px" }],
-			xl: ["20px", { lineHeight: "28px" }],
-			"2xl": ["24px", { lineHeight: "32px" }],
-			"3xl": ["30px", { lineHeight: "36px" }],
-			"4xl": ["36px", { lineHeight: "36px" }],
-			"5xl": ["48px", { lineHeight: "1" }],
-			"6xl": ["60px", { lineHeight: "1" }],
-			"7xl": ["72px", { lineHeight: "1" }],
-			"8xl": ["96px", { lineHeight: "1" }],
-			"9xl": ["144px", { lineHeight: "1" }],
+			xs: ['12px', { lineHeight: '16px' }],
+			sm: ['14px', { lineHeight: '20px' }],
+			base: ['16px', { lineHeight: '24px' }],
+			lg: ['18px', { lineHeight: '28px' }],
+			xl: ['20px', { lineHeight: '28px' }],
+			'2xl': ['24px', { lineHeight: '32px' }],
+			'3xl': ['30px', { lineHeight: '36px' }],
+			'4xl': ['36px', { lineHeight: '36px' }],
+			'5xl': ['48px', { lineHeight: '1' }],
+			'6xl': ['60px', { lineHeight: '1' }],
+			'7xl': ['72px', { lineHeight: '1' }],
+			'8xl': ['96px', { lineHeight: '1' }],
+			'9xl': ['144px', { lineHeight: '1' }],
 		},
 		spacing: {
 			px: '1px',
@@ -110,13 +110,15 @@ module.exports = {
 					'#0d151d',
 					'#1e40af',
 					'#29343f',
+					'#3c424b',
 					'#4940e0',
 					'#596673',
 					'#657080',
 					'#70868f',
 					'#9eafc0',
 					'#d3dfea',
 					'#e5e7eb',
+					'#ebecef',
 					'#ece8fb',
 					'#f1f5f8',
 					'#f2f5f9',