Change:
Describe the bug When we accept the academic honesty policy and hover over the text, it feels like a button. The cursor should be auto. To Reproduce Steps to reproduce the behavior: to the settings page sure you have accepted academic honesty policy over "you have accepted academic honesty" button Desktop (please complete the following information): OS: Windows 10 Pro 32 Bit Pro Browser: Chrome Version: 77.0.3865.90
, we can make this button disabled, no? I tried it and it seems good, as it is a button but doesn't have to be clicked again..
Please feel free to make a PR.. Here are the lines that you probably need to touch: [ ] The panel can be a button and disabled. [ ] We would need some tests for these as well. Thanks.
Please follow our
Sure, I'll do it as soon as I can, after work.
I went ahead and created a PR for this, along with unit test. Hope it's fine.

Discussion:
); renderIsHonestAgreed = () => ( <del> <Panel bsStyle='info' className='agreed btn'> </del> <ins> <Button block={true} bsStyle='primary' className='disabled-agreed' disabled={true} > </ins> <p>You have accepted our Academic Honesty Policy.</p> <del> </Panel> </del> <ins> </Button> </ins> ); render() {

<ins> /* global expect jest */ import React from 'react'; import ShallowRenderer from 'react-test-renderer/shallow'; import TestRenderer from 'react-test-renderer'; import Honesty from './Honesty'; import { Button } from '@freecodecamp/react-bootstrap'; describe('<Honesty />', () => { const renderer = new ShallowRenderer(); const updateIsHonestMock = jest.fn(); test('<Honesty /> snapshot when isHonest is false', () => { const componentToRender = ( <Honesty isHonest={false} updateIsHonest={updateIsHonestMock} /> ); const component = renderer.render(componentToRender); expect(component).toMatchSnapshot('Honesty'); }); test('<Honesty /> snapshot when isHonest is true', () => { const componentToRender = ( <Honesty isHonest={true} updateIsHonest={updateIsHonestMock} /> ); const component = renderer.render(componentToRender); expect(component).toMatchSnapshot('HonestyAccepted'); }); test('should call updateIsHonest method on clicking agree button', () => { const root = TestRenderer.create( <Honesty isHonest={false} updateIsHonest={updateIsHonestMock} /> ).root; root.findByType(Button).props.onClick(); expect(updateIsHonestMock).toHaveBeenCalledWith({ isHonest: true }); }); }); </ins>

<ins> // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`<Honesty /> <Honesty /> snapshot when isHonest is false: Honesty 1`] = ` <section className="honesty-policy" > <SectionHeader> Academic Honesty Policy </SectionHeader> <FullWidthRow> <Uncontrolled(Panel) className="honesty-panel" > <HonestyPolicy /> </Uncontrolled(Panel)> <br /> <Button active={false} block={true} bsClass="btn" bsStyle="primary" disabled={false} onClick={[Function]} > Agree </Button> </FullWidthRow> </section> `; exports[`<Honesty /> <Honesty /> snapshot when isHonest is true: HonestyAccepted 1`] = ` <section className="honesty-policy" > <SectionHeader> Academic Honesty Policy </SectionHeader> <FullWidthRow> <Uncontrolled(Panel) className="honesty-panel" > <HonestyPolicy /> </Uncontrolled(Panel)> <br /> <Button active={false} block={true} bsClass="btn" bsStyle="primary" className="disabled-agreed" disabled={true} > <p> You have accepted our Academic Honesty Policy. </p> </Button> </FullWidthRow> </section> `; </ins>

padding-top: 15px; } <del> .honesty-policy .agreed { display: flex; justify-content: center; align-items: center; background-color: var(--quaternary-color); color: #fff; } div .agreed p { color: white; } .honesty-policy .agreed p { </del> <ins> .honesty-policy .disabled-agreed p { </ins> margin-top: 0; margin-bottom: 0; }