Skip to content

Commit f1a3827

Browse files
arun-s-aotarun-s-aot
authored
Merge pull request #582 from AOT-Technologies/feature/FWF-4595-form-component-ui-updates
Feature/fwf 4595 form component UI updates
2 parents 538270f + c11567c commit f1a3827

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+4094
-1835
lines changed

‎forms-flow-admin/src/components/dashboard/dashboard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -256,7 +256,7 @@ const InsightDashboard = React.memo((props: any) => {
256256
noDataIndication={noData}
257257
data-testid="admin-dashboard-table"
258258
/>
259-
<table className="table">
259+
<table className="table old-design">
260260
<tfoot>
261261
<TableFooter
262262
limit={limit}

‎forms-flow-admin/src/components/roles/roles.tsx‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import "./roles.scss";
44
import { useParams } from "react-router-dom";
55
import { Translation, useTranslation } from "react-i18next";
66
import Form from "react-bootstrap/Form";
7-
import Button from "react-bootstrap/Button";
87
import { fetchUsers } from "../../services/users";
98
import {
109
CreateRole,
@@ -418,11 +417,12 @@ const Roles = React.memo((props: any) => {
418417

419418

420419
const showCreateModal = () => (
420+
<div data-testid="create-role-modal">
421421
<Modal show={showRoleModal} onHide={handleCloseRoleModal} size="sm">
422422
<Modal.Header>
423-
<Modal.Title><b>{t("Create Role")}</b></Modal.Title>
424-
<div className="d-flex align-items-center">
425-
<CloseIcon onClick={handleCloseRoleModal} data-testid="role-modal-close"/>
423+
<Modal.Title><p>{t("Create Role")}</p></Modal.Title>
424+
<div className="icon-close" onClick={handleCloseRoleModal} data-testid="role-modal-close">
425+
<CloseIcon dataTestId="action-modal-close"/>
426426
</div>
427427
</Modal.Header>
428428
<Modal.Body className="role-modal-body">
@@ -436,33 +436,33 @@ const Roles = React.memo((props: any) => {
436436
/>
437437
</Modal.Body>
438438
<Modal.Footer>
439+
<div className="buttons-row">
439440
<CustomButton
440-
variant={"primary"}
441-
size="lg"
442441
label={t("Save Changes")}
443442
disabled={disabled}
444443
onClick={handleCreateRole}
445444
dataTestId="create-new-role-button"
446445
ariaLabel="Create new role button"
447446
/>
448447
<CustomButton
449-
variant={"secondary"}
450-
size="lg"
451448
label={t("Discard Changes")}
452449
onClick={handleCloseRoleModal}
453450
dataTestId="create-new-role-cancel-button"
454451
ariaLabel="Create new role cancel button"
452+
secondary
455453
/>
454+
</div>
456455
</Modal.Footer>
457456
</Modal>
457+
</div>
458458
);
459459
const showEditModal = () => (
460-
460+
<div data-testid="edit-role-modal">
461461
<Modal show={showEditRoleModal} onHide={handleCloseEditRoleModal} size="sm">
462462
<Modal.Header>
463-
<Modal.Title>{editCandidate.name}</Modal.Title>
464-
<div className="d-flex align-items-center">
465-
<CloseIcon onClick={handleCloseEditRoleModal} data-testid="role-modal-close"/>
463+
<Modal.Title><p>{editCandidate.name}</p></Modal.Title>
464+
<div className="icon-close" onClick={handleCloseEditRoleModal} data-testid="role-modal-close">
465+
<CloseIcon/>
466466
</div>
467467
</Modal.Header>
468468
<Modal.Body className="role-modal-body">
@@ -476,25 +476,25 @@ const Roles = React.memo((props: any) => {
476476
/>
477477
</Modal.Body>
478478
<Modal.Footer>
479-
<CustomButton
480-
variant={"primary"}
481-
size="lg"
479+
<div className="buttons-row">
480+
<CustomButton
482481
label={t("Save Changes")}
483482
disabled={disabled}
484483
onClick={handleUpdateRole}
485484
dataTestId="edit-role-button"
486485
ariaLabel="Edit role button"
487486
/>
488487
<CustomButton
489-
variant={"secondary"}
490-
size="lg"
491488
label={t("Discard Changes")}
492489
onClick={handleCloseEditRoleModal}
493490
dataTestId="edit-role-cancel-button"
494491
ariaLabel="Edit role cancel button"
492+
secondary
495493
/>
494+
</div>
496495
</Modal.Footer>
497496
</Modal>
497+
</div>
498498

499499
);
500500

@@ -652,15 +652,15 @@ const Roles = React.memo((props: any) => {
652652
dataTestId="search-role-input"
653653
/>
654654
</div>
655-
<Button
656-
variant="primary"
655+
<CustomButton
657656
onClick={handleShowRoleModal}
658657
data-testid="roles-create-new-role-button"
659-
>
660-
<i className="fa-solid fa-plus me-2"></i>{" "}
661-
<Translation>{(t) => t("Create New Role")}</Translation>
662-
</Button>
658+
label={<Translation>{(t) => t("New Role")}</Translation>}
659+
ariaLabel={<Translation>{(t) => t("New Role")}</Translation>}
660+
action
661+
/>
663662
</div>
663+
664664
{!props?.loading ? (
665665
<div>
666666
<BootstrapTable
@@ -677,7 +677,7 @@ const Roles = React.memo((props: any) => {
677677
data-testid="admin-roles-table"
678678
/>
679679

680-
<table className="table mt-3">
680+
<table className="table mt-3 old-design">
681681
<tfoot>
682682
<TableFooter
683683
limit={sizePerPage}

‎forms-flow-admin/src/components/users/users.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -375,7 +375,6 @@ const Users = React.memo((props: any) => {
375375
<Modal
376376
show={showSuccessModal}
377377
onHide={closeSuccessModal}
378-
centered
379378
className="overflow-hidden">
380379
<Modal.Header closeButton>
381380
<Modal.Title></Modal.Title>
@@ -449,7 +448,7 @@ const Users = React.memo((props: any) => {
449448
{showInviteModal && (
450449
<Modal show={showInviteModal} onHide={closeInviteModal}>
451450
<Modal.Header closeButton>
452-
<Modal.Title>{t("Add Registered Users")}</Modal.Title>
451+
<Modal.Title><p>{t("Add Registered Users")}</p></Modal.Title>
453452
</Modal.Header>
454453

455454
<Modal.Body>
@@ -487,12 +486,14 @@ const Users = React.memo((props: any) => {
487486
</Modal.Body>
488487

489488
<Modal.Footer>
490-
<Button variant="secondary" onClick={closeInviteModal}>
491-
{t("Cancel")}
492-
</Button>
493-
<Button variant="primary" onClick={sendInvites} disabled={!formData.user || selectedRolesModal.length === 0}>
494-
{t("Add User")}
495-
</Button>
489+
<div className="buttons-row">
490+
<Button variant="secondary" onClick={closeInviteModal}>
491+
{t("Cancel")}
492+
</Button>
493+
<Button variant="primary" onClick={sendInvites} disabled={!formData.user || selectedRolesModal.length === 0}>
494+
{t("Add User")}
495+
</Button>
496+
</div>
496497
</Modal.Footer>
497498
</Modal>
498499
)}
@@ -521,7 +522,7 @@ const Users = React.memo((props: any) => {
521522
onTableChange={handleTableChange}
522523
data-testid="admin-users-table"
523524
/>
524-
<table className="table mt-3">
525+
<table className="table mt-3 old-design">
525526
<tfoot>
526527
<TableFooter
527528
limit={props?.limit?.sizePerPage}

‎forms-flow-admin/src/index.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ right: 0;
77
top: 0;
88
bottom: 0;
99
}
10-
.page-item .page-link {
11-
color: #0072ed !important;
12-
}
10+
// .page-item .page-link {
11+
// color: #0072ed !important;
12+
// }
1313

1414

1515

‎forms-flow-components/src/components/CustomComponents/BuildModal.tsx‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -33,16 +33,15 @@ const buildModalContent = (
3333
<>
3434
{contents.map(({ id, heading, body, onClick }) => (
3535
<button
36-
className="col-md-6 build-contents"
3736
key={id}
3837
onClick={onClick}
3938
tabIndex={0}
4039
onKeyDown={(event) => handleKeyDown(event, onClick)}
4140
aria-label={`Button for ${heading}`}
4241
data-testid={`button-${id}`}
4342
>
44-
<span className="mb-3 content-heading">{t(heading)}</span>
45-
<span className="content-body">{t(body)}</span>
43+
<h3>{t(heading)}</h3>
44+
<p>{t(body)}</p>
4645
</button>
4746
))}
4847
</>
@@ -56,22 +55,20 @@ export const BuildModal: React.FC<BuildModalProps> = React.memo(
5655
<Modal
5756
show={show}
5857
onHide={onClose}
59-
centered={true}
6058
data-testid="build-modal"
6159
aria-labelledby="build-modal-title"
6260
aria-describedby="build-modal-message"
63-
dialogClassName="build-modal"
6461
size="sm"
6562
>
6663
<Modal.Header>
6764
<Modal.Title id="build-modal-title">
68-
<b>{t(title)}</b>
65+
<p>{t(title)}</p>
6966
</Modal.Title>
70-
<div className="d-flex align-items-center">
71-
<CloseIcon onClick={onClose} dataTestId="modal-close"/>
67+
<div className="icon-close" onClick={onClose} data-testId="modal-close">
68+
<CloseIcon />
7269
</div>
7370
</Modal.Header>
74-
<Modal.Body className="d-flex">
71+
<Modal.Body className="choice">
7572
{buildModalContent(contents, t)}
7673
</Modal.Body>
7774
</Modal>

0 commit comments

Comments
 (0)