style(components): change button state styling to fix disappearing bu…

…ttons (#2877) * 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) * 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) --------- Co-authored-by: Omri Levy <[email protected]>
ballerine-io · Dec 11, 2024 · 3750829 · 3750829
1 parent b8bf216
commit 3750829
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 30 deletions.
diff --git 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-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/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
@@ -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',
+            )}
           >
             {value.text}
             {isReuploadResetable && (
@@ -253,9 +256,11 @@ export const CallToActionLegacy: FunctionComponent<ICallToActionLegacyProps> = (
         }
         close={
           <Button
-            className={ctw(`gap-x-2`, {
-              loading: 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
@@ -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-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/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
@@ -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/...ce-v2/src/pages/Entity/components/Case/actions-variants/DefaultActions/DefaultActions.tsx b/...ce-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>
@@ -57,9 +61,11 @@ export const DefaultActions = () => {
           <DialogFooter>
             <DialogClose asChild>
               <Button
-                className={ctw(`gap-x-2`, {
-                  loading: 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/Root/Root.page.tsx b/apps/backoffice-v2/src/pages/Root/Root.page.tsx
@@ -3,8 +3,6 @@ import { Providers } from '../../common/components/templates/Providers/Providers
 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';
 import { Outlet } from 'react-router-dom';
 import { ServerDownLayout } from './ServerDown.layout';
@@ -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
@@ -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-primary enabled:hover:bg-primary/90'}
+                >
                   Sign In
                 </Button>
               </div>