feat: implemented dynamic powered by logo & added white poweredby

apps/kyb-app/src/common/providers/ThemeProvider/ThemeProvider.tsx

@@ -3,7 +3,7 @@ import { ITheme } from '@/common/types/settings';
 import { useUISchemasQuery } from '@/hooks/useUISchemasQuery';
 import { transformThemeToInlineStyles } from '@/utils/transform-theme-to-inline-styles';
 import { useLayoutEffect, useMemo } from 'react';
-import defaultTheme from '../../../../theme-dark.json';
+import defaultTheme from '../../../../theme.json';
 
 interface Props {
   children: React.ReactNode | React.ReactNode[];

apps/kyb-app/src/components/layouts/AppShell/Sidebar.tsx

@@ -6,7 +6,10 @@ interface Props {
 
 export const Sidebar = ({ children }: Props) => {
   return (
-    <div className="bg-primary text-primary-foreground col-span-2 flex h-screen w-[24%] max-w-[418px] flex-col px-14 pb-4 pt-14">
+    <div
+      className="bg-primary text-primary-foreground col-span-2 flex h-screen w-[24%] max-w-[418px] flex-col px-14 pb-4 pt-14"
+      id="sidebar"
+    >
       {children}
     </div>
   );

apps/kyb-app/src/components/molecules/PoweredByLogo/PoweredByLogo.tsx

@@ -0,0 +1,41 @@
+import { getRGBColorFromElement, isColorDark } from '@/components/molecules/PoweredByLogo/helpers';
+import { FunctionComponent, useEffect, useState } from 'react';
+
+interface IPoweredByLogoProps {
+  className?: string;
+  sidebarRootId: string;
+}
+
+export const PoweredByLogo: FunctionComponent<IPoweredByLogoProps> = ({
+  className,
+  sidebarRootId,
+}) => {
+  const [sidebarElement, setSidebarElement] = useState<HTMLElement | null>(null);
+  const [logoSrc, setLogoSrc] = useState<string | null>(null);
+
+  useEffect(() => {
+    setSidebarElement(document.getElementById(sidebarRootId));
+  }, [sidebarRootId]);
+
+  useEffect(() => {
+    if (!sidebarElement) return;
+
+    const rgb = getRGBColorFromElement(sidebarElement);
+
+    if (rgb) {
+      const [r, g, b] = rgb as [number, number, number];
+
+      const isDark = isColorDark(r, g, b);
+
+      setLogoSrc(isDark ? '/poweredby-white.svg' : '/poweredby.svg');
+    } else {
+      console.warn('Could not detect color. Default powered by logo will be used.');
+
+      setLogoSrc('/poweredby.svg');
+    }
+  }, [sidebarElement]);
+
+  if (!logoSrc) return null;
+
+  return <img src={logoSrc} className={className} />;
+};

apps/kyb-app/src/components/molecules/PoweredByLogo/helpers.ts

@@ -0,0 +1,29 @@
+export const getLuminance = (r: number, g: number, b: number) => {
+  const a = [r, g, b].map(v => {
+    v /= 255;
+
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+
+  return a[0]! * 0.2126 + a[1]! * 0.7152 + a[2]! * 0.0722;
+};
+
+export const getRGBColorFromElement = (element: HTMLElement) => {
+  const style = window.getComputedStyle(element);
+  const bgColor = style.background;
+
+  // Regex to extract RGB values
+  const rgbValues = bgColor.match(/\d+/g);
+
+  if (rgbValues && rgbValues.length >= 3) {
+    return rgbValues.map(Number); // Convert strings to numbers
+  }
+
+  return null;
+};
+
+export const isColorDark = (r: number, g: number, b: number) => {
+  const luminance = getLuminance(r, g, b);
+
+  return luminance < 0.5;
+};

apps/kyb-app/src/components/molecules/PoweredByLogo/index.ts

@@ -0,0 +1 @@
+export * from './PoweredByLogo';

apps/kyb-app/src/pages/CollectionFlow/CollectionFlow.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { StepperProgress } from '@/common/components/atoms/StepperProgress';
 import { ProgressBar } from '@/common/components/molecules/ProgressBar';
 import { AppShell } from '@/components/layouts/AppShell';
+import { PoweredByLogo } from '@/components/molecules/PoweredByLogo';
 import { DynamicUI, State } from '@/components/organisms/DynamicUI';
 import { usePageErrors } from '@/components/organisms/DynamicUI/Page/hooks/usePageErrors';
 import { useStateManagerContext } from '@/components/organisms/DynamicUI/StateManager/components/StateProvider';
@@ -102,6 +103,7 @@ export const CollectionFlow = withSessionProtected(() => {
       filteredNonEmptyErrors?.[0]?.stateName ||
       context?.flowConfig?.appState ||
       elements?.at(0)?.stateName;
+
     if (!appState) return null;
 
     return {
@@ -131,6 +133,7 @@ export const CollectionFlow = withSessionProtected(() => {
   }, [customer?.logoImageUri]);
 
   if (initialContext?.flowConfig?.appState === 'approved') return <Approved />;
+
   if (initialContext?.flowConfig?.appState == 'rejected') return <Rejected />;
 
   return definition && context ? (
@@ -197,7 +200,8 @@ export const CollectionFlow = withSessionProtected(() => {
                                       }
                                     </div>
                                   )}
-                                  <img src={'/poweredby.svg'} className="mt-6" />
+                                  {/* <img src={'/poweredby.svg'} className="mt-6" /> */}
+                                  <PoweredByLogo className="mt-8" sidebarRootId="sidebar" />
                                 </div>
                               </div>
                             </div>