feat: update header for sidebar (#69)

edx · Dec 5, 2024 · c1ea57d · c1ea57d
1 parent f1f690c
commit c1ea57d
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 16 deletions.
diff --git a/src/components/Sidebar/Sidebar.scss b/src/components/Sidebar/Sidebar.scss
@@ -22,14 +22,24 @@
     top: 0;
     right: 0;
   }
+
+  .sidebar-header {
+    background: linear-gradient(to left, rgb(58, 101, 108) 0px, rgb(0, 29, 34));
+    width: 100%;
+    height: 60px;
+
+    svg {
+      height: 30px;
+    }
+  }
 }
 
 .separator {
   z-index: 100;
   width: 100%;
-  height: 10px;
-  padding: 10px;
+  height: 5px;
+  padding: 5px;
   background: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0.35), transparent);
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent);
-  opacity: 0.2;
+  opacity: 0.3;
 }
diff --git a/src/components/Sidebar/index.jsx b/src/components/Sidebar/index.jsx
@@ -13,6 +13,7 @@ import APIError from '../APIError';
 import ChatBox from '../ChatBox';
 import Disclosure from '../Disclosure';
 import MessageForm from '../MessageForm';
+import { ReactComponent as XpertLogo } from '../../assets/xpert-logo.svg';
 import './Sidebar.scss';
 
 const Sidebar = ({
@@ -76,14 +77,8 @@ const Sidebar = ({
 
   const getSidebar = () => (
     <div className="h-100 d-flex flex-column justify-content-stretch" data-testid="sidebar-xpert">
-      <div className="d-flex flex-column align-items-center p-3">
-        <h1 className="font-weight-bold mb-3">
-          Hi, I&apos;m Xpert!
-        </h1>
-        <p className="px-3 mb-0 text-center">
-          Stuck on a concept? Need more clarification on a complicated topic?
-          Let&apos;s chat!
-        </p>
+      <div className="p-3 sidebar-header" data-testid="sidebar-xpert-header">
+        <XpertLogo />
       </div>
       <span className="separator" />
       <ChatBox
@@ -116,7 +111,7 @@ const Sidebar = ({
           alt="close"
           aria-label="close"
           variant="primary"
-          invertColors={!disclosureAcknowledged}
+          invertColors
           data-testid="close-button"
         />
         {disclosureAcknowledged ? (getSidebar()) : (<Disclosure>{getMessageForm()}</Disclosure>)}

diff --git a/src/widgets/Xpert.test.jsx b/src/widgets/Xpert.test.jsx
@@ -36,7 +36,7 @@ const courseId = 'course-v1:edX+DemoX+Demo_Course';
 const unitId = 'block-v1:edX+DemoX+Demo_Course+type@unit+block@unit1';
 
 const assertSidebarElementsNotInDOM = () => {
-  expect(screen.queryByTestId('heading', { name: 'Hi, I\'m Xpert!' })).not.toBeInTheDocument();
+  expect(screen.queryByTestId('sidebar-xpert-header')).not.toBeInTheDocument();
   expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
 
   expect(screen.queryByRole('button', { name: 'submit' })).not.toBeInTheDocument();
@@ -109,7 +109,7 @@ test('clicking the call to action opens the sidebar', async () => {
   await user.click(screen.queryByTestId('message-button'));
 
   // assert that UI elements present in the sidebar are visible
-  expect(screen.getByRole('heading', { name: 'Hi, I\'m Xpert!' })).toBeVisible();
+  expect(screen.getByTestId('sidebar-xpert-header')).toBeVisible();
   expect(screen.getByRole('textbox')).toBeVisible();
   expect(screen.getByRole('button', { name: 'submit' })).toBeVisible();
   expect(screen.getByTestId('close-button')).toBeVisible();
@@ -127,7 +127,7 @@ test('clicking the toggle button opens the sidebar', async () => {
   await user.click(screen.queryByTestId('toggle-button'));
 
   // assert that UI elements present in the sidebar are visible
-  expect(screen.getByRole('heading', { name: 'Hi, I\'m Xpert!' })).toBeVisible();
+  expect(screen.getByTestId('sidebar-xpert-header')).toBeVisible();
   expect(screen.getByRole('textbox')).toBeVisible();
   expect(screen.getByRole('button', { name: 'submit' })).toBeVisible();
   expect(screen.getByTestId('close-button')).toBeVisible();
@@ -291,7 +291,7 @@ test('popup modal should open chat', async () => {
   await user.click(screen.queryByTestId('check-button'));
 
   // assert that UI elements present in the sidebar are visible
-  expect(screen.getByRole('heading', { name: 'Hi, I\'m Xpert!' })).toBeVisible();
+  expect(screen.getByTestId('sidebar-xpert-header')).toBeVisible();
   expect(screen.getByRole('textbox')).toBeVisible();
   expect(screen.getByRole('button', { name: 'submit' })).toBeVisible();
   expect(screen.getByTestId('close-button')).toBeVisible();