Island sheet: quiz button stays primary, lessons button gets a neon-green outline and clearer wording

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/components/IslandSheet.tsx

@@ -9,8 +9,8 @@ import { toFa } from '@/lib/format';
 import { MathText } from '@/lib/MathText';
 
 /**
- * برگه‌ی جزیره. کارِ اصلی یک دکمه است: «شروعِ آزمونِ جزیره». فهرستِ درس‌ها
+ * برگه‌ی جزیره. دو دکمه: «اول درس‌ها رو بخون» (رنگی و بالا، چون تست‌کننده‌ها
- * (معرفیِ هر نوع مسئله) زیرِ آن و بسته است، برای بچه‌ای که اول می‌خواهد بخواند.
+ * دکمه‌ی کم‌رنگِ قبلی را پیدا نمی‌کردند) و «شروعِ آزمونِ جزیره». فهرستِ درس‌ها زیرِ دکمه‌ی اول باز می‌شود.
  */
 export function IslandSheet({ node, color, onClose }: { node: HomeNode | null; color: string; onClose: () => void }) {
   const nav = useNav();
@@ -55,20 +55,21 @@ export function IslandSheet({ node, color, onClose }: { node: HomeNode | null; c
           <p className="mb-4 text-sm leading-7 text-body">
             {done
               ? 'این جزیره رو تموم کردی! می‌تونی دوباره تمرینش کنی (امتیازِ تازه نداره).'
-              : 'چند سوالِ کوتاه از همین جزیره. هر جوابی بدی، آخرش جزیره‌ی بعدی باز می‌شه.'}
+              : 'اگه مطمئن نیستی، اول درس‌ها رو بخون؛ بعد آزمونِ کوتاهِ جزیره رو بده. هر جوابی بدی، آخرش جزیره‌ی بعدی باز می‌شه.'}
           </p>
+
           <PrimaryButton color={color} onClick={start}>
             {done ? <><RotateCw size={18} /> دوباره تمرین کن</> : <><Play size={18} fill="white" /> شروعِ آزمونِ جزیره</>}
           </PrimaryButton>
-
           <button
             type="button"
             onClick={() => setShowLessons((s) => !s)}
-            className="mt-3 flex w-full items-center justify-center gap-1.5 py-2 text-sm font-bold text-muted"
+            className="mt-3 mb-1 flex w-full items-center justify-center gap-2 rounded-2xl border-2 py-3 text-sm font-black transition-colors active:translate-y-[2px]"
+            style={{ borderColor: '#39FF14', color: '#15803d', backgroundColor: showLessons ? '#39FF1422' : 'white' }}
             aria-expanded={showLessons}
           >
-            <BookOpen size={15} /> اول درس‌هاش رو بخونم
+            <BookOpen size={18} /> {done ? 'مرورِ درس‌ها' : 'اول درس‌ها رو بخون'}
-            <ChevronDown size={15} className={`transition-transform ${showLessons ? 'rotate-180' : ''}`} />
+            <ChevronDown size={16} className={`transition-transform ${showLessons ? 'rotate-180' : ''}`} />
           </button>
 
           {showLessons && (