FeatureFlags, common colors

aiarena · Dec 9, 2024 · 44436e1 · 44436e1
1 parent a80cc4d
commit 44436e1
Show file tree

Hide file tree

Showing 16 changed files with 263 additions and 147 deletions.
diff --git a/frontend/src/_components/_display/DiscordInviteCard.tsx b/frontend/src/_components/_display/DiscordInviteCard.tsx
@@ -1,3 +1,4 @@
+import { getFeatureFlags } from "@/_data/featureFlags";
 import Image from "next/image";
 import React from "react";
 
@@ -16,6 +17,8 @@ interface DiscordInviteCardProps {
   onlineCount,
   serverImageUrl,
 }) => {
+  const discordData = getFeatureFlags().heroDiscordUsersInfo;
+
   return (
     <div className="shadow-customDiscord bg-customBackgroundColor1 text-white p-6 rounded-lg max-w-[40em] mx-auto  lg:flex lg:justify-center lg:items-center lg:p-10  border border-indigo-500
 ">
@@ -38,14 +41,18 @@ interface DiscordInviteCardProps {
         <div className="flex-grow text-center lg:text-center">
           <h2 className="text-3xl font-bold mb-4 text-customGreen font-gugi">{serverName}</h2>
           <p className="text-gray-400 mb-6 text-sm lg:text-xl lg:mb-8">{description}</p>
+          {discordData ? 
           <div className="flex justify-center gap-6 mb-6">
+
             <div className="text-green-400">
               <strong>{onlineCount}</strong> Online
             </div>
             <div className="text-gray-300">
               <strong>{memberCount}</strong> Members
             </div>
+
           </div>
+     : null }       
           <a
             href={inviteUrl}
             target="_blank"

diff --git a/frontend/src/_components/_display/EthernetStatusEffect.tsx b/frontend/src/_components/_display/EthernetStatusEffect.tsx
@@ -10,7 +10,7 @@ const EthernetStatusDots: React.FC = () => {
         }}
       ></div>
       <div
-        className="w-2 h-2 bg-green-500 rounded-full"
+        className="w-2 h-2 bg-customGreen brightness-90 rounded-full"
         style={{
           animation: 'blinkGreen 0.5s infinite ease-in-out',
         }}

diff --git a/frontend/src/_components/_display/ImageOverlayWrapper.tsx b/frontend/src/_components/_display/ImageOverlayWrapper.tsx
@@ -9,7 +9,7 @@ interface ImageOverlayWrapperProps {
   alt: string;
   sectionDivider?: boolean;
   sectionDividerText?: string;
-  sectionDividerDarken?: 1 | 2 | 3 | 9;
+  sectionDividerDarken?: 1 | 2 | 3 | 5 | 9;
   blurAmount?: string; // Optional: Control blur level
   opacityAmount?: string; // Optional: Control opacity level
   paddingY?: string; // Optional: Control Y-axis padding

diff --git a/frontend/src/_components/_display/SectionDivider.tsx b/frontend/src/_components/_display/SectionDivider.tsx
@@ -8,21 +8,26 @@ interface SectionDividerProps {
 const SectionDivider = ({ title, darken }: SectionDividerProps) => {
   // Determine the background class based on the darken prop
   const bgClass = {
-    1: 'bg-customGreenDarken1',
-    2: 'bg-customGreenDarken2',
-    3: 'bg-customGreenDarken3',
-    9: 'bg-customGreenDarken9',
+    1: 'brightness-100',
+    2: 'brightness-95',
+    3: 'brightness-90',
+    5: 'brightness-75',
+    9: 'brightness-50',
+    // 1: 'bg-customGreenDarken1',
+    // 2: 'bg-customGreenDarken2',
+    // 3: 'bg-customGreenDarken3',
+    // 9: 'bg-customGreenDarken9',
   }[darken || 1]; // Default to bg-customGreenDarken1 if no darken value is provided
 
   return (
-    <div className="relative w-full ">
+    <div className="relative w-full">
       {/* Full-width line */}
-      <div className={`absolute left-0 w-full h-[2px] ${bgClass}`}></div>
+      <div className={`absolute left-0 w-full h-[2px] shadow shadow-black bg-customGreen  ${bgClass}`}></div>
 
       {title ? (
         <div className="relative mx-auto max-w-[40em]">
           {/* Outer border trapezoid */}
-          <div className={`clip-path-border-trapezoid ${bgClass} px-6 py-3`}>
+          <div className={`clip-path-border-trapezoid bg-customGreen ${bgClass} px-6 py-3`}>
             {/* Inner background trapezoid */}
             <div className="clip-path-inner-trapezoid bg-gray-900 px-6 py-2 m-[-8px] text-center break-words">
               <h2 className="pt-2 pb-3 text-xl font-semibold text-white">{title}</h2>

diff --git a/frontend/src/_components/_nav/Footer.tsx b/frontend/src/_components/_nav/Footer.tsx
@@ -1,29 +1,29 @@
 import React from "react";
-import { footerLinks } from "@/_data/footerLinks"; 
+import { footerLinks } from "@/_data/footerLinks";
 import SocialComponent from "./_footer_parts/SocialNavItem";
 import ServicesComponent from "./_footer_parts/ServicesNavItem";
 import SupportersComponent from "./_footer_parts/Supporters";
 import SectionDivider from "../_display/SectionDivider";
+import { getFeatureFlags } from "@/_data/featureFlags";
 
 const Footer: React.FC = () => {
+  const servies = getFeatureFlags().footerServices;
+
   return (
     <footer className="border-white border-1  text-white">
-      <SectionDivider/>
+      <SectionDivider />
       <div className="pt-12 container mx-auto px-4 flex flex-col md:flex-row md:flex-wrap justify-between items-start">
-
-        <ServicesComponent services={footerLinks.services} />
-
-        <SupportersComponent supporters={footerLinks.topSupporters} />
-
+        {servies ? <ServicesComponent services={footerLinks.services} /> : null}
+        <SupportersComponent supporterData={footerLinks.topSupporters} />
+
         <SocialComponent links={footerLinks.socialLinks} />
-
       </div>
 
       <footer className="p-4 bg-gradient-green1 text-center">
-      © {new Date().getFullYear()} AI Arena. All rights reserved.
+        © {new Date().getFullYear()} AI Arena. All rights reserved.
       </footer>
     </footer>
   );
 };
 
-export default Footer;
+export default Footer;
diff --git a/frontend/src/_components/_nav/Navbar.tsx b/frontend/src/_components/_nav/Navbar.tsx
@@ -8,62 +8,65 @@ import MobileNavItem from "./_nav_parts/MobileNavItem";
 import AuthNavBar from "./_nav_parts/AuthNavbar";
 import { getPublicPrefix } from "@/_lib/getPublicPrefix";
 import { usePathname } from "next/navigation";
-
+import { getFeatureFlags } from "@/_data/featureFlags";
+import { useUserContext } from "../providers/UserProvider";
 
 const navLinks = [
   {
     title: "Home",
     path: `${getPublicPrefix()}/`,
     showLoggedIn: true,
     showLoggedOut: true,
+    featureFlag: null,
   },
   {
     title: "Wiki",
     path: "https://aiarena.net/wiki/",
     showLoggedIn: true,
     showLoggedOut: true,
+    featureFlag: null,
   },
   {
     title: "Competitions",
     path: `${getPublicPrefix()}/competitions/`,
     showLoggedIn: true,
     showLoggedOut: true,
+    featureFlag: null,
   },
   {
     title: "About us",
     path: `${getPublicPrefix()}/about/`,
     showLoggedIn: true,
     showLoggedOut: true,
+    featureFlag: null,
   },
   {
     title: "Status",
     path: `${getPublicPrefix()}/status/`,
     showLoggedIn: true,
     showLoggedOut: true,
+    featureFlag: getFeatureFlags().statusPage,
   },
   {
     title: "Bots",
     path: `${getPublicPrefix()}/bots/`,
     showLoggedIn: true,
     showLoggedOut: true,
+    featureFlag: getFeatureFlags().botsPage,
   },
   {
     title: "Profile",
     path: `${getPublicPrefix()}/profile/`,
     showLoggedIn: true,
     showLoggedOut: false,
+    featureFlag: null,
   },
   {
     title: "Examples",
     path: `${getPublicPrefix()}/examples/`,
     showLoggedIn: true,
     showLoggedOut: true,
-  },
-  {
-    title: "ToDo",
-    path: `${getPublicPrefix()}/todo/`,
-    showLoggedIn: true,
-    showLoggedOut: true,
+    featureFlag: getFeatureFlags().examples,
   },
 ];
 
@@ -74,7 +77,7 @@ const navbarTitle = {
 function Navbar() {
   const [navbar, setNavbar] = useState(false);
   const router = usePathname();
-
+  const { user } = useUserContext();
 
   const handleMenu = () => {
     if (navbar === true) {
@@ -114,7 +117,10 @@ function Navbar() {
     <>
       <nav className="w-full bg-neutral-900 px-2 text-white dark:bg-gray-900 font-sans sticky top-0 z-50">
         <div className="flex justify-between md:p-3 md:flex ">
-          <Link href={`${getPublicPrefix()}`} className="flex justify-between items-center">
+          <Link
+            href={`${getPublicPrefix()}`}
+            className="flex justify-between items-center"
+          >
             <Image
               className="pr-2 invert h-[auto] w-12"
               src={`${getPublicPrefix()}/assets_logo/ai-arena-logo.svg`}
@@ -129,7 +135,10 @@ function Navbar() {
 
           {/* Phone */}
           <div className="md:hidden py-4">
-            <button className="py-3 rounded-md pr-4" onClick={() => handleMenu()}>
+            <button
+              className="py-3 rounded-md pr-4"
+              onClick={() => handleMenu()}
+            >
               {navbar ? (
                 <div>
                   <Image
@@ -156,18 +165,29 @@ function Navbar() {
             {/* Container for Nav Items */}
             <div className="flex flex-col">
               <ul className="flex flex-wrap">
-                {navLinks.map((link, index) => (
-              <li
-              key={index}
-              className={`pb-2`}
-            >
-                    <NavItem href={link.path} onClick={handleWindowResize} className={`${
-                router === `${link.path}` ? "border-b-2 border-customGreen" : ""
-              }`}>
-                      {link.title}
-                    </NavItem>
-                  </li>
-                ))}
+                {navLinks
+                  .filter((link) => {
+                    // Filter logic: featureFlag is not explicitly false and user visibility is respected
+                    if (link.featureFlag === false) return false;
+                    if (user && link.showLoggedIn) return true;
+                    if (!user && link.showLoggedOut) return true;
+                    return false;
+                  })
+                  .map((link, index) => (
+                    <li key={index} className={`pb-2`}>
+                      <NavItem
+                        href={link.path}
+                        onClick={handleWindowResize}
+                        className={`${
+                          router === `${link.path}`
+                            ? "border-b-2 border-customGreen"
+                            : ""
+                        }`}
+                      >
+                        {link.title}
+                      </NavItem>
+                    </li>
+                  ))}
               </ul>
             </div>
 
@@ -179,34 +199,44 @@ function Navbar() {
         </div>
         {navbar === true ? (
           <div className={`md:block ${navbar ? "block" : "hidden"}`}>
-          <ul
-           className="md:h-auto md:flex mt-8 h-screen max-h-[calc(100vh-7rem)] overflow-y-auto"
-          >
-            {navLinks.map((link, index) => (
-              <li
-                key={index}
-                className={`${
-                  router === `${link.path}` ? "border-b-2 border-t-2 border-customGreen" : ""
-                }`}
-              >
-                <MobileNavItem
-                  key={index}
-                  href={link.path}
-                  onClick={handleMobileNavItemClick}
-                  className={
-                    router === `${link.path}` ? "border-b-2 border-t-2 border-customGreen" : ""
-                  }
-                >
-                  {link.title}
-                </MobileNavItem>
+            <ul className="md:h-auto md:flex mt-8 h-screen max-h-[calc(100vh-7rem)] overflow-y-auto">
+              {navLinks
+                .filter((link) => {
+                  // Filter logic: featureFlag is not explicitly false and user visibility is respected
+                  if (link.featureFlag === false) return false;
+                  if (user && link.showLoggedIn) return true;
+                  if (!user && link.showLoggedOut) return true;
+                  return false;
+                })
+                .map((link, index) => (
+                  <li
+                    key={index}
+                    className={`${
+                      router === `${link.path}`
+                        ? "border-b-2 border-t-2 border-customGreen"
+                        : ""
+                    }`}
+                  >
+                    <MobileNavItem
+                      key={index}
+                      href={link.path}
+                      onClick={handleMobileNavItemClick}
+                      className={
+                        router === `${link.path}`
+                          ? "border-b-2 border-t-2 border-customGreen"
+                          : ""
+                      }
+                    >
+                      {link.title}
+                    </MobileNavItem>
+                  </li>
+                ))}
+
+              <li className="flex justify-center pb-10">
+                <AuthNavBar />
               </li>
-            ))}
-
-            <li className="flex justify-center pb-10">
-              <AuthNavBar />
-            </li>
-          </ul>
-        </div>
+            </ul>
+          </div>
         ) : null}
       </nav>
     </>

diff --git a/frontend/src/_components/_nav/_footer_parts/Supporters.tsx b/frontend/src/_components/_nav/_footer_parts/Supporters.tsx
@@ -4,21 +4,30 @@ import Image from "next/image";
 import { Supporters } from "@/_data/footerLinks";
 import WrappedTitle from "@/_components/_display/WrappedTitle";
 import { getPublicPrefix } from "@/_lib/getPublicPrefix";
+import { getFeatureFlags } from "@/_data/featureFlags";
 
 interface SupportersComponentProps {
-  supporters: Supporters[];
+  supporterData: Supporters[];
 }
 
 const SupportersComponent: React.FC<SupportersComponentProps> = ({
-  supporters,
+  supporterData,
 }) => {
+
+  const supporters = getFeatureFlags().supporters
+
   return (
     <div className="mb-16 px-8 text-center flex-1 mx-auto">
      <WrappedTitle title="Funded by You"/>
-      <p className="text-lg mb-6">{supporters[0].name}</p>
+
+     {supporters? 
+     <>
+      <p className="text-lg mb-6">{supporterData[0].name}</p>
       <p className="text-lg mb-6">
         Thank you for your support! <br/> Your contributions help us keep going.
       </p>
+      </>
+      : null}
       <div className="flex justify-center">
         <Link href="https://docs.google.com/spreadsheets/d/1wm_oZYPZv6t8urGtOCJ1yFtYjq-9WBixJQqaXQ7kiNc/edit?gid=1303247903#gid=1303247903">
           <div className="flex items-center">