Refine latest features

src/pages/TopFlix.tsx

@@ -64,16 +64,19 @@ function ConfigValue(props: {
       <div className="flex">
         <p className="flex-1 font-bold text-white pr-5 pl-3">
           {link ? (
-            <p onClick={() => navigate(link)} className="hover:underline">
+            <p
+              onClick={() => navigate(link)}
+              className="cursor-pointer hover:underline"
+            >
               {props.name}
             </p>
           ) : (
             <p>{props.name}</p>
           )}
         </p>
-        <p className="pr-3">{props.children}</p>
+        <p className="pr-3 cursor-default">{props.children}</p>
       </div>
-      <p className="pr-5 pl-3">
+      <p className="pr-5 pl-3 cursor-default">
         {props.type.charAt(0).toUpperCase() + props.type.slice(1)}
       </p>
       <Divider marginClass="my-3" />
@@ -237,13 +240,13 @@ export function TopFlix() {
             The most popular movies on sudo-flix.lol, this data is fetched from
             the current backend deployment.
           </Paragraph>
-          <div className="mt-8 flex-col gap-2 w-auto">
-            <div className="bg-buttons-secondary rounded-xl scale-95 py-3 px-5 mb-2 inline-block">
+          <div className="mt-8 flex gap-2 w-auto">
+            <div className="bg-buttons-secondary rounded-xl scale-95 py-3 px-5 mb-2">
               <p className="font-bold bg-opacity-90 text-buttons-secondaryText">
                 Server Lifetime: {timeSinceProcessStart}
               </p>
             </div>
-            <div className="bg-buttons-secondary rounded-xl scale-95 py-3 px-5 mb-2 inline-block">
+            <div className="bg-buttons-secondary rounded-xl scale-95 py-3 px-5 mb-2">
               <p className="font-bold bg-opacity-90 text-buttons-secondaryText">
                 Overall Views: {totalViews}
               </p>
@@ -282,7 +285,9 @@ export function TopFlix() {
           >
             Previous page
           </Button>
-          <div style={{ display: "flex", alignItems: "center" }}>
+          <div
+            style={{ display: "flex", alignItems: "center", cursor: "default" }}
+          >
             {currentPage}/{maxPageCount}
           </div>
           <Button

src/stores/banner/BannerLocation.tsx

@@ -55,7 +55,7 @@ export function Banner(props: {
   );
 }
 
-// This jawn is for advertising the extension for le
+// This jawn is for advertising the extension for le skids
 export function ExtensionBanner(props: {
   location?: string;
   extensionState: ExtensionStatus;
@@ -65,6 +65,10 @@ export function ExtensionBanner(props: {
   const currentLocation = useBannerStore((s) => s.location);
   const loc = props.location ?? null;
   const { pathname } = useLocation();
+  const isEligible =
+    /CrOS/.test(navigator.userAgent) ||
+    /TV/.test(navigator.userAgent) ||
+    /iPhone|iPad|iPod/i.test(navigator.userAgent);
 
   useEffect(() => {
     if (loc) {
@@ -83,8 +87,8 @@ export function ExtensionBanner(props: {
   if (currentLocation !== loc || pathname === "/onboarding/extension")
     return null;
 
-  // Show the banner with a 40% chance
-  if (Math.random() < 0.4) {
+  // Show the banner with a 50% chance or not if users dont meet requirements
+  if (!isEligible && Math.random() < 0.5) {
     let bannerText = "";
     switch (props.extensionState) {
       case "noperms":

src/stores/language/index.tsx

@@ -15,7 +15,7 @@ export interface LanguageStore {
 export const useLanguageStore = create(
   persist(
     immer<LanguageStore>((set) => ({
-      language: "en",
+      language: navigator.language.split("-")[0],
       setLanguage(v) {
         set((s) => {
           s.language = v;