feat: implement daisy ui in forms

This commit is contained in:
prafull-opensignlabs
2024-06-06 18:36:31 +05:30
parent 6721b334cf
commit 8ecdbc43a3
9 changed files with 39 additions and 54 deletions
+8 -8
View File
@@ -58,7 +58,7 @@
"@babel/runtime-corejs2": "^7.24.6",
"autoprefixer": "^10.4.19",
"commitizen": "^4.3.0",
"daisyui": "^4.11.1",
"daisyui": "^4.12.2",
"eslint": "^8.57.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.34.1",
@@ -66,7 +66,7 @@
"postcss": "^8.4.38",
"prettier": "^2.8.8",
"pretty-quick": "^3.3.1",
"tailwindcss": "^3.4.3"
"tailwindcss": "^3.4.4"
}
},
"node_modules/@alloc/quick-lru": {
@@ -9305,9 +9305,9 @@
}
},
"node_modules/daisyui": {
"version": "4.11.1",
"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.11.1.tgz",
"integrity": "sha512-obT9CUbQdW6eoHwSeT5VwaRrWlwrM4OT5qlfdJ0oQlSIEYhwnEl2+L2fwu5PioLbitwuMdYC2X8I1cyy8Pf6LQ==",
"version": "4.12.2",
"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.2.tgz",
"integrity": "sha512-ed3EFwPRLN+9+/MYPRB1pYjk6plRCBMobfBdSeB3voAS81KdL2pCKtbwJfUUpDdOnJ0F8T6oRdVX02P6UCD0Hg==",
"dev": true,
"dependencies": {
"css-selector-tokenizer": "^0.8",
@@ -22745,9 +22745,9 @@
"integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
},
"node_modules/tailwindcss": {
"version": "3.4.3",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",
"integrity": "sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==",
"version": "3.4.4",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz",
"integrity": "sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==",
"dependencies": {
"@alloc/quick-lru": "^5.2.0",
"arg": "^5.0.2",
+2 -2
View File
@@ -88,7 +88,7 @@
"@babel/runtime-corejs2": "^7.24.6",
"autoprefixer": "^10.4.19",
"commitizen": "^4.3.0",
"daisyui": "^4.11.1",
"daisyui": "^4.12.2",
"eslint": "^8.57.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.34.1",
@@ -96,7 +96,7 @@
"postcss": "^8.4.38",
"prettier": "^2.8.8",
"pretty-quick": "^3.3.1",
"tailwindcss": "^3.4.3"
"tailwindcss": "^3.4.4"
},
"overrides": {
"nth-check": "$nth-check"
+1 -1
View File
@@ -75,7 +75,7 @@ function App() {
};
return (
<div className="bg-[#eef1f5]">
<div className="bg-base-200">
{isloading ? (
<Loader />
) : (
@@ -174,7 +174,7 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
<div className="relative max-w-sm">
<div
onClick={() => SetIsOpen(true)}
className=" cursor-pointer rounded px-[20px] py-[20px] bg-white border border-gray-200 shadow flex max-w-sm gap-8 items-center"
className=" cursor-pointer rounded px-[20px] py-[20px] bg-base-100 border-[1px] border-base-200 shadow flex max-w-sm gap-8 items-center"
>
<div>
<i
@@ -117,8 +117,8 @@ const SignersInput = (props) => {
/>
</span>
</label>
<div style={{ display: "flex", gap: 5 }}>
<div style={{ flexWrap: "wrap", width: "100%" }}>
<div className="flex gap-x-[5px]">
<div className="w-full">
<Select
onSortEnd={onSortEnd}
distance={4}
@@ -128,6 +128,18 @@ const SignersInput = (props) => {
onChange={onChange}
closeMenuOnSelect={false}
required={props.required}
styles={{
control: (baseStyles) => ({
...baseStyles,
backgroundColor: "inherit",
borderRadius: 10,
borderColor: "current"
}),
option: (baseStyles) => ({
...baseStyles,
backgroundColor: "inherit"
})
}}
/>
</div>
<div
@@ -135,7 +147,7 @@ const SignersInput = (props) => {
setIsModel(true);
openModal();
}}
className="cursor-pointer rounded border-[1px] border-[#ccc] min-h-[38px] min-w-[48px] flex justify-center items-center"
className="cursor-pointer border-[1px] opinut opinput-bordered min-h-[38px] min-w-[48px] flex justify-center items-center"
>
<i className="fas fa-plus"></i>
</div>
+3 -3
View File
@@ -3,7 +3,7 @@ import { NavLink } from "react-router-dom";
const Menu = ({ item, isOpen, closeSidebar }) => {
return (
<li key={item.title} role="none">
<li key={item.title} role="none" className="my-0.5">
<NavLink
to={
item.pageType
@@ -12,8 +12,8 @@ const Menu = ({ item, isOpen, closeSidebar }) => {
}
className={({ isActive }) =>
`${
isActive ? " bg-base-300" : ""
} flex items-center text-left p-3 lg:p-4 hover:text-base-content hover:bg-base-300 hover:no-underline focus:outline-none`
isActive ? " bg-base-300 text-base-content" : ""
} flex items-center text-left p-3 lg:p-4 text-base-content hover:text-base-content focus:bg-base-300 hover:bg-base-300 hover:no-underline focus:outline-none`
}
onClick={closeSidebar}
tabIndex={isOpen ? 0 : -1}
@@ -4,10 +4,10 @@ import { NavLink } from "react-router-dom";
const Submenu = ({ item, closeSidebar, toggleSubmenu, submenuOpen }) => {
const { title, icon, children } = item;
return (
<li role="none">
<li role="none" className="my-0.5">
<button
onClick={() => toggleSubmenu(item.title)}
className="flex items-center text-left p-3 lg:p-4 focus:outline-none hover:text-base-content "
className="flex items-center text-left p-3 lg:p-4 text-base-content hover:text-base-content focus:bg-base-300 hover:bg-base-300 hover:no-underline focus:outline-none "
aria-expanded={submenuOpen}
aria-haspopup="true"
aria-controls={`submenu-${title}`}
@@ -28,7 +28,7 @@ const Submenu = ({ item, closeSidebar, toggleSubmenu, submenuOpen }) => {
{submenuOpen[item.title] && (
<ul id={`submenu-${title}`} role="menu" aria-label={`${title} submenu`}>
{children.map((childItem) => (
<li key={childItem.title} role="none">
<li key={childItem.title} role="none" className="my-0.5">
<NavLink
to={
childItem.pageType
@@ -37,8 +37,8 @@ const Submenu = ({ item, closeSidebar, toggleSubmenu, submenuOpen }) => {
}
className={({ isActive }) =>
`${
isActive ? "bg-base-300" : ""
} flex items-center text-left pl-6 md:pl-8 py-2 text-sm cursor-pointer hover:text-base-content focus:outline-none hover:no-underline`
isActive ? "bg-base-300 text-base-content" : ""
} flex items-center text-left pl-6 md:pl-8 py-2 text-sm cursor-pointer text-base-content hover:text-base-content focus:bg-base-300 hover:bg-base-300 hover:no-underline focus:outline-none`
}
onClick={closeSidebar}
role="menuitem"
+1 -1
View File
@@ -277,7 +277,7 @@ const HomeLayout = () => {
id="renderList"
className="relative h-screen flex flex-col justify-between w-full overflow-y-auto"
>
<div className="bg-[#eef1f5] p-3">{<Outlet />}</div>
<div className="bg-base-200 p-3">{<Outlet />}</div>
<div className="z-30">
<Footer />
</div>
+3 -30
View File
@@ -561,7 +561,7 @@ const Forms = (props) => {
setFormData((prev) => ({ ...prev, autoreminder: !formData.autoreminder }));
};
return (
<div className="shadow-md rounded my-2 p-3 bg-[#ffffff] md:border-[1px] md:border-gray-600/50">
<div className="shadow-md rounded my-2 p-3 bg-base-100 text-base-content md:border-[1px] md:border-gray-600/50">
<Title title={props?.title} />
{isAlert && (
<Alert type={isErr ? "danger" : "success"}>
@@ -629,12 +629,12 @@ const Forms = (props) => {
style={{ width: `${percentage}%` }}
></div>
</div>
<span className="text-black text-sm">{percentage}%</span>
<span className="text-base-content text-sm">{percentage}%</span>
</div>
)}
{isDecrypting && (
<div className="flex items-center gap-x-2">
<span className="text-black text-sm">
<span className="text-base-content text-sm">
Decrypting pdf please wait...
</span>
</div>
@@ -671,7 +671,6 @@ const Forms = (props) => {
<input
type="file"
className="opfile-input opfile-input-bordered opfile-input-sm w-full text-xs"
// className="bg-white px-2 py-1.5 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
onChange={(e) => handleFileInput(e)}
ref={inputFileRef}
accept={
@@ -700,7 +699,6 @@ const Forms = (props) => {
<input
name="Name"
className="opinput opinput-bordered w-full opinput-sm text-xs"
// className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
value={formData.Name}
onChange={(e) => handleStrInput(e)}
required
@@ -711,7 +709,6 @@ const Forms = (props) => {
<input
name="Description"
className="opinput opinput-bordered w-full opinput-sm text-xs"
// className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
value={formData.Description}
onChange={(e) => handleStrInput(e)}
/>
@@ -730,7 +727,6 @@ const Forms = (props) => {
<input
name="Note"
className="opinput opinput-bordered w-full opinput-sm text-xs"
// className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
value={formData.Note}
onChange={(e) => handleStrInput(e)}
required
@@ -753,7 +749,6 @@ const Forms = (props) => {
type="number"
name="TimeToCompleteDays"
className="opinput opinput-bordered w-full opinput-sm text-xs"
// className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
value={formData.TimeToCompleteDays}
onChange={(e) => handleStrInput(e)}
required
@@ -791,7 +786,6 @@ const Forms = (props) => {
<li>
<span className="font-bold">Yes:</span>
<span>
{" "}
Selecting this option will send the signing
request to the first signer initially. Once the
first signer completes their part, the next
@@ -864,22 +858,6 @@ const Forms = (props) => {
Auto reminder{" "}
{!isSubscribe && isEnableSubscription && <Upgrade />}
</span>
{/* <label
className={`${
isSubscribe || !isEnableSubscription
? "cursor-pointer "
: "pointer-events-none opacity-50"
} relative block items-center mb-0`}
>
<input
checked={formData.autoreminder}
onChange={handleAutoReminder}
type="checkbox"
value=""
className="sr-only peer"
/>
<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 mt-2"></div>
</label> */}
<label
className={`${
isSubscribe || !isEnableSubscription
@@ -906,7 +884,6 @@ const Forms = (props) => {
value={formData.remindOnceInEvery}
name="remindOnceInEvery"
className="opinput opinput-bordered w-full opinput-sm text-xs"
// className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
onChange={handleStrInput}
required
/>
@@ -919,9 +896,6 @@ const Forms = (props) => {
className={`${
isSubmit ? "cursor-progress" : ""
} opbtn opbtn-primary`}
// className={`${
// isSubmit && "cursor-progress"
// } bg-[#1ab6ce] rounded-sm shadow-md text-[13px] font-semibold uppercase text-white py-1.5 px-2.5 focus:outline-none`}
type="submit"
disabled={isSubmit}
>
@@ -929,7 +903,6 @@ const Forms = (props) => {
</button>
<div
className="opbtn opbtn-neutral"
// className="cursor-pointer bg-[#188ae2] rounded-sm shadow-md text-[13px] font-semibold uppercase text-white py-1.5 px-2.5 text-center ml-[2px] focus:outline-none"
onClick={() => handleReset()}
>
Reset