fix: TwistySection sync borders in moves sections with design

vscubing · Mar 24, 2024 · c4f9722 · c4f9722
1 parent d1c237f
commit c4f9722
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/src/features/contests/pages/WatchSolvePage/TwistySection.lazy.tsx b/src/features/contests/pages/WatchSolvePage/TwistySection.lazy.tsx
@@ -46,18 +46,18 @@ function TwistySectionContent({ player, scramble }: { player: Player; scramble:
           className='flex flex-1 flex-col gap-3 md:grid md:grid-cols-2 sm:flex'
           ref={movesWrapperRef}
           type='multiple'
-          value={matchesQuery('sm') ? undefined : ['Scramble', 'Solve']}
+          defaultValue={matchesQuery('sm') ? [] : ['Scramble', 'Solve']}
         >
           <AccordionItem value='Scramble'>
-            <div className='flex flex-col border-t border-secondary-20 pt-2'>
+            <div className='mt-2 flex flex-col border-t border-grey-60 pt-2'>
               <div className='scrollbar basis-0 overflow-y-auto pr-2 md:overflow-y-visible' ref={scrambleWrapperRef}>
                 <span ref={scrambleRef}>{scramble}</span>
               </div>
             </div>
           </AccordionItem>
 
           <AccordionItem value='Solve' className='flex-1'>
-            <div className={cn('flex flex-col border-t border-secondary-20 pt-2', 'h-full')}>
+            <div className={cn('mt-2 flex flex-col border-t border-grey-60 pt-2', 'h-full')}>
               <div className={cn('scrollbar basis-0 overflow-y-auto pr-2 md:overflow-y-visible', 'flex-grow')}>
                 <TwistyAlgViewer twistyPlayer={player} />
               </div>
@@ -89,7 +89,7 @@ function AccordionItem({ value, className, children }: AccordionItemProps) {
       </Accordion.Header>
       <Accordion.Content
         className={cn(
-          'data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down title-h3 h-full overflow-y-clip tracking-wide',
+          'title-h3 h-full overflow-y-clip tracking-wide data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
         )}
       >
         {children}