diff --git a/src/components/Disclosure/Disclosure.scss b/src/components/Disclosure/Disclosure.scss index a941c574..a9a6f623 100644 --- a/src/components/Disclosure/Disclosure.scss +++ b/src/components/Disclosure/Disclosure.scss @@ -2,16 +2,29 @@ .disclosure { height: 100%; - overflow-y: auto; background-color: variables.$dark-green; + font-family: Inter, Arial, sans-serif; + padding: 2rem; h2 { - font-size: 2rem; + font-size: 1.375rem; } h3 { + font-family: "Roboto Mono", Inter, Arial, sans-serif; color: variables.$accent-yellow; + margin-bottom: 3rem; + } + + small { + font-size: 0.875rem; + } + + .bullet-icon { + width: 2rem; + height: 2rem; + margin-right: 1rem; } p { @@ -30,6 +43,39 @@ } .disclaimer { - font-size: 1rem; + font-size: 0.75rem; + margin-bottom: 7.5rem; + } + + .trial-period { + padding: 3px; + background: #2D494E; + border-radius: 0.8125rem; + background-image: + linear-gradient(#2D494E, #2D494E), + linear-gradient(to right, #E76F3F, #EBA7BC); + background-origin: border-box; + background-clip: content-box, border-box; + + &-content { + padding: 0.8125rem; + } + + .bullet-icon { + width: 1.5rem; + height: 1.5rem; + margin-right: 0.5rem; + + svg path { + fill: #E98B7E; + } + } + } + + .trial-upgrade { + background: #D74000; + border-radius: 99rem; + font-size: 0.875rem; } } + diff --git a/src/components/Disclosure/Disclosure.test.jsx b/src/components/Disclosure/Disclosure.test.jsx new file mode 100644 index 00000000..d12f8a77 --- /dev/null +++ b/src/components/Disclosure/Disclosure.test.jsx @@ -0,0 +1,54 @@ +import React from 'react'; +import { screen } from '@testing-library/react'; +import { render } from '../../utils/utils.test'; + +import TrialDisclosure from '.'; + +const PRIVACY_POLICY_URL = 'https://some.url/policy'; +jest.mock('@edx/frontend-platform/config', () => ({ + ensureConfig: jest.fn(), + getConfig: () => ({ PRIVACY_POLICY_URL }), +})); + +describe('', () => { + let container; + + describe('When trial upgrade is not being showed', () => { + beforeEach(() => { + ({ container } = render(Children)); + }); + + it('should have a link to the privacy policy url', () => { + const link = screen.queryByText('privacy policy'); + + expect(link).toBeInTheDocument(); + expect(link).toHaveAttribute('href', PRIVACY_POLICY_URL); + }); + + it('should not show the trial message', () => { + const upgrade = screen.queryByText('Free trial, then upgrade course for full access to Xpert features.'); + + expect(upgrade).not.toBeInTheDocument(); + }); + + it('should match snapshot', () => { + expect(container).toMatchSnapshot(); + }); + }); + + describe('When trial upgrade being showed', () => { + beforeEach(() => { + ({ container } = render(Children)); + }); + + it('should show the trial message', () => { + const upgrade = screen.queryByText('Free trial, then upgrade course for full access to Xpert features.'); + + expect(upgrade).toBeInTheDocument(); + }); + + it('should match snapshot', () => { + expect(container).toMatchSnapshot(); + }); + }); +}); diff --git a/src/components/Disclosure/__snapshots__/Disclosure.test.jsx.snap b/src/components/Disclosure/__snapshots__/Disclosure.test.jsx.snap new file mode 100644 index 00000000..6c06352d --- /dev/null +++ b/src/components/Disclosure/__snapshots__/Disclosure.test.jsx.snap @@ -0,0 +1,239 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` When trial upgrade being showed should match snapshot 1`] = ` +
+
+

+ Xpert Learning Assistant +

+

+ An AI-powered educational tool +

+
+
+ + + +
+ Understand a concept +
+ + “How does photosynthesis work?” + +
+
+
+ + + +
+ Summarize your learning +
+ + “Can you help me review pivot tables?” + +
+
+
+
+
+
+ + + + + Free trial, then upgrade course for full access to Xpert features. + +
+ +
+
+

+ Note: This chat is AI generated, mistakes are possible. By using it you agree that edX may create a record of this chat. Your personal data will be used as described in our   + + privacy policy + + . +

+ + Children + +
+
+`; + +exports[` When trial upgrade is not being showed should match snapshot 1`] = ` +
+
+

+ Xpert Learning Assistant +

+

+ An AI-powered educational tool +

+
+
+ + + +
+ Understand a concept +
+ + “How does photosynthesis work?” + +
+
+
+ + + +
+ Summarize your learning +
+ + “Can you help me review pivot tables?” + +
+
+
+

+ Note: This chat is AI generated, mistakes are possible. By using it you agree that edX may create a record of this chat. Your personal data will be used as described in our   + + privacy policy + + . +

+ + Children + +
+
+`; diff --git a/src/components/Disclosure/index.jsx b/src/components/Disclosure/index.jsx index 1c6edada..4be1b43a 100644 --- a/src/components/Disclosure/index.jsx +++ b/src/components/Disclosure/index.jsx @@ -1,42 +1,53 @@ import PropTypes from 'prop-types'; import React from 'react'; -import { Hyperlink, Icon } from '@openedx/paragon'; -import { Chat } from '@openedx/paragon/icons'; +import { Hyperlink, Icon, Button } from '@openedx/paragon'; +import { QuestionAnswerOutline, LightbulbCircle, AutoAwesome } from '@openedx/paragon/icons'; import { ensureConfig, getConfig } from '@edx/frontend-platform/config'; import './Disclosure.scss'; ensureConfig(['PRIVACY_POLICY_URL']); -const Disclosure = ({ children }) => ( -
+const Disclosure = ({ children, showTrial }) => ( +

- Xpert + Xpert Learning Assistant

An AI-powered educational tool

-
- +
+
- Stuck on a concept? Need more clarification on a complicated topic? -
- Ask Xpert a question! + Understand a concept
+ “How does photosynthesis work?”
-
-
    -
  • Could you explain how to multiply two numbers?
    • -
  • How should an essay be structured?
    • -
  • How does photosynthesis work?
    • -
+
+ +
+ Summarize your learning
+ “Can you help me review pivot tables?” +
-

- Note: - This chat is AI generated (powered by ChatGPT). Mistakes are possible. + {showTrial ? ( +

+
+
+ + + Free trial, then upgrade course for full access to Xpert features. + +
+ +
+
+ ) : null} +

+ Note: This chat is AI generated, mistakes are possible. By using it you agree that edX may create a record of this chat. - Your personal data will be used as described in our  + Your personal data will be used as described in our   ( ); Disclosure.propTypes = { + showTrial: PropTypes.bool, children: PropTypes.node.isRequired, }; +Disclosure.defaultProps = { + showTrial: false, +}; + export default Disclosure; diff --git a/src/components/MessageForm/MessageForm.scss b/src/components/MessageForm/MessageForm.scss new file mode 100644 index 00000000..9a3c1eb6 --- /dev/null +++ b/src/components/MessageForm/MessageForm.scss @@ -0,0 +1,12 @@ +.message-form { + .send-message-input { + .pgn__form-control-floating-label { + color: #ADADAD; + } + + input { + border-radius: 1rem; + } + } + +} diff --git a/src/components/MessageForm/index.jsx b/src/components/MessageForm/index.jsx index 8d8d92e0..b86353bd 100644 --- a/src/components/MessageForm/index.jsx +++ b/src/components/MessageForm/index.jsx @@ -12,6 +12,8 @@ import { } from '../../data/thunks'; import { usePromptExperimentDecision } from '../../experiments'; +import './MessageForm.scss'; + const MessageForm = ({ courseId, shouldAutofocus, unitId }) => { const { apiIsLoading, currentMessage, apiError } = useSelector(state => state.learningAssistant); const dispatch = useDispatch(); @@ -55,7 +57,7 @@ const MessageForm = ({ courseId, shouldAutofocus, unitId }) => { ); return ( -

+ { trailingElement={getSubmitButton()} value={currentMessage} ref={inputRef} + className="send-message-input" />
diff --git a/src/components/Sidebar/Sidebar.scss b/src/components/Sidebar/Sidebar.scss index 4f45f55d..4cf600f0 100644 --- a/src/components/Sidebar/Sidebar.scss +++ b/src/components/Sidebar/Sidebar.scss @@ -7,7 +7,9 @@ background-color: white; z-index: 9999; - width: 30%; + width: 100%; + max-width: 25rem; + right: 0; /* Add smooth scrolling behavior */