Merge pull request #863 from OpenSignLabs/resolve_stage

feat: update design of signers Ui, style of some buttons and update primary, neutral color
This commit is contained in:
Amol
2024-06-18 16:38:41 +05:30
committed by GitHub
11 changed files with 95 additions and 55 deletions
+1 -1
View File
@@ -115,7 +115,7 @@ const Header = ({ showSidebar }) => {
{!isSubscribe && (
<div>
<button
className="text-xs bg-[#002864] p-2 text-white rounded shadow"
className="text-xs md:text-sm shadow op-btn op-btn-outline op-btn-sm md:op-btn-md op-btn-accent"
onClick={() => navigate("/subscription")}
>
Upgrade Now
@@ -321,7 +321,7 @@ function DriveBody(props) {
<tr onClick={() => handleOnclikFolder(data)}>
<td className="cursor-pointer flex items-center">
<i
className="fa fa-folder mr-[8px] text-[26px] text-[#f0ad26]"
className="fa fa-folder mr-[8px] text-[26px] op-text-secondary"
aria-hidden="true"
></i>
<span className="text-[12px] font-medium">{data.Name}</span>
@@ -334,7 +334,7 @@ function DriveBody(props) {
) : (
<tr onClick={() => checkPdfStatus(data)}>
<td className="cursor-pointer flex items-center">
<i className="fa-solid fa-file-lines mr-[8px] text-[26px] text-neutral"></i>
<i className="fa-solid fa-file-lines mr-[8px] text-[26px] op-text-primary"></i>
<span className="text-[12px] font-medium">{data.Name}</span>
</td>
<td>{createddate}</td>
@@ -364,7 +364,7 @@ function DriveBody(props) {
className="w-full h-full"
/> */}
<i
className="fa-solid fa-folder text-[100px] mx-auto text-secondary"
className="fa-solid fa-folder text-[100px] mx-auto op-text-secondary"
onClick={() => handleOnclikFolder(data)}
></i>
{rename === data.objectId ? (
@@ -118,7 +118,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
<Loader />
</div>
)}
<h1 className="text-base font-semibold">Create Folder</h1>
<h1 className="text-base font-semibold mt-[0.4rem]">Create Folder</h1>
<div className="text-xs mt-2">
<label className="block">
Name<span className="text-red-500 text-[13px]">*</span>
@@ -44,12 +44,12 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
const FolderQuery = new Parse.Query(folderCls);
if (folderPtr) {
FolderQuery.equalTo("Folder", folderPtr);
FolderQuery.equalTo("Type", "Folder");
FolderQuery.notEqualTo("IsArchive", true);
FolderQuery.descending("Type");
} else {
FolderQuery.doesNotExist("Folder");
FolderQuery.equalTo("Type", "Folder");
FolderQuery.notEqualTo("IsArchive", true);
FolderQuery.descending("Type");
}
const res = await FolderQuery.find();
@@ -220,7 +220,7 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
handleClose={handleCancel}
>
<div className="w-full min-w-[300px] md:min-w-[500px] max-w-[500px] px-3">
<div className="py-2 text-[#ac4848] text-[14px] font-[500]">
<div className="pt-1 text-[#ac4848] text-[14px] font-[500]">
<span
className="cursor-pointer"
title="OpenSign™ Drive"
@@ -241,21 +241,31 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
{" / "}
</React.Fragment>
))}
<hr />
<hr className="bg-[#8a8a8a] mt-[0.750rem]" />
</div>
<div className="mt-2 mb-3">
<div className="mb-2">
<div className="max-h-[210px] overflow-auto">
{!isAdd &&
folderList.length > 0 &&
folderList.map((folder) => (
<div
key={folder.Name}
className="border-b-[1px] border-[#8a8a8a] px-2 py-2 mb-2 cursor-pointer "
onClick={() => handleSelect(folder)}
key={folder.objectId}
className={`${
folder.Type === "Folder"
? "cursor-pointer"
: "cursor-default"
} border-b-[1px] border-[#8a8a8a] py-2 mb-0.5"`}
onClick={() =>
folder.Type === "Folder" && handleSelect(folder)
}
>
<div className="flex items-center gap-2">
<i
className="fa fa-folder text-neutral text-[1.4rem]"
className={`${
folder.Type === "Folder"
? "fa fa-folder op-text-secondary"
: "fa fa-file op-text-primary"
} text-[1.4rem]`}
aria-hidden="true"
></i>
<span className="font-semibold">{folder.Name}</span>
+19
View File
@@ -50,3 +50,22 @@ body {
@apply text-warning;
}
/* CSS for scrollbar customization */
* {
scrollbar-width: thin; /* For Firefox */
scrollbar-color: gray; /* For Firefox */
}
/* For webkit-based browsers like Chrome, Safari */
*::-webkit-scrollbar {
width: 5px;
}
*::-webkit-scrollbar-track {
background-color: transparent;
}
*::-webkit-scrollbar-thumb {
background-color: gray;
border-radius: 10px;
}
+1 -1
View File
@@ -191,7 +191,7 @@ function GenerateToken() {
<button
type="button"
onClick={() => navigation("/subscription")}
className="rounded hover:bg-[#15b4e9] border-[1px] border-[#15b4e9] text-[#15b4e9] hover:text-white px-11 py-2 text-xs md:text-base focus:outline-none"
className="text-xs md:text-sm shadow op-btn op-btn-outline op-btn-accent"
>
Upgrade Now
</button>
+1 -1
View File
@@ -175,7 +175,7 @@ function Webhook() {
<button
type="button"
onClick={() => navigation("/subscription")}
className="rounded hover:bg-[#15b4e9] border-[1px] border-[#15b4e9] text-[#15b4e9] hover:text-white px-11 py-2 text-xs md:text-base focus:outline-none"
className="text-xs md:text-sm shadow op-btn op-btn-outline op-btn-accent"
>
Upgrade Now
</button>
@@ -1303,46 +1303,56 @@ const ReportTable = (props) => {
))}
</div>
{isViewShare[item.objectId] && (
<div className="fixed z-[999] inset-0 w-full h-full bg-black bg-opacity-[75%]">
<div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-sm bg-white rounded shadow-md max-h-90 min-w-[90%] md:min-w-[400px] overflow-y-auto max-h-[340px] md:max-h-[400px] hide-scrollbar">
<ModalUi
isOpen
showHeader={
props.ReportName === "Templates" && true
}
title={"Signers"}
reduceWidth={"md:max-w-[450px]"}
handleClose={() => setIsViewShare({})}
>
{props.ReportName !== "Templates" && (
<div
className="cursor-pointer absolute text-white text-[22px] font-medium rounded-full z-50 top-1 right-3"
className="op-btn op-btn-sm op-btn-circle op-btn-ghost text-base-content absolute right-2 top-1 z-40"
onClick={() => setIsViewShare({})}
>
&times;
</div>
<table className="table-auto w-full">
<thead className="text-white h-[38px] sticky top-0 bg-[#32a3ac]">
<tr>
)}
<table className="op-table w-full overflow-auto">
<thead className="h-[38px] sticky top-0 text-base-content text-sm pt-[15px] px-[20px]">
<tr>
{props.ReportName === "Templates" && (
<th className="p-2 pl-3 w-[30%]">
Roles
</th>
)}
<th className="pl-3 py-2">
{props.ReportName === "Templates"
? "Email"
: "Signers"}
</th>
</tr>
</thead>
<tbody>
{item.Placeholders.map((x, i) => (
<tr key={i} className="text-sm font-medium">
{props.ReportName === "Templates" && (
<th className="p-2 pl-3">Roles</th>
)}
<th className="p-2">Signers</th>
</tr>
</thead>
<tbody>
{item.Placeholders.map((x, i) => (
<tr
key={i}
className="text-sm font-normal text-black odd:bg-white even:bg-gray-200"
>
{props.ReportName === "Templates" && (
<td className="text-[12px] p-2 pl-3">
{x.Role && x.Role}
</td>
)}
<td className="text-[12px] p-2 break-all">
{x.email
? x.email
: x?.signerPtr?.Email || "-"}
<td className="text-[12px] p-2 pl-3 w-[30%]">
{x.Role && x.Role}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
)}
<td className="pl-3 text-[12px] py-2 break-all">
{x.email
? x.email
: x?.signerPtr?.Email || "-"}
</td>
</tr>
))}
</tbody>
</table>
</ModalUi>
)}
{isDeleteModal[item.objectId] && (
<ModalUi
+3 -2
View File
@@ -12,14 +12,15 @@ const ModalUi = ({
reduceWidth,
showHeaderMessage
}) => {
const width = reduceWidth;
return (
<>
{isOpen && (
<dialog className="op-modal op-modal-open">
<div
className={`${
reduceWidth || "md:min-w-[500px]"
} op-modal-box p-0 max-h-90 min-w-[90%] overflow-y-auto hide-scrollbar text-sm`}
width || "md:min-w-[500px]"
} op-modal-box p-0 max-h-90 overflow-y-auto hide-scrollbar text-sm`}
>
{showHeader && (
<>
+1 -1
View File
@@ -9,7 +9,7 @@ function Upgrade({ message }) {
const url = window.location.origin + "/subscription";
openInNewTab(url);
}}
className="text-blue-800 text-sm cursor-pointer underline"
className="op-link op-link-accent text-sm"
>
{message ? message : "Upgrade now"}
</span>
+2 -2
View File
@@ -42,13 +42,13 @@ module.exports = {
"sunset",
{
opensigncss: {
primary: "#034687",
primary: "#002864",
"primary-content": "#ccd9e8",
secondary: "#151B25",
"secondary-content": "#cacccf",
accent: "#E10032",
"accent-content": "#ffd8d5",
neutral: "#F0D7D9",
neutral: "#DBE8E1",
"neutral-content": "#141111",
"base-100": "#ffffff",
"base-200": "#dedede",