UwU I'm soz I fucked up :( :3 forgive me D: (^.^) (update card styling to be closer to design)

Co-authored-by: mrjvs <mistrjvs@gmail.com>

src/components/overlays/OverlayRouter.tsx

@@ -73,12 +73,12 @@ function RouterBase(props: { id: string; children: ReactNode }) {
 
   return (
     <a.div ref={ref} style={dimensions} className="overflow-hidden">
-      <Flare.Base className="group w-full h-full rounded-xl transition-colors duration-100 text-video-context-type-main">
+      <Flare.Base className="group w-full bg-video-context-border bg-opacity-25 h-full rounded-2xl transition-colors duration-100 text-video-context-type-main">
         <Flare.Light
           flareSize={400}
           cssColorVar="--colors-video-context-light"
           backgroundClass="bg-video-context-background duration-100"
-          className="rounded-xl opacity-100"
+          className="rounded-2xl opacity-100"
         />
         <Flare.Child className="pointer-events-auto relative transition-transform duration-100">
           {props.children}

src/components/player/internals/ContextUtils.tsx

@@ -22,7 +22,7 @@ function CardWithScrollable(props: { children: React.ReactNode }) {
 
 function SectionTitle(props: { children: React.ReactNode }) {
   return (
-    <h3 className="uppercase font-bold text-video-context-type-secondary text-sm pt-8 pl-1 pb-2.5 border-b border-opacity-25 border-video-context-border">
+    <h3 className="uppercase font-bold text-video-context-type-secondary text-xs pt-8 pl-1 pb-2.5 border-b border-opacity-25 border-video-context-border">
       {props.children}
     </h3>
   );
@@ -43,7 +43,9 @@ function LinkTitle(props: { children: React.ReactNode; textClass?: string }) {
 
 function Section(props: { children: React.ReactNode; className?: string }) {
   return (
-    <div className={classNames("pt-5", props.className)}>{props.children}</div>
+    <div className={classNames("pt-4 space-y-1", props.className)}>
+      {props.children}
+    </div>
   );
 }
 

tailwind.config.js

@@ -137,6 +137,7 @@ module.exports = {
                 border: "#4F5C66",
                 buttonFocus: "#202836",
                 flagBg: "#202836",
+                cardBorder: "#1B262E",
 
                 type: {
                   main: "#617A8A",