Revert "Revert "Revert "Chatbot css fix (#2686)"""

This reverts commit 10f6336.

apps/backoffice-v2/src/domains/chat/chatbot-opengpt.tsx

@@ -1,6 +1,6 @@
-import { getClient, Webchat, WebchatProvider } from '@botpress/webchat';
+import { Webchat, WebchatProvider, getClient } from '@botpress/webchat';
 import { buildTheme } from '@botpress/webchat-generator';
-import { useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useAuthenticatedUserQuery } from '../../domains/auth/hooks/queries/useAuthenticatedUserQuery/useAuthenticatedUserQuery';
 
 // declare const themeNames: readonly ["prism", "galaxy", "dusk", "eggplant", "dawn", "midnight"];
@@ -11,14 +11,9 @@ const { theme, style } = buildTheme({
 
 const clientId = '8f29c89d-ec0e-494d-b18d-6c3590b28be6';
 
-const Chatbot = ({
-  isWebchatOpen,
-  toggleIsWebchatOpen,
-}: {
-  isWebchatOpen: boolean;
-  toggleIsWebchatOpen: () => void;
-}) => {
+const Chatbot = () => {
   const client = getClient({ clientId });
+  const [isWebchatOpen, setIsWebchatOpen] = useState(false);
   const { data: session } = useAuthenticatedUserQuery();
 
   useEffect(() => {
@@ -34,6 +29,10 @@ const Chatbot = ({
     }
   }, [session, client]);
 
+  const toggleWebchat = () => {
+    setIsWebchatOpen(prevState => !prevState);
+  };
+
   return (
     <div>
       <style>{style}</style>
@@ -62,10 +61,9 @@ const Chatbot = ({
             link: 'https://ballerine.com/terms',
           },
         }}
-        closeWindow={toggleIsWebchatOpen}
       >
         <button
-          onClick={toggleIsWebchatOpen}
+          onClick={toggleWebchat}
           style={{
             width: '60px',
             height: '60px',

apps/backoffice-v2/src/lib/blocks/components/CaseCallToActionLegacy/CaseCallToActionLegacy.tsx

@@ -69,6 +69,9 @@ export const CaseCallToActionLegacy: FunctionComponent<ICaseCallToActionLegacyPr
             size="wide"
             variant="warning"
             disabled={data?.disabled || isDisabled}
+            className={ctw({
+              '!bg-warning': !data?.disabled,
+            })}
           >
             {value}
           </MotionButton>
@@ -132,7 +135,7 @@ export const CaseCallToActionLegacy: FunctionComponent<ICaseCallToActionLegacyPr
           <DialogFooter>
             <DialogClose asChild>
               <Button
-                className={ctw(`gap-x-2`, {
+                className={ctw(`gap-x-2 !bg-foreground`, {
                   loading: isLoadingRevisionCase,
                 })}
                 disabled={isLoadingRevisionCase}

apps/backoffice-v2/src/lib/blocks/components/KycBlock/hooks/useKycBlock/useKycBlock.tsx

@@ -309,6 +309,9 @@ export const useKycBlock = ({
               disabled={isDisabled}
               size={'wide'}
               variant={'success'}
+              className={ctw({
+                '!bg-success': !isDisabled
+              })}
             >
               Approve
             </MotionButton>

apps/backoffice-v2/src/pages/Entities/components/CaseCreation/components/CaseCreationForm/components/SubmitSection/SubmitSection.tsx

@@ -20,7 +20,7 @@ export const SubmitSection = ({ uiSchema }: SubmitButtonProps) => {
         <Label htmlFor="add_more_switch">Add more</Label>
       </div>
       {!norender && (
-        <Button type="submit" disabled={disabled}>
+        <Button className={'!bg-foreground'} type="submit" disabled={disabled}>
           Add Case
         </Button>
       )}

apps/backoffice-v2/src/pages/Root/Root.page.tsx

@@ -1,12 +1,10 @@
-import React, { FunctionComponent, lazy, useState } from 'react';
+import React, { FunctionComponent, lazy } from 'react';
 import { Outlet } from 'react-router-dom';
 import { Providers } from '../../common/components/templates/Providers/Providers';
 import { ServerDownLayout } from './ServerDown.layout';
 import { useCustomerQuery } from '@/domains/customer/hook/queries/useCustomerQuery/useCustomerQuery';
 import { FullScreenLoader } from '@/common/components/molecules/FullScreenLoader/FullScreenLoader';
 import Chatbot from '@/domains/chat/chatbot-opengpt';
-import { ctw } from '@/common/utils/ctw/ctw';
-import { RenderChildrenInIFrame } from '@/common/components/organisms/RenderChildrenInIFrame/RenderChildrenInIFrame';
 
 const ReactQueryDevtools = lazy(() =>
   process.env.NODE_ENV !== 'production'
@@ -18,10 +16,6 @@ const ReactQueryDevtools = lazy(() =>
 
 const ChatbotLayout: FunctionComponent = () => {
   const { data: customer, isLoading: isLoadingCustomer } = useCustomerQuery();
-  const [isWebchatOpen, setIsWebchatOpen] = useState(false);
-  const toggleIsWebchatOpen = () => {
-    setIsWebchatOpen(prevState => !prevState);
-  };
 
   if (isLoadingCustomer) {
     return <FullScreenLoader />;
@@ -31,16 +25,7 @@ const ChatbotLayout: FunctionComponent = () => {
     return null;
   }
 
-  return (
-    <RenderChildrenInIFrame
-      className={ctw('fixed bottom-right-0', {
-        'h-[700px] w-[400px]': isWebchatOpen,
-        'd-[80px]': !isWebchatOpen,
-      })}
-    >
-      <Chatbot isWebchatOpen={isWebchatOpen} toggleIsWebchatOpen={toggleIsWebchatOpen} />
-    </RenderChildrenInIFrame>
-  );
+  return <Chatbot />;
 };
 
 export const Root: FunctionComponent = () => {

apps/backoffice-v2/src/pages/Root/ServerDown.layout.tsx

@@ -1,14 +1,14 @@
+import { FunctionComponent } from 'react';
 import { useHealthQuery } from './hooks/useHealthQuery/useHealthQuery';
+import { Outlet } from 'react-router-dom';
 import { ErrorAlert } from '../../common/components/atoms/ErrorAlert/ErrorAlert';
 import { FullScreenLoader } from '../../common/components/molecules/FullScreenLoader/FullScreenLoader';
-import { FunctionComponentWithChildren } from '@ballerine/ui';
 
-export const ServerDownLayout: FunctionComponentWithChildren = ({ children }) => {
+export const ServerDownLayout: FunctionComponent = () => {
   const { isSuccess, isLoading } = useHealthQuery();
 
   if (isLoading) return <FullScreenLoader />;
-
-  if (isSuccess) return children;
+  if (isSuccess) return <Outlet />;
 
   return (
     <main className={`flex h-full flex-col items-center`}>