Merge pull request #262 from CSSLab/codex/practice-nav-polish

Polish practice naming and modal styling

Author: ashtonanderson

src/components/Common/Header.tsx

@@ -212,7 +212,7 @@ export const Header: React.FC = () => {
             href="/openings"
             className={`px-2 py-1 transition-all duration-200 hover:!text-primary ${router.pathname.startsWith('/openings') ? '!text-primary' : '!text-primary/80'}`}
           >
-            OPENINGS
+            PRACTICE
           </Link>
           <Link
             href="/turing"
@@ -392,7 +392,7 @@ export const Header: React.FC = () => {
               Puzzles
             </Link>
             <Link href="/openings" className="uppercase">
-              Openings
+              Practice
             </Link>
             <Link href="/turing" className="uppercase">
               Bot-or-not

src/components/Home/HomeHero.tsx

@@ -229,7 +229,7 @@ export const HomeHero: React.FC<Props> = ({ scrollHandler }: Props) => {
             />
             <FeatureCard
               icon="play_lesson"
-              title="Openings"
+              title="Practice"
               description="Learn and practice chess openings with Maia"
               href="/openings"
               index={4}

src/components/Home/Sections/AdditionalFeaturesSection.tsx

@@ -135,10 +135,10 @@ export const AdditionalFeaturesSection = ({
   const features: Feature[] = [
     {
       icon: <StarIcon />,
-      title: 'Openings Practice',
+      title: 'Practice',
       description:
         "Drill chess openings against Maia models calibrated to specific rating levels, allowing you to practice against opponents similar to those you'll face.",
-      action: { type: 'link', href: '/openings', label: 'Practice Openings' },
+      action: { type: 'link', href: '/openings', label: 'Practice' },
       iconBgColor: 'bg-human-3/10',
       iconTextColor: 'text-human-3',
     },

src/components/Openings/OpeningSelectionModal.tsx

@@ -414,7 +414,7 @@ const BrowsePanel: React.FC<{
   }
 
   const renderTabs = () => (
-    <div className="grid w-full select-none grid-cols-3 items-center justify-between border-b border-glass-border bg-white/[0.02]">
+    <div className="grid w-full select-none grid-cols-3 items-center justify-between border-b border-glass-border bg-white/[0.04]">
       {[
         { label: 'Openings', value: 'openings' as const },
         { label: 'Endgames', value: 'endgames' as const },
@@ -2719,13 +2719,13 @@ export const OpeningSelectionModal: React.FC<Props> = ({
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
-        className="relative flex h-[90vh] max-h-[900px] w-[98vw] max-w-[1320px] flex-col items-start justify-start overflow-hidden rounded-xl border border-glass-border bg-[#231d1a] backdrop-blur-md md:h-[90vh]"
+        className="relative flex h-[90vh] max-h-[900px] w-[98vw] max-w-[1320px] flex-col items-start justify-start overflow-hidden rounded-xl border border-glass-border bg-[#171513] shadow-[0_30px_90px_rgba(0,0,0,0.5)] backdrop-blur-md md:h-[90vh]"
       >
         <div
           className="pointer-events-none absolute inset-0"
           style={{
             background:
-              'linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00) 20%), radial-gradient(ellipse 180% 160% at 0% 100%, rgba(239, 68, 68, 0.08) 0%, transparent 72%)',
+              'linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01) 22%, rgba(255,255,255,0) 38%), radial-gradient(ellipse 140% 120% at 50% -10%, rgba(255,255,255,0.06) 0%, transparent 48%), radial-gradient(ellipse 180% 160% at 0% 100%, rgba(127, 29, 29, 0.09) 0%, transparent 70%)',
           }}
         />
         <button
@@ -2742,7 +2742,7 @@ export const OpeningSelectionModal: React.FC<Props> = ({
         >
           <div>
             <h1 className="text-[19px] font-semibold text-primary">
-              Maia Drill Studio
+              Practice with Maia
             </h1>
             <p className="mt-0.5 text-[13px] text-secondary">
               Select drills, configure settings, practice against Maia 3.