feat(boxai-sidebar): Additional UI fixes (#3923)

* feat(boxai-sidebar): Additional UI fixes

* feat(boxai-sidebar): Additional UI fixes

Author: DanilaRubleuski

src/elements/content-sidebar/BoxAISidebar.scss

@@ -14,7 +14,7 @@ $agentSelectorSidebarWidth: 211px;
         }
 
         .bcs-content-header {
-            margin: 0 tokens.$space-4;
+            padding: 0 tokens.$space-4;
         }
 
         .bcs-scroll-content {

src/elements/content-sidebar/BoxAISidebar.tsx

@@ -109,20 +109,6 @@ const BoxAISidebar = (props: BoxAISidebarProps) => {
         questionsWithoutInProgress = questionsWithoutInProgress.slice(0, -1);
     }
 
-    const handleKeyPress = React.useCallback((event: KeyboardEvent) => {
-        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    }, []);
-
-    React.useEffect(() => {
-        document.addEventListener('keydown', handleKeyPress, { capture: true });
-        return () => {
-            document.removeEventListener('keydown', handleKeyPress, { capture: true });
-        };
-    }, [handleKeyPress]);
-
     const localizedQuestions = DOCUMENT_SUGGESTED_QUESTIONS.map(question => ({
         id: question.id,
         label: formatMessage(messages[question.labelId]),

src/elements/content-sidebar/BoxAISidebarContent.tsx

@@ -8,7 +8,7 @@ import { useIntl } from 'react-intl';
 import classNames from 'classnames';
 import { AgentsProvider, BoxAiAgentSelectorWithApi } from '@box/box-ai-agent-selector';
 import { IconButton, Tooltip } from '@box/blueprint-web';
-import { ArrowsExpand } from '@box/blueprint-web-assets/icons/Line';
+import { ArrowsExpand } from '@box/blueprint-web-assets/icons/Fill';
 import {
     BoxAiContentAnswers,
     ClearConversationButton,

src/elements/content-sidebar/SidebarContent.scss

@@ -16,8 +16,8 @@ $sidebarScrollContentIncreasedWidth: $sidebarScrollContentWidth + 40px;
         align-items: center;
         justify-content: space-between;
         height: $sidebarHeaderHeight;
-        margin: 0 $sidebarActivityFeedSpacingHorizontal;
-        padding: 0;
+        margin: 0;
+        padding: 0 $sidebarActivityFeedSpacingHorizontal;
         border-bottom: 1px solid $bdl-gray-10;
 
         .bcs-title {

src/elements/content-sidebar/SidebarNav.js

@@ -9,7 +9,7 @@ import { injectIntl } from 'react-intl';
 import type { IntlShape } from 'react-intl';
 import noop from 'lodash/noop';
 import { BoxAiLogo } from '@box/blueprint-web-assets/icons/Logo';
-import { Size5 } from '@box/blueprint-web-assets/tokens/tokens';
+import { Size6 } from '@box/blueprint-web-assets/tokens/tokens';
 import AdditionalTabs from './additional-tabs';
 import DocGenIcon from '../../icon/fill/DocGenIcon';
 import IconChatRound from '../../icons/general/IconChatRound';
@@ -93,7 +93,7 @@ const SidebarNav = ({
                                     : intl.formatMessage(messages.sidebarBoxAITitle)
                             }
                         >
-                            <BoxAiLogo height={Size5} width={Size5} />
+                            <BoxAiLogo height={Size6} width={Size6} />
                         </SidebarNavButton>
                     )}
                     {hasActivity && (
@@ -105,7 +105,7 @@ const SidebarNav = ({
                             sidebarView={SIDEBAR_VIEW_ACTIVITY}
                             tooltip={intl.formatMessage(messages.sidebarActivityTitle)}
                         >
-                            <IconChatRound />
+                            <IconChatRound className="bcs-SidebarNav-icon" />
                         </SidebarNavButton>
                     )}
                     {hasDetails && (
@@ -117,7 +117,7 @@ const SidebarNav = ({
                             sidebarView={SIDEBAR_VIEW_DETAILS}
                             tooltip={intl.formatMessage(messages.sidebarDetailsTitle)}
                         >
-                            <IconDocInfo />
+                            <IconDocInfo className="bcs-SidebarNav-icon" />
                         </SidebarNavButton>
                     )}
                     {hasSkills && (
@@ -129,7 +129,7 @@ const SidebarNav = ({
                             sidebarView={SIDEBAR_VIEW_SKILLS}
                             tooltip={intl.formatMessage(messages.sidebarSkillsTitle)}
                         >
-                            <IconMagicWand />
+                            <IconMagicWand className="bcs-SidebarNav-icon" />
                         </SidebarNavButton>
                     )}
                     {hasMetadata && (
@@ -141,7 +141,7 @@ const SidebarNav = ({
                             sidebarView={SIDEBAR_VIEW_METADATA}
                             tooltip={intl.formatMessage(messages.sidebarMetadataTitle)}
                         >
-                            <IconMetadataThick />
+                            <IconMetadataThick className="bcs-SidebarNav-icon" />
                         </SidebarNavButton>
                     )}
                     {hasDocGen && (

src/elements/content-sidebar/SidebarNav.scss

@@ -21,7 +21,12 @@
     }
 
     .bcs-SidebarNav-icon {
-        @include bdl-SidebarNavIcon;
+        width: 20px;
+        height: 20px;
+
+        path {
+            fill: $bdl-gray-65;
+        }
     }
 
     .bcs-SidebarNav-overflow {

src/elements/content-sidebar/__tests__/BoxAISidebar.test.tsx

@@ -247,28 +247,4 @@ describe('elements/content-sidebar/BoxAISidebar', () => {
 
         expect(screen.queryByTestId('content-answers-modal')).not.toBeInTheDocument();
     });
-
-    describe('BoxAISidebar handleKeyPress', () => {
-        test('should prevent default behavior and stop propagation for ArrowLeft and ArrowRight keys', async () => {
-            await renderComponent();
-
-            const eventLeft = new KeyboardEvent('keydown', { key: 'ArrowLeft' });
-            const preventDefaultSpy = jest.spyOn(eventLeft, 'preventDefault');
-            const stopPropagationSpy = jest.spyOn(eventLeft, 'stopPropagation');
-
-            document.dispatchEvent(eventLeft);
-
-            expect(preventDefaultSpy).toHaveBeenCalled();
-            expect(stopPropagationSpy).toHaveBeenCalled();
-
-            const eventRight = new KeyboardEvent('keydown', { key: 'ArrowRight' });
-            const preventDefaultSpyRight = jest.spyOn(eventRight, 'preventDefault');
-            const stopPropagationSpyRight = jest.spyOn(eventRight, 'stopPropagation');
-
-            document.dispatchEvent(eventRight);
-
-            expect(preventDefaultSpyRight).toHaveBeenCalled();
-            expect(stopPropagationSpyRight).toHaveBeenCalled();
-        });
-    });
 });