fix border of context menu

src/components/overlays/OverlayRouter.tsx

@@ -73,7 +73,7 @@ function RouterBase(props: { id: string; children: ReactNode }) {
 
   return (
     <a.div ref={ref} style={dimensions} className="overflow-hidden">
-      <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.Base className="group w-full bg-video-context-border h-full rounded-2xl transition-colors duration-100 text-video-context-type-main">
         <Flare.Light
           flareSize={400}
           cssColorVar="--colors-video-context-light"

src/components/player/atoms/Episodes.tsx

@@ -125,7 +125,7 @@ function EpisodesView({
             >
               <Context.LinkTitle>
                 <div className="text-left flex items-center space-x-3">
-                  <span className="p-0.5 px-2 rounded inline bg-video-context-border bg-opacity-10">
+                  <span className="p-0.5 px-2 rounded inline bg-video-context-border">
                     E{ep.number}
                   </span>
                   <span className="line-clamp-1 break-all">{ep.title}</span>

src/components/player/atoms/settings/CaptionsView.tsx

@@ -26,7 +26,7 @@ export function CaptionOption(props: {
 }) {
   return (
     <div
-      className="grid grid-cols-[auto,1fr,auto] items-center gap-3 rounded -ml-3 -mr-3 px-3 py-2 cursor-pointer hover:bg-video-context-border hover:bg-opacity-10"
+      className="grid grid-cols-[auto,1fr,auto] items-center gap-3 rounded -ml-3 -mr-3 px-3 py-2 cursor-pointer hover:bg-video-context-border"
       onClick={props.onClick}
     >
       <div>

src/components/player/atoms/settings/SourceSelectingView.tsx

@@ -28,7 +28,7 @@ export function SourceOption(props: {
   return (
     <div
       onClick={props.onClick}
-      className="grid grid-cols-[1fr,auto] items-center gap-3 rounded -ml-3 -mr-3 px-3 py-2 cursor-pointer hover:bg-video-context-border hover:bg-opacity-10"
+      className="grid grid-cols-[1fr,auto] items-center gap-3 rounded -ml-3 -mr-3 px-3 py-2 cursor-pointer hover:bg-video-context-border"
     >
       <span
         className={classNames(props.selected && "text-white", "font-medium")}

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-xs 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-video-context-border">
       {props.children}
     </h3>
   );
@@ -58,8 +58,8 @@ function Link(props: {
     "flex justify-between items-center py-2 pl-3 pr-3 -ml-3 rounded w-full",
     {
       "cursor-default": !props.onClick,
-      "hover:bg-video-context-border hover:bg-opacity-10": !!props.onClick,
+      "hover:bg-video-context-border": !!props.onClick,
-      "bg-video-context-border bg-opacity-10": props.active,
+      "bg-video-context-border": props.active,
     }
   );
   const styles = { width: "calc(100% + 1.5rem)" };
@@ -90,7 +90,7 @@ function Title(props: {
 }) {
   return (
     <div>
-      <h3 className="font-bold text-video-context-type-main pb-3 pt-5 border-b border-opacity-25 border-video-context-border flex justify-between items-center">
+      <h3 className="font-bold text-video-context-type-main pb-3 pt-5 border-b border-video-context-border flex justify-between items-center">
         <div className="flex items-center space-x-3">{props.children}</div>
         <div>{props.rightSide}</div>
       </h3>
@@ -135,9 +135,7 @@ function IconButton(props: { icon: Icons; onClick?: () => void }) {
 }
 
 function Divider() {
-  return (
+  return <hr className="my-4 border-0 w-full h-px bg-video-context-border" />;
-    <hr className="my-4 border-0 w-full h-px bg-video-context-border bg-opacity-25" />
-  );
 }
 
 function SmallText(props: { children: React.ReactNode }) {

tailwind.config.js

@@ -26,23 +26,23 @@ module.exports = {
         "ash-400": "#3D394D",
         "ash-300": "#2C293A",
         "ash-200": "#2B2836",
-        "ash-100": "#1E1C26",
+        "ash-100": "#1E1C26"
       },
 
       /* fonts */
       fontFamily: {
-        "open-sans": "'Open Sans'",
+        "open-sans": "'Open Sans'"
       },
 
       /* animations */
       keyframes: {
         "loading-pin": {
           "0%, 40%, 100%": { height: "0.5em", "background-color": "#282336" },
-          "20%": { height: "1em", "background-color": "white" },
+          "20%": { height: "1em", "background-color": "white" }
-        },
+        }
       },
-      animation: { "loading-pin": "loading-pin 1.8s ease-in-out infinite" },
+      animation: { "loading-pin": "loading-pin 1.8s ease-in-out infinite" }
-    },
+    }
   },
   plugins: [
     require("tailwind-scrollbar"),
@@ -52,31 +52,31 @@ module.exports = {
           colors: {
             // Branding
             pill: {
-              background: "#1C1C36",
+              background: "#1C1C36"
             },
 
             // meta data for the theme itself
             global: {
               accentA: "#505DBD",
-              accentB: "#3440A1",
+              accentB: "#3440A1"
             },
 
             // light bar
             lightBar: {
-              light: "#2A2A71",
+              light: "#2A2A71"
             },
 
             // Buttons
             buttons: {
               toggle: "#8D44D6",
-              toggleDisabled: "#202836",
+              toggleDisabled: "#202836"
             },
 
             // only used for body colors/textures
             background: {
               main: "#0A0A10",
               accentA: "#6E3B80",
-              accentB: "#1F1F50",
+              accentB: "#1F1F50"
             },
 
             // typography
@@ -85,7 +85,7 @@ module.exports = {
               text: "#73739D",
               dimmed: "#926CAD",
               divider: "#262632",
-              secondary: "#64647B",
+              secondary: "#64647B"
             },
 
             // search bar
@@ -94,7 +94,7 @@ module.exports = {
               focused: "#24243C",
               placeholder: "#4A4A71",
               icon: "#545476",
-              text: "#FFFFFF",
+              text: "#FFFFFF"
             },
 
             // media cards
@@ -106,7 +106,7 @@ module.exports = {
               barColor: "#4B4B63",
               barFillColor: "#BA7FD6",
               badge: "#151522",
-              badgeText: "#5F5F7A",
+              badgeText: "#5F5F7A"
             },
 
             // video player
@@ -118,23 +118,23 @@ module.exports = {
                 error: "#E44F4F",
                 success: "#40B44B",
                 loading: "#B759D8",
-                noresult: "#64647B",
+                noresult: "#64647B"
               },
 
               progress: {
                 background: "#8787A8",
                 preloaded: "#8787A8",
-                watched: "#A75FC9",
+                watched: "#A75FC9"
               },
 
               audio: {
-                set: "#A75FC9",
+                set: "#A75FC9"
               },
 
               context: {
                 background: "#0C1216",
                 light: "#4D79A8",
-                border: "#4F5C66",
+                border: "#141D23",
                 buttonFocus: "#202836",
                 flagBg: "#202836",
                 cardBorder: "#1B262E",
@@ -142,13 +142,13 @@ module.exports = {
                 type: {
                   main: "#617A8A",
                   secondary: "#374A56",
-                  accent: "#A570FA",
+                  accent: "#A570FA"
-                },
+                }
-              },
+              }
-            },
+            }
-          },
+          }
-        },
+        }
-      },
+      }
-    }),
+    })
-  ],
+  ]
 };