Merge pull request #533 from OpenSignLabs/premium_alert

This commit is contained in:
Amol
2024-03-26 20:14:41 +05:30
committed by GitHub
17 changed files with 259 additions and 187 deletions
@@ -4,6 +4,7 @@ import Parse from "parse";
import getReplacedHashQuery from "../../constant/getReplacedHashQuery";
import "../../styles/loader.css";
import { useNavigate } from "react-router-dom";
import Tooltip from "../../primitives/Tooltip";
const DashboardCard = (props) => {
const navigate = useNavigate();
@@ -335,7 +336,7 @@ const DashboardCard = (props) => {
props.Data && props.Data.Redirect_type
? "cursor-pointer"
: "cursor-default"
} w-full h-[140px] px-3 pt-4 pb-10 text-white rounded-md shadow overflow-hidden`}
} w-full h-[140px] px-3 pt-4 pb-10 text-white rounded-md shadow overflow-hidden relative`}
>
<div className="flex items-center justify-start gap-5">
<span className="rounded-full bg-black bg-opacity-20 w-[60px] h-[60px] self-start flex justify-center items-center">
@@ -352,6 +353,9 @@ const DashboardCard = (props) => {
</div>
</div>
</div>
<div className="text-xs absolute top-1 right-1">
<Tooltip id={props.Label} iconColor={"white"} message={props?.Data?.tourMessage} />
</div>
</div>
);
};
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
import { themeColor } from "../../constant/const";
import ModalUi from "../../primitives/ModalUi";
import { radioButtonWidget } from "../../constant/Utils";
import PremiumAlertHeader from "../../primitives/PremiumAlertHeader";
function DropdownWidgetOption(props) {
const [dropdownOptionList, setDropdownOptionList] = useState([
"option-1",
@@ -144,21 +145,15 @@ function DropdownWidgetOption(props) {
};
return (
//props.showDropdown
<ModalUi
// styleClass={"dropdownModal"}
isOpen={props.showDropdown}
title={props.title}
showClose={false}
>
<div style={{ height: "100%", padding: 20 }}>
<ModalUi isOpen={props.showDropdown} title={props.title} showClose={false}>
<div className="h-full p-[15px]">
<form
onSubmit={(e) => {
e.preventDefault();
handleSaveOption();
}}
>
<div className="dropdownContainer">
<div>
<label style={{ fontSize: "13px", fontWeight: "600" }}>
Name<span style={{ color: "red", fontSize: 13 }}> *</span>
</label>
@@ -383,17 +378,22 @@ function DropdownWidgetOption(props) {
</div>
)}
</div>
{props.type === "checkbox" && !props.isSignYourself && (
<PremiumAlertHeader
message={
"Field validations are free in beta, this feature will incur a fee later."
}
/>
)}
<div
style={{
height: "1px",
backgroundColor: "#9f9f9f",
width: "100%",
marginTop: "15px",
marginBottom: "15px"
}}
className={`${
props.type === "checkbox" && !props.isSignYourself
? "mb-[15px]"
: "my-[15px]"
} w-full h-[1px] bg-[#9f9f9f]`}
></div>
<button
// onClick={() => handleSaveOption()}
disabled={dropdownOptionList.length === 0 && true}
style={{
background: themeColor,
@@ -3,6 +3,7 @@ import ModalUi from "../../primitives/ModalUi";
import "../../styles/AddUser.css";
import RegexParser from "regex-parser";
import { textInputWidget } from "../../constant/Utils";
import PremiumAlertHeader from "../../primitives/PremiumAlertHeader";
const WidgetNameModal = (props) => {
const [formdata, setFormdata] = useState({
@@ -14,7 +15,7 @@ const WidgetNameModal = (props) => {
});
const [isValid, setIsValid] = useState(true);
const statusArr = ["Required", "Optional"];
const inputOpt = ["email", "number"];
const inputOpt = ["text", "email", "number"];
useEffect(() => {
if (props.defaultdata) {
@@ -70,7 +71,7 @@ const WidgetNameModal = (props) => {
return "/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/";
case "number":
return "/^\\d+$/";
case textInputWidget:
case "text":
return "/^[a-zA-Zs]+$/";
default:
return type;
@@ -98,7 +99,23 @@ const WidgetNameModal = (props) => {
handleClose={props.handleClose && props.handleClose}
title={"Widget info"}
>
<form onSubmit={handleSubmit} style={{ padding: 20 }}>
{(props.defaultdata?.type === textInputWidget ||
props.widgetName === textInputWidget) && (
<PremiumAlertHeader
message={
"Field validations are free in beta, this feature will incur a fee later."
}
/>
)}
<form
onSubmit={handleSubmit}
className={`${
props.defaultdata?.type === textInputWidget ||
props.widgetName === textInputWidget
? "pt-0"
: ""
} p-[20px]`}
>
<div className="form-section">
<label htmlFor="name" style={{ fontSize: 13 }}>
Name
@@ -170,25 +187,22 @@ const WidgetNameModal = (props) => {
name="defaultValue"
value={formdata.defaultValue}
onChange={(e) => handledefaultChange(e)}
onBlur={() =>
isValid === false &&
setFormdata({ ...formdata, defaultValue: "" })
}
autoComplete="off"
onBlur={() => {
if (isValid === false) {
setFormdata({ ...formdata, defaultValue: "" });
setIsValid(true);
}
}}
/>
{isValid === false ? (
<p style={{ color: "Red", fontSize: 8 }}>
{isValid === false && (
<div className="warning defaultvalueWarning" style={{ fontSize: 12 }}>
<i
className="fas fa-exclamation-circle"
style={{ color: "#fab005", fontSize: 15 }}
></i>{" "}
invalid default value
</p>
) : (
<p
style={{
color: "transparent",
fontSize: 10,
margin: "3px 8px"
}}
>
.
</p>
</div>
)}
</div>
</>
@@ -3,6 +3,7 @@ import Select from "react-select";
import AddSigner from "../../AddSigner";
import Modal from "react-modal";
import Parse from "parse";
import Tooltip from "../../../primitives/Tooltip";
function arrayMove(array, from, to) {
array = array.slice();
array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]);
@@ -107,6 +108,12 @@ const SignersInput = (props) => {
<label className="block">
Signers
{props.required && <span className="text-red-500 text-[13px]">*</span>}
<span className="absolute ml-1 text-xs z-50">
<Tooltip
id={"signer-tooltip"}
message={"Begin typing a contact's name to see suggested signers from your saved contacts or add new ones. Arrange the signing order by adding signers in the desired sequence. Use the '+' button to include signers and the 'x' to remove them. Each signer will receive an email prompt to sign the document in the order listed."}
/>
</span>
</label>
<div style={{ display: "flex", gap: 5 }}>
<div style={{ flexWrap: "wrap", width: "100%" }}>
+19 -8
View File
@@ -18,7 +18,8 @@ export default function reportJson(id) {
btnIcon: "fa fa-plus",
redirectUrl: "draftDocument"
}
]
],
helpMsg: "This are documents you have started but have not finalized for sending."
};
// Need your sign report
case "4Hhwbp482K":
@@ -33,7 +34,9 @@ export default function reportJson(id) {
btnIcon: "fa fa-eye",
redirectUrl: "pdfRequestFiles"
}
]
],
helpMsg:
"This is a list of documents that are waiting for your signature"
};
// In progess report
case "1MwEuxLEkF":
@@ -48,7 +51,9 @@ export default function reportJson(id) {
btnIcon: "fa fa-eye",
redirectUrl: "pdfRequestFiles"
}
]
],
helpMsg:
"This is a list of documents you've sent to other parties for signature."
};
// completed documents report
case "kQUoW4hUXz":
@@ -63,7 +68,8 @@ export default function reportJson(id) {
btnIcon: "fa fa-eye",
redirectUrl: "draftDocument"
}
]
],
helpMsg: "This is a list of documents that have been signed by all parties."
};
// declined documents report
case "UPr2Fm5WY3":
@@ -78,7 +84,8 @@ export default function reportJson(id) {
btnIcon: "fa fa-eye",
redirectUrl: "draftDocument"
}
]
],
helpMsg: "This is a list of documents that have been declined by one of the signers."
};
// Expired Documents report
case "zNqBHXHsYH":
@@ -93,7 +100,8 @@ export default function reportJson(id) {
btnIcon: "fa fa-eye",
redirectUrl: "draftDocument"
}
]
],
helpMsg: "This is a list of documents that have reached their expiration date."
};
// Recently sent for signatures report show on dashboard
case "d9k3UfYHBc":
@@ -153,7 +161,8 @@ export default function reportJson(id) {
btnIcon: "fa-solid fa-trash"
}
],
form: "ContactBook"
form: "ContactBook",
helpMsg: "This is a list of contacts/signers added by you. These will appear as suggestions when you try to add signers to a new document."
};
// template report
case "6TeaPr321t":
@@ -175,7 +184,9 @@ export default function reportJson(id) {
btnIcon: "fa fa-plus",
redirectUrl: "template"
}
]
],
helpMsg:
"This is a list of templates that are available to you for creating documents. You can click the 'use' button to create a new document using a template, modify the document & add signers in the next step."
};
default:
return null;
+10 -3
View File
@@ -35,7 +35,7 @@ const Forms = (props) => {
const [formData, setFormData] = useState({
Name: "",
Description: "",
Note: "Please review and sign this document",
Note: "",
TimeToCompleteDays: 15,
SendinOrder: "false"
});
@@ -51,6 +51,7 @@ const Forms = (props) => {
};
useEffect(() => {
handleReset();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.title]);
const handleFileInput = (e) => {
setpercentage(0);
@@ -235,7 +236,10 @@ const Forms = (props) => {
setFormData({
Name: "",
Description: "",
Note: "Please review and sign this document",
Note:
props.title === "Sign Yourself"
? "Note to myself"
: "Please review and sign this document",
TimeToCompleteDays: 15,
SendinOrder: "true"
});
@@ -326,7 +330,10 @@ const Forms = (props) => {
</div>
<div className="text-xs mt-2">
<label className="block">
Title<span className="text-red-500 text-[13px]">*</span>
{props.title === "New Template"
? "Template Title"
: "Document Title"}
<span className="text-red-500 text-[13px]">*</span>
</label>
<input
name="Name"
+9 -1
View File
@@ -5,6 +5,8 @@ import Alert from "../primitives/Alert";
import ModalUi from "../primitives/ModalUi";
import { rejectBtn, submitBtn } from "../constant/const";
import { openInNewTab } from "../constant/Utils";
import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
import Tooltip from "../primitives/Tooltip";
function GenerateToken() {
const [parseBaseUrl] = useState(localStorage.getItem("baseUrl"));
@@ -115,7 +117,13 @@ function GenerateToken() {
</div>
) : (
<div className="bg-white flex flex-col justify-center shadow rounded">
<h1 className="ml-4 mt-3 mb-2 font-semibold">API Token</h1>
<PremiumAlertHeader />
<h1 className="ml-4 mt-3 mb-2 font-semibold">
API Token{" "}
<Tooltip
url={"https://docs.opensignlabs.com/docs/API-docs/opensign-api-v-1"}
/>
</h1>
<ul className="w-full flex flex-col p-2 text-sm">
<li
className={`flex justify-between items-center border-y-[1px] border-gray-300 break-all py-2`}
+17 -85
View File
@@ -13,7 +13,6 @@ const ManageSign = () => {
const [signName, setSignName] = useState("");
const [signature, setSignature] = useState("");
const [warning, setWarning] = useState(false);
const [nameWarning, setNameWarning] = useState(false);
const [isvalue, setIsValue] = useState(false);
const allColor = ["blue", "red", "black"];
const [isLoader, setIsLoader] = useState(true);
@@ -105,9 +104,7 @@ const ManageSign = () => {
e.preventDefault();
const isUrl = image.includes("https");
if (!signName) {
setNameWarning(true);
} else if (!isvalue) {
if (!isvalue) {
setWarning(true);
setTimeout(() => setWarning(false), 1000);
} else {
@@ -222,26 +219,13 @@ const ManageSign = () => {
setIsValue(true);
};
return (
<div
style={{
backgroundColor: "white",
maxHeight: "500px",
overflow: "auto"
}}
>
<div className="relative h-full bg-white flex shadow rounded overflow-auto">
{isLoader && (
<div className="absolute bg-black bg-opacity-75 inset-0 z-50 flex justify-center items-center">
<div style={{ height: "300px" }}>
<div
style={{
marginLeft: "45%",
marginTop: "150px",
fontSize: "45px",
color: "#3dd3e0"
}}
className="loader-37"
></div>
</div>
<div className="absolute bg-black bg-opacity-75 z-50 w-full h-full flex justify-center items-center">
<div
style={{ color: "#3dd3e0" }}
className="loader-37 text-[45px]"
></div>
</div>
)}
{isSuccess && (
@@ -269,61 +253,9 @@ const ManageSign = () => {
paddingBottom: 8
}}
>
Manage Signature
My Signature
</div>
<div style={{ display: "flex", flexDirection: "column" }}>
<label
htmlFor="signName"
style={{
fontSize: 12,
position: "relative",
paddingBottom: 5
}}
>
Signer&apos;s Name
{nameWarning && (
<div
className="warning nameWarning"
style={{ fontSize: 12 }}
onAnimationEnd={() => setNameWarning(false)}
>
<i
className="fas fa-exclamation-circle"
style={{ color: "#fab005", fontSize: 15 }}
></i>{" "}
Please fill input field
</div>
)}
</label>
<input
id="signName"
className="signInputManage"
value={signName}
style={{
border: "1px solid #ccc",
borderRadius: 4,
height: 35,
padding: "6px 12px",
marginBottom: 10,
fontSize: 12
}}
required
onFocus={() => setNameWarning(false)}
onChange={(e) => setSignName(e.target.value)}
/>
<label
htmlFor="imgoverview"
style={{
fontSize: 12,
paddingBottom: 5
}}
>
Signature/Image
</label>
</div>
<div className="signBlock">
<div className="signBlock mt-4">
<div>
<div style={{ position: "relative" }}>
<div
@@ -429,10 +361,10 @@ const ManageSign = () => {
key === 0 && penColor === "blue"
? "2px solid blue"
: key === 1 && penColor === "red"
? "2px solid red"
: key === 2 && penColor === "black"
? "2px solid black"
: "2px solid white"
? "2px solid red"
: key === 2 && penColor === "black"
? "2px solid black"
: "2px solid white"
}}
onClick={() => {
if (key === 0) {
@@ -537,10 +469,10 @@ const ManageSign = () => {
key === 0 && initialPen === "blue"
? "2px solid blue"
: key === 1 && initialPen === "red"
? "2px solid red"
: key === 2 && initialPen === "black"
? "2px solid black"
: "2px solid white"
? "2px solid red"
: key === 2 && initialPen === "black"
? "2px solid black"
: "2px solid white"
}}
onClick={() => {
if (key === 0) {
+3
View File
@@ -12,6 +12,7 @@ const Report = () => {
const [List, setList] = useState([]);
const [isLoader, setIsLoader] = useState(true);
const [reportName, setReportName] = useState("");
const [reporthelp, setReportHelp] = useState("");
const [actions, setActions] = useState([]);
const [heading, setHeading] = useState([]);
const [isNextRecord, setIsNextRecord] = useState(false);
@@ -53,6 +54,7 @@ const Report = () => {
setHeading(json.heading);
setReportName(json.reportName);
setForm(json.form);
setReportHelp(json?.helpMsg)
const currentUser = Parse.User.current().id;
const headers = {
@@ -156,6 +158,7 @@ const Report = () => {
isMoreDocs={isMoreDocs}
docPerPage={docPerPage}
form={form}
report_help={reporthelp}
/>
) : (
<PageNotFound prefix={"Report"} />
+21 -7
View File
@@ -6,6 +6,8 @@ import dp from "../assets/images/dp.png";
import Title from "../components/Title";
import sanitizeFileName from "../primitives/sanitizeFileName";
import axios from "axios";
import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
import Tooltip from "../primitives/Tooltip";
function UserProfile() {
const navigate = useNavigate();
@@ -250,7 +252,7 @@ function UserProfile() {
<span className="font-semibold">Email:</span>{" "}
<span>{UserProfile && UserProfile.email}</span>
</li>
<li className="flex justify-between items-center border-y-[1px] border-gray-300 py-2 break-all">
<li className="flex justify-between items-center border-t-[1px] border-gray-300 py-2 break-all">
<span className="font-semibold">Is Email verified:</span>{" "}
<span>
{UserProfile && UserProfile.emailVerified
@@ -258,10 +260,17 @@ function UserProfile() {
: "Not verified"}
</span>
</li>
<li className="flex justify-between items-center border-y-[1px] border-gray-300 py-2 break-all">
<span className="font-semibold">Disable DocumentId :</span>{" "}
<span>
<label className="relative inline-flex items-center cursor-pointer mb-0">
<li className="border-y-[1px] border-gray-300 break-all">
<div className="flex justify-between items-center py-2">
<span className="font-semibold">
Disable DocumentId :{" "}
<Tooltip url={"https://docs.opensignlabs.com/docs/help/Settings/disabledocumentid"} />{" "}
</span>{" "}
<label
className={`${
editmode ? "cursor-pointer" : ""
} relative inline-flex items-center mb-0`}
>
<input
disabled={editmode ? false : true}
checked={isDisableDocId}
@@ -270,9 +279,14 @@ function UserProfile() {
value=""
className="sr-only peer"
/>
<div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
<div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-1 peer-focus:ring-black rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-black peer-checked:bg-blue-600"></div>
</label>
</span>
</div>
<PremiumAlertHeader
message={
"Disable documentId is free in beta, this feature will incur a fee later."
}
/>
</li>
</ul>
<div className="flex justify-center pt-2 pb-3 md:pt-3 md:pb-4">
+9 -1
View File
@@ -6,6 +6,8 @@ import ModalUi from "../primitives/ModalUi";
import { rejectBtn, submitBtn } from "../constant/const";
import { openInNewTab } from "../constant/Utils";
import Parse from "parse";
import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
import Tooltip from "../primitives/Tooltip";
function Webhook() {
const [parseBaseUrl] = useState(localStorage.getItem("baseUrl"));
@@ -101,7 +103,13 @@ function Webhook() {
</div>
) : (
<div className="bg-white flex flex-col justify-center shadow rounded">
<h1 className="ml-4 mt-3 mb-2 font-semibold">Webhook</h1>
<PremiumAlertHeader />
<h1 className="ml-4 mt-3 mb-2 font-semibold">
Webhook{" "}
<Tooltip
url={"https://docs.opensignlabs.com/docs/API-docs/get-webhook"}
/>
</h1>
<ul className="w-full flex flex-col p-2 text-sm">
<li
className={`flex justify-between items-center border-y-[1px] border-gray-300 break-all py-2`}
@@ -6,6 +6,7 @@ import ModalUi from "./ModalUi";
import AddSigner from "../components/AddSigner";
import { modalSubmitBtnColor, modalCancelBtnColor } from "../constant/const";
import Alert from "./Alert";
import Tooltip from "./Tooltip";
const ReportTable = ({
ReportName,
List,
@@ -15,7 +16,8 @@ const ReportTable = ({
setIsNextRecord,
isMoreDocs,
docPerPage,
form
form,
report_help
}) => {
const navigate = useNavigate();
const [currentPage, setCurrentPage] = useState(1);
@@ -255,7 +257,14 @@ const ReportTable = ({
</Alert>
)}
<div className="flex flex-row items-center justify-between my-2 mx-3 text-[20px] md:text-[23px]">
<div className="font-light">{ReportName}</div>
<div className="font-light">
{ReportName}{" "}
{report_help && (
<span className="text-xs md:text-[13px] font-normal">
<Tooltip message={report_help} />
</span>
)}
</div>
{ReportName === "Templates" && (
<i
onClick={() => navigate("/form/template")}
@@ -0,0 +1,11 @@
import React from "react";
const PremiumAlertHeader = ({ message }) => (
<marquee className="bg-yellow-300 text-black px-2">
{message
? message
: "Currently free in Beta, this feature will incur a fee later."}
</marquee>
);
export default PremiumAlertHeader;
+28 -10
View File
@@ -1,18 +1,36 @@
import React from "react";
// import * as HoverCard from "@radix-ui/react-hover-card";
// import "../styles/opensigndrive.css";
import { Tooltip as ReactTooltip } from "react-tooltip";
const Tooltip = ({ children, message }) => (
<>
<a data-tooltip-id="my-tooltip" data-tooltip-content={message}>
import { openInNewTab } from "../constant/Utils";
const Tooltip = ({ children, id, message, url, iconColor }) =>
url ? (
<button onClick={() => openInNewTab(url)} className="text-center">
{children ? (
children
) : (
<i className="fa-solid fa-question border-[1.5px] px-1.5 py-0.5 rounded-full border-[#33bbff] text-xs text-[#33bbff]"></i>
<i className="fa-solid fa-question text-xs border-[1.5px] px-1 rounded-full border-[#33bbff] text-[#33bbff]"></i>
)}
</a>
<ReactTooltip id="my-tooltip" className="max-w-[200px]" />
</>
);
</button>
) : (
<>
<a
data-tooltip-id={id ? id : "my-tooltip"}
data-tooltip-content={message}
className="z-50"
>
{children ? (
children
) : (
<i
className="fa-solid fa-question text-xs border-[1.5px] px-1 rounded-full border-[#33bbff] text-[#33bbff]"
style={{
borderColor: iconColor ? iconColor : "#33bbff",
color: iconColor ? iconColor : "#33bbff"
}}
></i>
)}
</a>
<ReactTooltip id={id ? id : "my-tooltip"} className="max-w-[200px]" />
</>
);
export default Tooltip;
+58
View File
@@ -101,4 +101,62 @@
.validationlist {
background-position: right 1rem top 50%;
}
}
.warning {
position: absolute;
padding: 5px;
border: 1px solid black;
background: white;
width: 250px;
border-radius: 5px;
animation: inAnimation 1s ease-in-out;
z-index: 1;
}
.defaultvalueWarning {
position: absolute;
left: 20px;
}
.defaultvalueWarning::before {
content: "";
width: 0px;
height: 0px;
border-style: outset;
border-width: 0px 10px 10px 10px;
border-color: transparent transparent black transparent;
display: inline-block;
position: absolute;
top: -29%;
left: 0;
right: 75%;
margin: 0 auto;
}
@keyframes inAnimation {
0% {
opacity: 0;
visibility: hidden;
}
25% {
opacity: 1;
visibility: visible;
}
50% {
opacity: 1;
visibility: visible;
}
75% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 1;
visibility: visible;
}
}
-21
View File
@@ -18,27 +18,6 @@
z-index: 1;
}
.nameWarning {
position: absolute;
bottom: -70px;
left: 10px;
}
.nameWarning::before {
content: "";
width: 0px;
height: 0px;
border-style: outset;
border-width: 0px 10px 10px 10px;
border-color: transparent transparent black transparent;
display: inline-block;
position: absolute;
top: -29%;
left: 0;
right: 75%;
margin: 0 auto;
}
.signWarning {
bottom: 70px;
left: 50px;
-11
View File
@@ -19,17 +19,6 @@
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAASElEQVR4nGNgwAMkJSUbpKSkOvCpIaT5PxSTbogUQjMYMwxeIIXmVFIxA8UGDDyQGg0DnIDi6JKUlCxHMqCeZAOghjSAMD5FAKfeaURdUFxCAAAAAElFTkSuQmCC"), auto;
}
.dropdownContainer {
display: flex;
flex-direction: column;
overflow-y: scroll;
max-height: 250px;
}
.dropdownContainer::-webkit-scrollbar {
display: none;
}
.react-datepicker__input-container {
position: initial !important;
}