crack some player recommendations

HolodexNet · Jun 12, 2024 · 2fbaa54 · 2fbaa54
1 parent 08fe8f6
commit 2fbaa54
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/packages/react/src/components/player/PlayerRecommendations.tsx b/packages/react/src/components/player/PlayerRecommendations.tsx
@@ -109,12 +109,12 @@ function RecommendationCollapsible({
           onClick={() => setOpen(!open)}
         >
           <div className={open ? "i-heroicons:minus" : "i-heroicons:plus"} />
-          {label}
+          <span className="capitalize">{label}</span>
           <div className="grow" />
           <span>{Children.count(children)}</span>
         </Button>
       </CollapsibleTrigger>
-      <CollapsibleContent>{children}</CollapsibleContent>
+      <CollapsibleContent className="bg-base-2">{children}</CollapsibleContent>
     </Collapsible>
   );
 }
diff --git a/packages/react/src/components/player/QueueList.tsx b/packages/react/src/components/player/QueueList.tsx
@@ -11,6 +11,7 @@ import {
 import { useMemo, useState } from "react";
 import NewPlaylistDialog from "../playlist/NewPlaylistDialog";
 import { cn } from "@/lib/utils";
+import { WATCH_PAGE_DROPDOWN_BUTTON_STYLE } from "@/shadcn/ui/button.variants";
 
 export function QueueList({ currentId }: { currentId?: string }) {
   const { t } = useTranslation();
@@ -24,13 +25,13 @@ export function QueueList({ currentId }: { currentId?: string }) {
   return (
     <Collapsible
       open={open}
-      className="flex flex-col gap-2 rounded-lg bg-base-3 @container"
+      className="flex flex-col gap-2 overflow-hidden rounded-lg border border-base bg-base-3 @container"
     >
       <CollapsibleTrigger asChild>
         <Button
           size="lg"
           variant="ghost"
-          className="justify-start px-4 font-bold"
+          className={WATCH_PAGE_DROPDOWN_BUTTON_STYLE}
           onClick={() => setOpen(!open)}
         >
           <div className={open ? "i-heroicons:minus" : "i-heroicons:plus"} />
@@ -43,7 +44,7 @@ export function QueueList({ currentId }: { currentId?: string }) {
       </CollapsibleTrigger>
       <CollapsibleContent>
         {open && (
-          <div className="flex max-h-[70vh] flex-col overflow-y-auto">
+          <div className="flex max-h-[40vh] flex-col overflow-y-auto">
             <div className="flex justify-between">
               <NewPlaylistDialog
                 triggerElement={