fix(earn): improve terms acceptance checkbox visibility (#1997)

- Add visible border (2px) to checkbox for better prominence
- Display error indicator (red circle) when user forgets to check
- Fix error text color in dark mode (now shows red correctly)
- Remove double-toggle bug by simplifying click handling
- Match checkbox size to sign-up form for consistency

Resolves user feedback that checkbox was too subtle and easy to miss.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude <[email protected]>

Author: 0xBigBoss

packages/app/features/earn/components/EarnTerms.tsx

@@ -2,7 +2,7 @@ import { Anchor, type AnchorProps, Paragraph } from '@my/ui'
 
 export const EarnTerms = ({ hasError }: { hasError?: boolean }) => {
   const colorProps = {
-    color: hasError ? '$lightGrayTextField' : '$lightGrayTextField',
+    color: hasError ? '$error' : '$lightGrayTextField',
     '$theme-light': {
       color: hasError ? '$error' : '$darkGrayTextField',
     },

packages/app/features/earn/deposit/screen.tsx

@@ -1,5 +1,6 @@
 import {
   Card,
+  Circle,
   Fade,
   Paragraph,
   Separator,
@@ -407,6 +408,8 @@ export function DepositForm() {
               },
             },
             areTermsAccepted: {
+              borderWidth: 2,
+              borderColor: form.formState.errors.areTermsAccepted ? '$error' : '$borderColor',
               backgroundColor: form.getValues().areTermsAccepted ? '$primary' : '$color1',
             },
           }}
@@ -538,7 +541,13 @@ export function DepositForm() {
               {!coinBalances.isLoading && !hasExistingDeposit && <ReferredBy />}
               {hasExistingDeposit ? null : (
                 <XStack gap={'$3'} ai={'center'}>
-                  {areTermsAccepted}
+                  {form.formState.errors.areTermsAccepted ? (
+                    <Shake shakeKey="areTermsAccepted" baseStyle={{ flexShrink: 0 }}>
+                      <Circle size={'$3'} borderWidth={2} borderColor={'$error'} />
+                    </Shake>
+                  ) : (
+                    areTermsAccepted
+                  )}
                   {form.formState.errors.areTermsAccepted ? (
                     <Shake shakeKey="areTermsAccepted" baseStyle={{ width: '100%', flex: 1 }}>
                       <EarnTerms hasError={true} />