File: src/lib/form/file-uploader.tsx
The issue: when variant="info", the icon is hardcoded fill-klerosUIComponentsPrimaryBlue while the message text is text-klerosUIComponentsSecondaryText, so the icon and text don't match visually. Additionally the message container is flex items-center, so when the message wraps to multiple lines the icon sits centered instead of aligned to the first line.
Workaround in kleros-v2 web repo (SubmitEvidenceModal.tsx):
svg:has(+ [id="dropzone-label"]) { fill: ${theme.secondaryText}; }
div:has(> [id="dropzone-label"]) { align-items: flex-start; }
Suggested fix: stop hardcoding the info icon to primary blue (match the text color), use align-items: flex-start for multi-line messages, or expose both as props/variants.
File: src/lib/form/file-uploader.tsx
The issue: when variant="info", the icon is hardcoded fill-klerosUIComponentsPrimaryBlue while the message text is text-klerosUIComponentsSecondaryText, so the icon and text don't match visually. Additionally the message container is flex items-center, so when the message wraps to multiple lines the icon sits centered instead of aligned to the first line.
Workaround in kleros-v2 web repo (SubmitEvidenceModal.tsx):
svg:has(+ [id="dropzone-label"]) { fill: ${theme.secondaryText}; }
div:has(> [id="dropzone-label"]) { align-items: flex-start; }
Suggested fix: stop hardcoding the info icon to primary blue (match the text color), use align-items: flex-start for multi-line messages, or expose both as props/variants.