Skip to content

Commit 6ff2bca

Browse files
shreeyash07shreeyash07
committed
Finalize alert banner and custom option banner
1 parent 78e4180 commit 6ff2bca

File tree

7 files changed

+131
-53
lines changed

7 files changed

+131
-53
lines changed

‎manager-dashboard/app/Base/styles.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,8 @@ p {
7171
--color-accent: #4746f6;
7272
--color-danger: #e04656;
7373
--color-success: #53b391;
74+
--color-banner-alert: #fdf4dc;
75+
--color-banner-text: #5C4813;
7476
--color-separator: rgba(0, 0, 0, 0.1);
7577
--color-shadow: rgba(0, 0, 0, 0.2);
7678

‎manager-dashboard/app/components/AlertBanner/index.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
import { IoAlertCircleOutline } from 'react-icons/io5';
3+
import { _cs } from '@togglecorp/fujs';
4+
5+
import styles from './styles.css';
6+
7+
interface Props {
8+
className?: string;
9+
children: React.ReactNode;
10+
}
11+
12+
function AlertBanner(props: Props) {
13+
const {
14+
className,
15+
children,
16+
} = props;
17+
18+
return (
19+
<div className={_cs(styles.banner, className)}>
20+
<div className={styles.bannerIcon}>
21+
<IoAlertCircleOutline />
22+
</div>
23+
{children}
24+
</div>
25+
);
26+
}
27+
28+
export default AlertBanner;

‎manager-dashboard/app/components/AlertBanner/styles.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.banner {
2+
display: flex;
3+
gap: var(--spacing-large);
4+
border-radius: var(--radius-card-border);
5+
background-color: var(--color-banner-alert);
6+
padding: var(--spacing-large);
7+
8+
.banner-icon {
9+
font-size: var(--font-size-super-large);
10+
}
11+
}

‎manager-dashboard/app/components/CustomOptionsBanner/index.tsx‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎manager-dashboard/app/components/CustomOptionsBanner/styles.css‎

Whitespace-only changes.

‎manager-dashboard/app/views/NewTutorial/index.tsx‎

Lines changed: 60 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ import InputSection from '#components/InputSection';
5555
import Button from '#components/Button';
5656
import NonFieldError from '#components/NonFieldError';
5757
import EmptyMessage from '#components/EmptyMessage';
58-
import CustomOptionsBanner from '#components/CustomOptionsBanner';
58+
import AlertBanner from '#components/AlertBanner';
5959
import {
6060
valueSelector,
6161
labelSelector,
@@ -512,40 +512,67 @@ function NewTutorial(props: Props) {
512512
/>
513513
{(customOptions && customOptions.length > 0) ? (
514514
<div className={styles.customOptionContainer}>
515-
<CustomOptionsBanner />
516-
<div className={styles.customOptionList}>
517-
{customOptions.map((option, index) => (
518-
<ExpandableContainer
519-
key={option.optionId}
520-
header={option.title || `Option ${index + 1}`}
521-
openByDefault={index === customOptions.length - 1}
522-
actions={(
523-
<Button
524-
name={index}
525-
onClick={onOptionRemove}
526-
variant="action"
527-
title="Delete Option"
528-
disabled={submissionPending || projectTypeEmpty}
529-
>
530-
<IoIosTrash />
531-
</Button>
532-
)}
533-
>
534-
<CustomOptionInput
515+
<AlertBanner>
516+
<div className={styles.bannerContent}>
517+
<div className={styles.bannerText}>
518+
While creating options,
519+
please use the values as listed
520+
below for HOT Tasking Manager Geometries
521+
</div>
522+
<div className={styles.indicatorList}>
523+
<div className={styles.indicator}>
524+
0 = No
525+
</div>
526+
<div className={styles.indicator}>
527+
1 = Yes
528+
</div>
529+
<div className={styles.indicator}>
530+
2 = Maybe
531+
</div>
532+
<div className={styles.indicator}>
533+
3 = bad
534+
</div>
535+
</div>
536+
</div>
537+
</AlertBanner>
538+
<div className={styles.customOptionContent}>
539+
<div className={styles.customOptionList}>
540+
{customOptions.map((option, index) => (
541+
<ExpandableContainer
535542
key={option.optionId}
536-
value={option}
537-
index={index}
538-
onChange={setOptionValue}
539-
error={optionsError?.[option.optionId]}
540-
disabled={submissionPending || projectTypeEmpty}
541-
/>
542-
</ExpandableContainer>
543-
))}
543+
header={option.title || `Option ${index + 1}`}
544+
openByDefault={index === customOptions.length - 1}
545+
actions={(
546+
<Button
547+
name={index}
548+
onClick={onOptionRemove}
549+
variant="action"
550+
title="Delete Option"
551+
disabled={
552+
submissionPending
553+
|| projectTypeEmpty
554+
}
555+
>
556+
<IoIosTrash />
557+
</Button>
558+
)}
559+
>
560+
<CustomOptionInput
561+
key={option.optionId}
562+
value={option}
563+
index={index}
564+
onChange={setOptionValue}
565+
error={optionsError?.[option.optionId]}
566+
disabled={submissionPending || projectTypeEmpty}
567+
/>
568+
</ExpandableContainer>
569+
))}
570+
</div>
571+
<CustomOptionPreview
572+
value={customOptions}
573+
lookFor={value.lookFor}
574+
/>
544575
</div>
545-
<CustomOptionPreview
546-
value={customOptions}
547-
lookFor={value.lookFor}
548-
/>
549576
</div>
550577
) : (
551578
<div>No options</div>

‎manager-dashboard/app/views/NewTutorial/styles.css‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,41 @@
2222

2323
.custom-option-container {
2424
display: flex;
25+
flex-direction: column;
2526
gap: var(--spacing-large);
2627

27-
.custom-option-list {
28+
.banner-content {
2829
display: flex;
2930
flex-direction: column;
30-
flex-grow: 1;
3131
gap: var(--spacing-medium);
32+
33+
.banner-text {
34+
color: var(--color-banner-text);
35+
font-size: var(--spacing-medium);
36+
}
37+
.indicator-list {
38+
display: flex;
39+
gap: var(--spacing-medium);
40+
41+
.indicator {
42+
border-radius: var(--radius-badge-border);
43+
background-color: var(--color-backdrop-light);
44+
padding: var(--spacing-small) var(--spacing-medium);
45+
font-size: var(--spacing-medium);
46+
}
47+
}
48+
}
49+
50+
.custom-option-content {
51+
display: flex;
52+
gap: var(--spacing-large);
53+
54+
.custom-option-list {
55+
display: flex;
56+
flex-direction: column;
57+
flex-grow: 1;
58+
gap: var(--spacing-medium);
59+
}
3260
}
3361
}
3462

0 commit comments

Comments
 (0)