From ed1fd17c0f7d5f5bdf568a8c4645cb1062757ec8 Mon Sep 17 00:00:00 2001
From: Shane <66246046+shanegrouber@users.noreply.github.com>
Date: Sun, 8 Dec 2024 14:04:56 +0200
Subject: [PATCH 1/2] style(components): enhance button state styling for
 better UX

- Update button classes to include hover and enabled states
- Remove unused CSS rules to streamline styles

(your buttons now have more states than a soap opera character)
---
 .../backoffice-v2/src/domains/notes/Notes.tsx |  2 +-
 apps/backoffice-v2/src/index.css              |  7 ++-----
 .../CallToActionLegacy/CallToActionLegacy.tsx |  6 +++++-
 .../EditableDetails/EditableDetails.tsx       |  2 +-
 .../useDirectorsBlocks/useDirectorsBlocks.tsx |  1 +
 .../useDocumentBlocks/useDocumentBlocks.tsx   |  1 +
 .../DefaultActions/DefaultActions.tsx         |  8 +++++++-
 .../src/pages/Root/Root.page.tsx              | 19 +++++--------------
 .../src/pages/SignIn/SignIn.page.tsx          |  5 ++++-
 9 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/apps/backoffice-v2/src/domains/notes/Notes.tsx b/apps/backoffice-v2/src/domains/notes/Notes.tsx
index 951d57c617..9c0f0060fe 100644
--- a/apps/backoffice-v2/src/domains/notes/Notes.tsx
+++ b/apps/backoffice-v2/src/domains/notes/Notes.tsx
@@ -88,7 +88,7 @@ export const Notes = ({
                 size={`sm`}
                 aria-disabled={isLoading}
                 className={
-                  'mt-3 h-5 self-end p-4 text-sm font-medium aria-disabled:pointer-events-none aria-disabled:opacity-50'
+                  'mt-3 h-5 self-end p-4 text-sm font-medium enabled:bg-slate-800 enabled:hover:bg-slate-800/90 aria-disabled:pointer-events-none aria-disabled:opacity-50'
                 }
               >
                 <Loader2 className={ctw('me-2 h-4 w-4 animate-spin', { hidden: !isLoading })} />
diff --git a/apps/backoffice-v2/src/index.css b/apps/backoffice-v2/src/index.css
index 4965a08679..1e85734aa2 100644
--- a/apps/backoffice-v2/src/index.css
+++ b/apps/backoffice-v2/src/index.css
@@ -318,10 +318,7 @@
   }
 }
 
