diff --git a/src/assets/colors.scss b/src/assets/colors.scss index 68cd8205..bfc1170f 100644 --- a/src/assets/colors.scss +++ b/src/assets/colors.scss @@ -8,8 +8,8 @@ $gradient-gray: rgba(247, 249, 253, 0.1); $color-active-button: #989ba3; $bg-main-color: white; $gray-light: #dfe1e1; -$color-pink: #ffd0d7; -$color-green: #c4eacd; -$color-yellow: #f2f4be; -$color-purple: #e4b8d6; +$color-pink: #ffecf0; +$color-green: #e7f7eb; +$color-yellow: #fafbe5; +$color-purple: #f4e3ee; $black-80: #333; diff --git a/src/features/Dashboard/DashboardPage/_test_/index.test.jsx b/src/features/Dashboard/DashboardPage/_test_/index.test.jsx new file mode 100644 index 00000000..30241c3f --- /dev/null +++ b/src/features/Dashboard/DashboardPage/_test_/index.test.jsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import DashboardPage from 'features/Dashboard/DashboardPage'; +import { InstitutionContext } from 'features/Main/institutionContext'; +import '@testing-library/jest-dom/extend-expect'; + +describe('DashboardPage component', () => { + test('renders components', () => { + const { getByText } = render( + + + , + ); + + expect(getByText('This week')).toBeInTheDocument(); + expect(getByText('Next week')).toBeInTheDocument(); + expect(getByText('Next month')).toBeInTheDocument(); + expect(getByText('New students registered')).toBeInTheDocument(); + expect(getByText('Classes scheduled')).toBeInTheDocument(); + expect(getByText('Welcome to Institution Name')).toBeInTheDocument(); + }); +}); diff --git a/src/features/Dashboard/DashboardPage/index.jsx b/src/features/Dashboard/DashboardPage/index.jsx new file mode 100644 index 00000000..e465101b --- /dev/null +++ b/src/features/Dashboard/DashboardPage/index.jsx @@ -0,0 +1,17 @@ +import React, { useContext } from 'react'; +import { Container } from '@edx/paragon'; +import StudentsMetrics from 'features/Students/StudentsMetrics'; +import { InstitutionContext } from 'features/Main/institutionContext'; + +const DashboardPage = () => { + const dataInstitution = useContext(InstitutionContext); + + return ( + +

{dataInstitution.length === 1 ? `Welcome to ${dataInstitution[0].name}` : 'Select an institution'}

+ +
+ ); +}; + +export default DashboardPage; diff --git a/src/features/Main/Sidebar/index.jsx b/src/features/Main/Sidebar/index.jsx index a5bfbc82..1b12964e 100644 --- a/src/features/Main/Sidebar/index.jsx +++ b/src/features/Main/Sidebar/index.jsx @@ -7,7 +7,7 @@ import { faUsers, faUser, faBook } from '@fortawesome/free-solid-svg-icons'; import './index.scss'; export const Sidebar = () => { - const [activeTab, setActiveTab] = useState('students'); + const [activeTab, setActiveTab] = useState('dashboard'); const history = useHistory(); const handleTabClick = (tabName) => { @@ -26,6 +26,17 @@ export const Sidebar = () => {