Skip to content

Commit 9ac217f

Browse files
arun-s-aotarun-s-aot
authored
Merge pull request #555 from fahad-aot/bugfix/fwf-4591-Ui-issues-with-reviewer-journey
bugfix/fwf-4591:Fixed UI issues with reviewer journey
2 parents a1e287e + 7ac1e6d commit 9ac217f

File tree

10 files changed

+128
-57
lines changed

10 files changed

+128
-57
lines changed

‎forms-flow-components/src/components/SvgIcons/index.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -146,8 +146,9 @@ export const SwitchIcon = ({ color = baseColor, ...props }) => (
146146
</svg>
147147
);
148148

149-
export const AddIcon = ({ color = baseColor, size = 16, ...props }) => (
149+
export const AddIcon = ({ color = baseColor,className, size = 16, ...props }) => (
150150
<svg
151+
className={className}
151152
xmlns="http://www.w3.org/2000/svg"
152153
width={size}
153154
height={size}
@@ -156,13 +157,15 @@ export const AddIcon = ({ color = baseColor, size = 16, ...props }) => (
156157
{...props}
157158
>
158159
<path
160+
className={className}
159161
d="M8 1V15"
160162
stroke={color}
161163
strokeWidth="2"
162164
strokeLinecap="round"
163165
strokeLinejoin="round"
164166
/>
165167
<path
168+
className={className}
166169
d="M1 8L15 8"
167170
stroke={color}
168171
strokeWidth="2"
@@ -392,15 +395,18 @@ export const DownArrowIcon = ({ color = baseColor, ...props }) => (
392395
</svg>
393396
);
394397

395-
export const PencilIcon = ({ color = baseColor, ...props }) => (
398+
export const PencilIcon = ({ color = baseColor,className, ...props }) => (
396399
<svg
400+
className={className}
397401
xmlns="http://www.w3.org/2000/svg"
398402
width="18"
399403
height="18"
400404
viewBox="0 0 18 18"
401405
fill="none"
406+
onClick={props.onClick}
402407
>
403408
<path
409+
className={className}
404410
d="M6.53858 3.58705L15.0242 12.0727L16.5 16.5L12.0727 15.0242L3.58705 6.53858M6.53858 3.58705L5.06281 2.11128C4.24777 1.29624 2.92633 1.29624 2.11128 2.11128C1.29624 2.92633 1.29624 4.24777 2.11128 5.06281L3.58705 6.53858M6.53858 3.58705L3.58705 6.53858"
405411
stroke={color}
406412
strokeWidth="2"

‎forms-flow-review/src/components/FormSelectionModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ export const FormSelectionModal: React.FC<FormSelectionModalProps> = React.memo(
141141
</div>
142142
</div>
143143
<div className="form-selection-right">
144-
<div className="form-selection-preview custom-scroll">
144+
<div className="form-selection-preview custom-scroll wizard-tab">
145145
{loading ? (
146146
<div className="form-selection-spinner"></div>
147147
) : (

‎forms-flow-review/src/components/ResizableTable/ResizableTable.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ const TaskTableCell = ({ task, column, index, redirectUrl, history, t }) => {
9797
return (
9898
<td key={`action-${task.id}-${index}`}>
9999
<CustomButton
100-
className="btn-table"
100+
size="table-sm"
101101
variant="secondary"
102102
label={t("View")}
103103
onClick={() =>
@@ -514,7 +514,7 @@ useEffect(() => {
514514
content: (
515515
<span>
516516
<span>
517-
<AddIcon />
517+
<AddIcon className="filter-plus-icon" />
518518
</span>{" "}
519519
{t("Custom Filter")}
520520
</span>
@@ -527,8 +527,8 @@ useEffect(() => {
527527
{
528528
content: (
529529
<span>
530-
<span>
531-
<PencilIcon />
530+
<span >
531+
<PencilIcon className="filter-edit-icon" />
532532
</span>{" "}
533533
{t("Re-order And Hide Filters")}
534534
</span>
@@ -553,9 +553,9 @@ useEffect(() => {
553553
const extraItems = [
554554
{
555555
content: (
556-
<span>
557556
<span>
558-
<AddIcon />
557+
<span>
558+
<AddIcon className="filter-plus-icon" />
559559
</span>{" "}
560560
{t("Custom Filter")}
561561
</span>
@@ -567,9 +567,9 @@ useEffect(() => {
567567
},
568568
{
569569
content: (
570-
<span>
571570
<span>
572-
<PencilIcon />
571+
<span>
572+
<PencilIcon className="filter-edit-icon" />
573573
</span>{" "}
574574
{t("Re-order And Hide Filters")}
575575
</span>
@@ -944,8 +944,8 @@ useEffect(() => {
944944
>
945945
<div className="row w-100 mb-3 g-2">
946946
{/* Left Filters - Stack on small, inline on md+ */}
947-
<div className="col-12 col-md d-flex flex-wrap align-items-center">
948-
<div className="me-2 mb-2">
947+
<div className="col-12 col-md d-flex flex-wrap gap-3 align-items-center">
948+
<div className="mb-2">
949949
<ButtonDropdown
950950
label={
951951
<span
@@ -973,11 +973,11 @@ useEffect(() => {
973973
/>
974974
</div>
975975

976-
<span className="text-muted me-2">
976+
<span className="text-muted">
977977
<AddIcon size="8" />
978978
</span>
979979

980-
<div className="me-2 mb-2">
980+
<div className="mb-2">
981981
<ButtonDropdown
982982
label={t("Attribute Filter")}
983983
variant="primary"
@@ -992,23 +992,23 @@ useEffect(() => {
992992
/>
993993
</div>
994994

995-
<span className="text-muted me-2">
995+
<span className="text-muted">
996996
<AddIcon size="8" />
997997
</span>
998998

999-
<div className="me-2 mb-2">
999+
<div className="mb-2">
10001000
<DateRangePicker
10011001
value={dateRange}
10021002
onChange={setDateRange}
1003-
placeholder={t("Filter Dates")}
1003+
placeholder={t("Filter Created Date")}
10041004
dataTestId="date-range-picker"
10051005
ariaLabel={t("Select date range for filtering")}
10061006
startDateAriaLabel={t("Start date")}
10071007
endDateAriaLabel={t("End date")}
10081008
/>
10091009
</div>
10101010

1011-
<span className="text-muted me-2">
1011+
<span className="text-muted">
10121012
<AddIcon size="8" />
10131013
</span>
10141014

@@ -1024,7 +1024,7 @@ useEffect(() => {
10241024
onChange={handleCheckBoxChange}
10251025
data-testid="assign-to-me-checkbox"
10261026
/>
1027-
<label className="custom-checkbox-label">{t("Assign to me")}</label>
1027+
<span className="custom-checkbox-label">{t("Assign to me")}</span>
10281028
</button>
10291029
</div>
10301030
</div>

‎forms-flow-review/src/components/TaskFilterModal.tsx‎

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -442,20 +442,32 @@ export const TaskFilterModal = ({ show, onClose, filter, canEdit }) => {
442442
</div>
443443
)}
444444
<div className="pt-4">
445-
<FormInput
446-
className="task-form-filter"
447-
name="title"
448-
type="text"
449-
label={t("Form")}
450-
ariaLabel={t("Name of the form")}
451-
dataTestId="form-name-input"
452-
icon={
453-
<PencilIcon data-testid="close-input" aria-label="Close input" />
454-
}
455-
maxLength={200}
456-
value={selectedForm.formName}
457-
onIconClick={() => setShowFormSelectionModal(true)}
458-
/>
445+
<label className="mb-2">{t("Form")}</label>
446+
<div className="form-selection-input d-flex justify-content-end">
447+
<label className="w-100">{selectedForm.formName}</label>
448+
{ selectedForm.formName && (<div className="form-selection-input-container">
449+
<CloseIcon
450+
color={baseColor}
451+
width="15px"
452+
height="15px"
453+
className="form-selection-icon"
454+
data-testid="clear-formId"
455+
aria-label="clear-formId"
456+
onClick={() => setSelectedForm({
457+
formId: "",
458+
formName: "",
459+
})}
460+
/>
461+
</div>) }
462+
<div className="form-selection-input-container">
463+
<PencilIcon
464+
className="form-selection-icon"
465+
aria-label="open modal"
466+
data-testid="open-modal"
467+
onClick={() => setShowFormSelectionModal(true)}
468+
/>
469+
</div>
470+
</div>
459471
<FormSelectionModal
460472
showModal={showFormSelectionModal}
461473
onClose={handleModalclose}
@@ -528,8 +540,7 @@ export const TaskFilterModal = ({ show, onClose, filter, canEdit }) => {
528540
onChange={handleFilterName}
529541
isInvalid={!!filterNameError}
530542
onBlur={handleNameError}
531-
feedback=
532-
{filterNameError }
543+
feedback={filterNameError }
533544
/>
534545

535546
<div className="pt-4 pb-4">

‎forms-flow-theme/scss/_button.scss‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -328,8 +328,12 @@ $danger-color: var(--ff-danger);
328328
left: 50% !important;
329329
transform: translateX(-50%) !important;
330330
top: 100% !important;
331-
border-bottom-left-radius: var(--radius-lg) !important;
332-
border-bottom-right-radius: var(--radius-lg) !important;
331+
border-bottom-left-radius: 1.344rem !important;
332+
border-bottom-right-radius: 1.344rem !important;
333+
padding: var(--spacer-050) var(--spacer-025) !important;
334+
display: flex;
335+
flex-direction: column;
336+
gap: var(--spacer-025) !important;
333337
}
334338

335339
&.show {
@@ -367,7 +371,14 @@ $danger-color: var(--ff-danger);
367371
}
368372
.dropdown-item {
369373
padding: var(--spacer-050) var(--spacer-100) !important;
370-
margin: 0.25rem !important;
374+
font-size: var(--font-size-sm);
375+
font-weight: var(--font-weight-xl) !important;
376+
color: $primary !important;
377+
white-space: normal !important;
378+
word-break: break-word;
379+
&:hover {
380+
color: $white-color !important;
381+
}
371382
}
372383
}
373384

‎forms-flow-theme/scss/_forms.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -724,5 +724,8 @@ span.text-danger,
724724
.custom-checkbox-label {
725725
font-size: var(--font-size-sm);
726726
font-weight: var(--font-weight-xl);
727+
height: 19px;
728+
display: flex;
729+
align-items: center;
727730
}
728731
}

‎forms-flow-theme/scss/_modal.scss‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1132,6 +1132,7 @@ $black-color: var(--ff-black);
11321132
cursor: pointer;
11331133
&:hover{
11341134
background: $primary-light !important;
1135+
color:$black-color !important;
11351136
}
11361137
}
11371138
.active-form{
@@ -1214,8 +1215,25 @@ $black-color: var(--ff-black);
12141215
padding-top: var(--spacer-075);
12151216
}
12161217

1217-
.task-form-filter {
1218-
background-color: $gray-light !important;
1218+
1219+
.form-selection-input{
1220+
color: var(--default-font-color) !important;
1221+
border-radius: var(--radius-sm) !important;
1222+
border: 1px solid var(--ff-primary) !important;
1223+
outline: none;
1224+
display: flex;
1225+
padding: var(--spacer-050) 0px var(--spacer-050) var(--spacer-100) !important;
1226+
justify-content: center;
1227+
align-items: center;
1228+
align-self: stretch;
1229+
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
1230+
background-color: var(--ff-gray-light) !important;
1231+
height: 40px !important;
1232+
.form-selection-input-container{
1233+
display:flex;
1234+
padding: var(--spacer-050) var(--spacer-075) !important;
1235+
cursor: pointer ;
1236+
}
12191237
}
12201238
}
12211239
.custom-dropdown-menu { // will remove after integrating the actual dropdown

‎forms-flow-theme/scss/_table.scss‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -314,7 +314,9 @@ $white-color: var(--ff-white);
314314
th {
315315
border-bottom: 1px solid var(--ff-gray-medium);
316316
padding: var(--spacer-050) var(--spacer-075);
317-
font-weight: 600;
317+
font-weight: var(--font-weight-xl);
318+
font-size: var(--font-size-xs);
319+
line-height: 90%; //To be updated .actually it is 120%
318320
user-select: none;
319321
background-color: var(--ff-body-bg);
320322
}
@@ -354,15 +356,25 @@ $white-color: var(--ff-white);
354356
z-index: 2;
355357
border-left: 1px solid var(--ff-gray-medium-dark);
356358
text-align: center;
357-
vertical-align: middle;
359+
vertical-align: middle;
360+
.empty-table-message{
361+
border-left: none !important;
362+
}
358363
}
359364
}
360365
}
361366
.empty-table-message {
367+
display: flex;
368+
justify-content: center;
362369
text-align: center;
363370
border: none;
364-
padding: var(--spacer-100);
371+
padding: var(--spacer-200);
372+
gap: var(--spacer-100);
365373
color: var(--ff-gray-medium-dark);
374+
overflow: visible !important;
375+
&:hover {
376+
border: none !important;
377+
}
366378
}
367379
}
368380

@@ -402,7 +414,7 @@ $white-color: var(--ff-white);
402414
}
403415
}
404416
.filter-large {
405-
display: inline-block;
417+
display: block;
406418
max-width: 100px; /* adjust width as needed */
407419
overflow: hidden;
408420
text-overflow: ellipsis;

‎forms-flow-theme/scss/_variables.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,9 @@ $white-color: var(--ff-white);
5757
color: $white-color !important;
5858
filter: none;
5959
width: auto !important;
60+
.filter-edit-icon,.filter-plus-icon{
61+
stroke: $white-color !important;
62+
}
6063
}
6164

6265
.taskDropdown>.dropdown-menu::before {

0 commit comments

Comments
 (0)