-a.bpComposerPoweredBy {
+a.bpComposerPoweredBy,
+div.bpHeaderExpandedContentDescriptionItemsPoweredBy {
   display: none !important;
 }
-
-button.bpModalDialogNewConversationButton {
-  background-color: var(--bpPrimary-500) !important;
-}
diff --git a/apps/backoffice-v2/src/lib/blocks/components/CallToActionLegacy/CallToActionLegacy.tsx b/apps/backoffice-v2/src/lib/blocks/components/CallToActionLegacy/CallToActionLegacy.tsx
index c62acd5d0a..e08c9172e8 100644
--- a/apps/backoffice-v2/src/lib/blocks/components/CallToActionLegacy/CallToActionLegacy.tsx
+++ b/apps/backoffice-v2/src/lib/blocks/components/CallToActionLegacy/CallToActionLegacy.tsx
@@ -189,7 +189,10 @@ export const CallToActionLegacy: FunctionComponent<ICallToActionLegacyProps> = (
             size="wide"
             variant="warning"
             disabled={disabled}
-            className={ctw({ 'flex gap-2': isReuploadResetable })}
+            className={ctw({
+              'flex gap-2': isReuploadResetable,
+              'enabled:bg-warning enabled:hover:bg-warning/90': !isReuploadResetable,
+            })}
           >
             {value.text}
             {isReuploadResetable && (
@@ -255,6 +258,7 @@ export const CallToActionLegacy: FunctionComponent<ICallToActionLegacyProps> = (
           <Button
             className={ctw(`gap-x-2`, {
               loading: isLoadingReuploadNeeded,
+              'enabled:bg-slate-800 enabled:hover:bg-slate-800/90': !isLoadingReuploadNeeded,
             })}
             onClick={onReuploadNeeded({
               workflowId: workflow?.id,
diff --git a/apps/backoffice-v2/src/lib/blocks/components/EditableDetails/EditableDetails.tsx b/apps/backoffice-v2/src/lib/blocks/components/EditableDetails/EditableDetails.tsx
index 2c65634975..61a4627ee2 100644
--- a/apps/backoffice-v2/src/lib/blocks/components/EditableDetails/EditableDetails.tsx
+++ b/apps/backoffice-v2/src/lib/blocks/components/EditableDetails/EditableDetails.tsx
@@ -431,7 +431,7 @@ export const EditableDetails: FunctionComponent<IEditableDetails> = ({
           {data?.some(({ isEditable }) => isEditable) && (
             <Button
               type="submit"
-              className={`ms-auto mt-3 aria-disabled:pointer-events-none aria-disabled:opacity-50`}
+              className={`ms-auto mt-3 enabled:bg-slate-800 enabled:hover:bg-slate-800/90 aria-disabled:pointer-events-none aria-disabled:opacity-50`}
               aria-disabled={isSaveDisabled}
             >
               Save
diff --git a/apps/backoffice-v2/src/lib/blocks/hooks/useDirectorsBlocks/useDirectorsBlocks.tsx b/apps/backoffice-v2/src/lib/blocks/hooks/useDirectorsBlocks/useDirectorsBlocks.tsx
index 70aad3cbd4..0589ea4767 100644
--- a/apps/backoffice-v2/src/lib/blocks/hooks/useDirectorsBlocks/useDirectorsBlocks.tsx
+++ b/apps/backoffice-v2/src/lib/blocks/hooks/useDirectorsBlocks/useDirectorsBlocks.tsx
@@ -253,6 +253,7 @@ export const useDirectorsBlocks = ({
                           disabled={isApproveDisabled}
                           size={'wide'}
                           variant={'success'}
+                          className={'enabled:bg-success enabled:hover:bg-success/90'}
                         >
                           Approve
                         </MotionButton>
diff --git a/apps/backoffice-v2/src/lib/blocks/hooks/useDocumentBlocks/useDocumentBlocks.tsx b/apps/backoffice-v2/src/lib/blocks/hooks/useDocumentBlocks/useDocumentBlocks.tsx
index 1956caf98e..4117504dd1 100644
--- a/apps/backoffice-v2/src/lib/blocks/hooks/useDocumentBlocks/useDocumentBlocks.tsx
+++ b/apps/backoffice-v2/src/lib/blocks/hooks/useDocumentBlocks/useDocumentBlocks.tsx
@@ -272,6 +272,7 @@ export const useDocumentBlocks = ({
                     disabled={!canApprove}
                     size={'wide'}
                     variant={'success'}
+                    className={'enabled:bg-success enabled:hover:bg-success/90'}
                   >
                     Approve
                   </MotionButton>
diff --git a/apps/backoffice-v2/src/pages/Entity/components/Case/actions-variants/DefaultActions/DefaultActions.tsx b/apps/backoffice-v2/src/pages/Entity/components/Case/actions-variants/DefaultActions/DefaultActions.tsx
index 9dad622479..179d514972 100644
--- a/apps/backoffice-v2/src/pages/Entity/components/Case/actions-variants/DefaultActions/DefaultActions.tsx
+++ b/apps/backoffice-v2/src/pages/Entity/components/Case/actions-variants/DefaultActions/DefaultActions.tsx
@@ -35,7 +35,11 @@ export const DefaultActions = () => {
             size="md"
             variant="warning"
             disabled={isLoadingActions || !canRevision}
-            className={ctw({ loading: debouncedIsLoadingRejectCase }, 'whitespace-nowrap')}
+            className={ctw(
+              { loading: debouncedIsLoadingRejectCase },
+              'whitespace-nowrap',
+              'enabled:bg-warning enabled:hover:bg-warning/90',
+            )}
           >
             Ask for all re-uploads {canRevision && `(${documentsToReviseCount})`}
           </Button>
@@ -59,6 +63,8 @@ export const DefaultActions = () => {
               <Button
                 className={ctw(`gap-x-2`, {
                   loading: debouncedIsLoadingRevisionCase,
+                  'enabled:bg-slate-800 enabled:hover:bg-slate-800/90':
+                    !debouncedIsLoadingRevisionCase,
                 })}
                 disabled={isLoadingActions || !canRevision}
                 onClick={onMutateRevisionCase}
diff --git a/apps/backoffice-v2/src/pages/Root/Root.page.tsx b/apps/backoffice-v2/src/pages/Root/Root.page.tsx
index 1291224bc8..9fb3970b80 100644
--- a/apps/backoffice-v2/src/pages/Root/Root.page.tsx
+++ b/apps/backoffice-v2/src/pages/Root/Root.page.tsx
@@ -5,8 +5,6 @@ import { ServerDownLayout } from './ServerDown.layout';
 import { useCustomerQuery } from '@/domains/customer/hooks/queries/useCustomerQuery/useCustomerQuery';
 import { FullScreenLoader } from '@/common/components/molecules/FullScreenLoader/FullScreenLoader';
 import Chatbot from '@/domains/chat/chatbot-opengpt';
-import { RenderChildrenInIFrame } from '@/common/components/organisms/RenderChildrenInIFrame/RenderChildrenInIFrame';
-import { ctw } from '@/common/utils/ctw/ctw';
 import { env } from '@/common/env/env';
 
 const ReactQueryDevtools = lazy(() =>
@@ -35,18 +33,11 @@ const ChatbotLayout: FunctionComponent = () => {
   const botpressClientId = customer?.features?.chatbot?.clientId || env.VITE_BOTPRESS_CLIENT_ID;
 
   return (
-    <RenderChildrenInIFrame
-      className={ctw('fixed bottom-right-0', {
-        'h-[700px] w-[400px]': isWebchatOpen,
-        'd-[80px]': !isWebchatOpen,
-      })}
-    >
-      <Chatbot
-        isWebchatOpen={isWebchatOpen}
-        toggleIsWebchatOpen={toggleIsWebchatOpen}
-        botpressClientId={botpressClientId}
-      />
-    </RenderChildrenInIFrame>
+    <Chatbot
+      isWebchatOpen={isWebchatOpen}
+      toggleIsWebchatOpen={toggleIsWebchatOpen}
+      botpressClientId={botpressClientId}
+    />
   );
 };
 
diff --git a/apps/backoffice-v2/src/pages/SignIn/SignIn.page.tsx b/apps/backoffice-v2/src/pages/SignIn/SignIn.page.tsx
index 2390fd8e0b..109ae17ae5 100644
--- a/apps/backoffice-v2/src/pages/SignIn/SignIn.page.tsx
+++ b/apps/backoffice-v2/src/pages/SignIn/SignIn.page.tsx
@@ -101,7 +101,10 @@ export const SignIn: FunctionComponent = () => {
                 )}
               />
               <div className={`flex justify-end`}>
-                <Button type="submit" className={`ms-auto mt-3`}>
+                <Button
+                  type="submit"
+                  className={'ms-auto mt-3 enabled:bg-slate-800 enabled:hover:bg-slate-800/90'}
+                >
                   Sign In
                 </Button>
               </div>

From c54dc14bfb310285dbfc37d7e6e46c03ffe1887b Mon Sep 17 00:00:00 2001
From: Shane <66246046+shanegrouber@users.noreply.github.com>
Date: Mon, 9 Dec 2024 15:19:46 +0200
Subject: [PATCH 2/2] fix(buttons): update background color for button
 components

- Change button styles from slate to primary background and hover colors
- Ensure consistency across different components for better UX

(your color choices are so dark, they could be the backdrop for a horror movie)
---
 apps/backoffice-v2/src/domains/notes/Notes.tsx  |  2 +-
 .../CallToActionLegacy/CallToActionLegacy.tsx   | 17 +++++++++--------
 .../EditableDetails/EditableDetails.tsx         |  2 +-
 .../DefaultActions/DefaultActions.tsx           | 10 +++++-----
 .../src/pages/SignIn/SignIn.page.tsx            |  2 +-
 5 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/apps/backoffice-v2/src/domains/notes/Notes.tsx b/apps/backoffice-v2/src/domains/notes/Notes.tsx
index 9c0f0060fe..68822d8384 100644
--- a/apps/backoffice-v2/src/domains/notes/Notes.tsx
+++ b/apps/backoffice-v2/src/domains/notes/Notes.tsx
@@ -88,7 +88,7 @@ export const Notes = ({
                 size={`sm`}
                 aria-disabled={isLoading}
                 className={
-                  'mt-3 h-5 self-end p-4 text-sm font-medium enabled:bg-slate-800 enabled:hover:bg-slate-800/90 aria-disabled:pointer-events-none aria-disabled:opacity-50'
+                  'mt-3 h-5 self-end p-4 text-sm font-medium enabled:bg-primary enabled:hover:bg-primary/90 aria-disabled:pointer-events-none aria-disabled:opacity-50'
                 }
               >
                 <Loader2 className={ctw('me-2 h-4 w-4 animate-spin', { hidden: !isLoading })} />
diff --git a/apps/backoffice-v2/src/lib/blocks/components/CallToActionLegacy/CallToActionLegacy.tsx b/apps/backoffice-v2/src/lib/blocks/components/CallToActionLegacy/CallToActionLegacy.tsx
index e08c9172e8..cd4da51747 100644
--- a/apps/backoffice-v2/src/lib/blocks/components/CallToActionLegacy/CallToActionLegacy.tsx
+++ b/apps/backoffice-v2/src/lib/blocks/components/CallToActionLegacy/CallToActionLegacy.tsx
@@ -189,10 +189,10 @@ export const CallToActionLegacy: FunctionComponent<ICallToActionLegacyProps> = (
             size="wide"
             variant="warning"
             disabled={disabled}
-            className={ctw({
-              'flex gap-2': isReuploadResetable,
-              'enabled:bg-warning enabled:hover:bg-warning/90': !isReuploadResetable,
-            })}
+            className={ctw(
+              { 'flex gap-2': isReuploadResetable },
+              'enabled:bg-warning enabled:hover:bg-warning/90',
+            )}
           >
             {value.text}
             {isReuploadResetable && (
@@ -256,10 +256,11 @@ export const CallToActionLegacy: FunctionComponent<ICallToActionLegacyProps> = (
         }
         close={
           <Button
-            className={ctw(`gap-x-2`, {
-              loading: isLoadingReuploadNeeded,
-              'enabled:bg-slate-800 enabled:hover:bg-slate-800/90': !isLoadingReuploadNeeded,
-            })}
+            className={ctw(
+              'gap-x-2',
+              { loading: isLoadingReuploadNeeded },
+              'enabled:bg-primary enabled:hover:bg-primary/90',
+            )}
             onClick={onReuploadNeeded({
               workflowId: workflow?.id,
               documentId: id,
diff --git a/apps/backoffice-v2/src/lib/blocks/components/EditableDetails/EditableDetails.tsx b/apps/backoffice-v2/src/lib/blocks/components/EditableDetails/EditableDetails.tsx
index 61a4627ee2..685a90058c 100644
--- a/apps/backoffice-v2/src/lib/blocks/components/EditableDetails/EditableDetails.tsx
+++ b/apps/backoffice-v2/src/lib/blocks/components/EditableDetails/EditableDetails.tsx
@@ -431,7 +431,7 @@ export const EditableDetails: FunctionComponent<IEditableDetails> = ({
           {data?.some(({ isEditable }) => isEditable) && (
             <Button
               type="submit"
-              className={`ms-auto mt-3 enabled:bg-slate-800 enabled:hover:bg-slate-800/90 aria-disabled:pointer-events-none aria-disabled:opacity-50`}
+              className={`ms-auto mt-3 enabled:bg-primary enabled:hover:bg-primary/90 aria-disabled:pointer-events-none aria-disabled:opacity-50`}
               aria-disabled={isSaveDisabled}
             >
               Save
diff --git a/apps/backoffice-v2/src/pages/Entity/components/Case/actions-variants/DefaultActions/DefaultActions.tsx b/apps/backoffice-v2/src/pages/Entity/components/Case/actions-variants/DefaultActions/DefaultActions.tsx
index 179d514972..581b4e581b 100644
--- a/apps/backoffice-v2/src/pages/Entity/components/Case/actions-variants/DefaultActions/DefaultActions.tsx
+++ b/apps/backoffice-v2/src/pages/Entity/components/Case/actions-variants/DefaultActions/DefaultActions.tsx
@@ -61,11 +61,11 @@ export const DefaultActions = () => {
           <DialogFooter>
             <DialogClose asChild>
               <Button
-                className={ctw(`gap-x-2`, {
-                  loading: debouncedIsLoadingRevisionCase,
-                  'enabled:bg-slate-800 enabled:hover:bg-slate-800/90':
-                    !debouncedIsLoadingRevisionCase,
-                })}
+                className={ctw(
+                  'gap-x-2',
+                  { loading: debouncedIsLoadingRevisionCase },
+                  'enabled:bg-primary enabled:hover:bg-primary/90',
+                )}
                 disabled={isLoadingActions || !canRevision}
                 onClick={onMutateRevisionCase}
               >
diff --git a/apps/backoffice-v2/src/pages/SignIn/SignIn.page.tsx b/apps/backoffice-v2/src/pages/SignIn/SignIn.page.tsx
index 109ae17ae5..9a3c420949 100644
--- a/apps/backoffice-v2/src/pages/SignIn/SignIn.page.tsx
+++ b/apps/backoffice-v2/src/pages/SignIn/SignIn.page.tsx
@@ -103,7 +103,7 @@ export const SignIn: FunctionComponent = () => {
               <div className={`flex justify-end`}>
                 <Button
                   type="submit"
-                  className={'ms-auto mt-3 enabled:bg-slate-800 enabled:hover:bg-slate-800/90'}
+                  className={'ms-auto mt-3 enabled:bg-primary enabled:hover:bg-primary/90'}
                 >
                   Sign In
                 </Button>