website refactor

apps/website/components/auth/UserRolesPreview.tsx

@@ -52,7 +52,9 @@ export function UserRolesPreview({ variant = 'full' }: UserRolesPreviewProps) {
                 justifyContent="center" 
                 mb={1}
               >
-                <Icon icon={role.icon} size={4} className={`text-${role.color}`} />
+                <Text color={`text-${role.color}`}>
+                  <Icon icon={role.icon} size={4} />
+                </Text>
               </Box>
               <Text size="xs" color="text-gray-500">{role.title}</Text>
             </Stack>
@@ -89,7 +91,9 @@ export function UserRolesPreview({ variant = 'full' }: UserRolesPreviewProps) {
             alignItems="center" 
             justifyContent="center"
           >
-            <Icon icon={role.icon} size={5} className={`text-${role.color}`} />
+            <Text color={`text-${role.color}`}>
+              <Icon icon={role.icon} size={5} />
+            </Text>
           </Box>
           <Box>
             <Heading level={4}>{role.title}</Heading>