refactor(client): migrate button component in donation form (#52355)

Co-authored-by: Sboonny <muhammedelruby@gmail.com>

client/src/components/Donation/donate-completion.tsx

@@ -1,8 +1,8 @@
-import { Button } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import Spinner from 'react-spinkit';
 import { Alert } from '@freecodecamp/ui';
+
 import { Spacer } from '../helpers';
 
 type DonateCompletionProps = {
@@ -57,11 +57,9 @@ function DonateCompletion({
       </div>
       <div className='donation-completion-buttons'>
         {error && (
-          <div>
-            <Button bsStyle='primary' onClick={reset}>
-              {t('buttons.try-again')}
-            </Button>
-          </div>
+          <button type='button' className='try-again-button' onClick={reset}>
+            {t('buttons.try-again')}
+          </button>
         )}
       </div>
     </Alert>

client/src/components/Donation/donate-form.tsx

@@ -6,7 +6,6 @@ import { connect } from 'react-redux';
 import Spinner from 'react-spinkit';
 import { createSelector } from 'reselect';
 import type { TFunction } from 'i18next';
-import { Button } from '@freecodecamp/react-bootstrap';
 
 import {
   defaultDonation,
@@ -222,9 +221,13 @@ class DonateForm extends Component<DonateFormProps, DonateFormComponentState> {
           usd: formattedAmountLabel(donationAmount)
         })}
 
-        <Button bsStyle='primary' className='btn-link' onClick={editAmount}>
+        <button
+          type='button'
+          className='edit-amount-button'
+          onClick={editAmount}
+        >
           {t('donate.edit-amount')}
-        </Button>
+        </button>
       </>
     );
 

client/src/components/Donation/donation-modal.tsx

@@ -1,4 +1,4 @@
-import { Modal, Button } from '@freecodecamp/react-bootstrap';
+import { Modal } from '@freecodecamp/react-bootstrap';
 import { Col, Row } from '@freecodecamp/ui';
 import { WindowLocation } from '@reach/router';
 import React, { useEffect, useState } from 'react';
@@ -98,15 +98,13 @@ function CloseButtonRow({
   return (
     <Row>
       <Col sm={4} smOffset={4} xs={8} xsOffset={2}>
-        <Button
-          bsSize='sm'
-          bsStyle='primary'
-          className='btn-link close-button'
+        <button
+          className='close-button'
+          type='button'
           onClick={closeDonationModal}
-          tabIndex='0'
         >
           {donationAttempted ? t('buttons.close') : t('buttons.ask-later')}
-        </Button>
+        </button>
       </Col>
     </Row>
   );

client/src/components/Donation/donation.css

@@ -305,11 +305,28 @@ li.disabled > a {
   justify-content: space-between;
 }
 
+/* 
+ * We currently cannot reuse the Button component from `ui-components`
+ * and are using the native `<button>` with custom CSS.
+ * This implementation is temporary until we can find a solution for this button use case.
+ * Ref: https://github.com/freeCodeCamp/freeCodeCamp/issues/52349
+ */
 .close-button {
   text-align: center;
   margin: 0 auto;
   display: block;
   padding: 0 10px;
+  font-weight: normal;
+  background-color: transparent;
+  border: 0;
+  text-decoration-line: underline;
+  /* This is required in order to improve text readability in Arabic */
+  text-underline-position: under;
+}
+.close-button:hover {
+  text-decoration-line: none;
+  background-color: var(--quaternary-background);
+  color: var(--quaternary-color);
 }
 
 .donation-modal h2 {
@@ -456,13 +473,26 @@ button.confirm-donation-btn {
   display: inline-flex;
   align-items: center;
 }
+button.confirm-donation-btn:focus,
 button.confirm-donation-btn:active,
-button.confirm-donation-btn:active:focus,
+button.confirm-donation-btn:active:focus {
+  background-color: var(--quaternary-background);
+  border-color: var(--secondary-color);
+  color: var(--secondary-color);
+}
 button.confirm-donation-btn:hover {
   color: black;
   background-color: #f2ba38;
   border-color: #f2ba38;
 }
+button.confirm-donation-btn:disabled {
+  cursor: not-allowed;
+  background-color: var(--quaternary-background);
+  border-color: var(--quaternary-color);
+  color: var(--quaternary-color);
+  opacity: 0.65;
+}
+
 a.patreon-button {
   border-radius: 5px;
   background-color: #ff424d;
@@ -498,9 +528,26 @@ a.patreon-button:hover {
   display: none;
 }
 
-.donation-modal .btn-link:disabled {
-  opacity: 0;
-  cursor: default;
+/* 
+ * We currently cannot reuse the Button component from `ui-components`
+ * and are using the native `<button>` with custom CSS.
+ * This implementation is temporary until we can find a solution for this button use case.
+ * Ref: https://github.com/freeCodeCamp/freeCodeCamp/issues/52349
+ */
+.edit-amount-button {
+  font-weight: normal;
+  background-color: transparent;
+  border: 0;
+  text-decoration-line: underline;
+  /* This is required in order to improve text readability in Arabic */
+  text-underline-position: under;
+  padding: 0;
+}
+
+.edit-amount-button:hover {
+  text-decoration-line: none;
+  background-color: var(--quaternary-background);
+  color: var(--quaternary-color);
 }
 
 .donate-btn-group {
@@ -598,3 +645,24 @@ a.patreon-button:hover {
 .confirm-donation-btn svg.svg-inline--fa.fa-lock {
   margin-bottom: 2px;
 }
+
+/* 
+ * We currently cannot reuse the Button component from `ui-components`
+ * and are using the native `<button>` with custom CSS.
+ * This implementation is temporary until we can find a solution for this button use case.
+ * Ref: https://github.com/freeCodeCamp/freeCodeCamp/issues/52349
+ */
+.try-again-button {
+  background-color: var(--blue05);
+  color: var(--blue70);
+  border-radius: 0;
+  border: 3px solid var(--blue70);
+  padding: 6px 12px;
+}
+.try-again-button:focus,
+.try-again-button:hover,
+.try-again-button:active {
+  color: var(--blue05);
+  background-color: var(--blue70);
+  border-color: var(--blue70);
+}

client/src/components/Donation/multi-tier-donation-form.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import { Button } from '@freecodecamp/react-bootstrap';
 import {
   Tabs,
   TabsContent,
@@ -89,16 +88,14 @@ function SelectionTabs({
             );
           })}
         </Tabs>
-        <Button
-          block={true}
-          bsStyle='primary'
+        <button
           className='text-center confirm-donation-btn donate-btn-group'
           type='submit'
           data-cy='donation-tier-selection-button'
           onClick={() => setShowDonateForm(true)}
         >
           {t('buttons.donate')}
-        </Button>
+        </button>
         <Spacer size='medium' />
       </Col>
     </Row>

client/src/components/Donation/stripe-card-form.tsx

@@ -1,4 +1,3 @@
-import { Button } from '@freecodecamp/react-bootstrap';
 import {
   CardNumberElement,
   CardExpiryElement,
@@ -158,16 +157,14 @@ const StripeCardForm = ({
       <div className={'form-status'}>
         {!isSubmissionValid && <p>{t('donate.valid-card')}</p>}
       </div>
-      <Button
-        block={true}
-        bsStyle='primary'
+      <button
         className='confirm-donation-btn'
         disabled={!stripe || !elements || isSubmitting}
         data-cy='donation-confirmation-button'
         type='submit'
       >
         {t('buttons.donate')}
-      </Button>
+      </button>
     </form>
   );
 };