WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-09-02 05:08:57 +02:00
Code Issues Packages Projects Releases Wiki Activity

style: update ui design of my signature page

Browse Source
This commit is contained in:
prafull-opensignlabs
2024-06-21 20:18:37 +05:30
parent 56d5091b96
commit 1d6655eafe
1 changed files with 20 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/OpenSign/src/pages/Managesign.js
+20 -53
View File
@@ -228,12 +228,7 @@ const ManageSign = () => {
}
}
};
const handleSignatureBtn = () => {
if (imageRef.current) {
imageRef.current.value = "";
}
setImage("");
};
const handleUploadBtn = () => {
imageRef.current.click();
};
@@ -251,27 +246,13 @@ const ManageSign = () => {
{isAlert?.message && <Alert type={isAlert.type}>{isAlert.message}</Alert>}
<div className="relative w-full pr-[10px]">
<div className="m-[20px]">
<div className="font-[700] text-[15px] pb-[8px]">My Signature</div>
<div className=" flex flex-col md:flex-row gap-0 md:gap-[12px] mt-4">
<div className="text-[20px] font-semibold mb-3">My Signature</div>
<div className="flex flex-col md:flex-row gap-0 md:gap-[12px]">
<div>
<div className="relative">
<div className="flex flex-row justify-between w-1/2 pl-[10px]">
<div className="flex flex-row justify-around items-center gap-[10px] mb-[10px]">
<>
<span
onClick={() => handleSignatureBtn()}
className="signature"
>
Signature
</span>
</>
<span
onClick={() => handleUploadBtn()}
className="signature min-w-[105px]"
>
Upload Image
</span>
<span className="font-medium select-none">Signature</span>
<input
type="file"
onChange={onImageChange}
@@ -308,19 +289,10 @@ const ManageSign = () => {
dotSize={1}
/>
)}
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between"
}}
className="penContainerDefault"
>
<div className="penContainerDefault flex flex-row justify-between">
<div>
{!image && (
<div
style={{ display: "flex", flexDirection: "row" }}
>
<div className="flex flex-row">
{allColor.map((data, key) => {
return (
<i
@@ -355,7 +327,14 @@ const ManageSign = () => {
</div>
)}
</div>
<div>
<div className="flex flex-row gap-2">
<div
type="button"
className="op-link"
onClick={() => handleUploadBtn()}
>
Upload image
</div>
<div
type="button"
className="op-link"
@@ -367,33 +346,21 @@ const ManageSign = () => {
</div>
</div>
{warning && (
<div
className="warning signWarning"
style={{ fontSize: 12 }}
>
<i
className="fa-light fa-exclamation-circle"
style={{ color: "#fab005", fontSize: 15 }}
></i>{" "}
<div className="warning signWarning text-[12px]">
<i className="fa-light fa-exclamation-circle text-[#fab005] text-[15px] mr-[4px]"></i>
Please upload signature/Image
</div>
)}
</div>
</div>
</div>
<div style={{ position: "relative" }}>
<div style={{ margin: "6px 5px 18px" }}>
<span className="signature">Initials</span>
<div className="relative">
<div className="mb-[10px]">
<span className="font-medium select-none">Initials</span>
</div>
<div>
{isInitials ? (
<div
style={{
position: "relative",
border: "2px solid #888"
}}
className="intialSignature"
>
<div className="intialSignature relative border-[1px] border-[#888]">
<img
alt="inititals"
src={Initials}