fix(client): make academy honesty button disabled (#37453)

client/src/components/settings/Honesty.js

@@ -24,9 +24,14 @@ class Honesty extends Component {
   );
 
   renderIsHonestAgreed = () => (
-    <Panel bsStyle='info' className='agreed btn'>
+    <Button
+      block={true}
+      bsStyle='primary'
+      className='disabled-agreed'
+      disabled={true}
+    >
       <p>You have accepted our Academic Honesty Policy.</p>
-    </Panel>
+    </Button>
   );
 
   render() {

client/src/components/settings/Honesty.test.js

@@ -0,0 +1,37 @@
+/* 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 });
+  });
+});

client/src/components/settings/__snapshots__/Honesty.test.js.snap

@@ -0,0 +1,59 @@
+// 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>
+`;

client/src/components/settings/honesty.css

@@ -8,19 +8,7 @@
   padding-top: 15px;
 }
 
-.honesty-policy .agreed {
+.honesty-policy .disabled-agreed p {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--quaternary-color);
-  color: #fff;
-}
-
-div .agreed p {
-  color: white;
-}
-
-.honesty-policy .agreed p {
   margin-top: 0;
   margin-bottom: 0;
 }