Skip to content

Commit 729d19d

Browse files
prafull-opensignlabsprafull-opensignlabs
committed
style: update css and add email sent gif
1 parent f69caf0 commit 729d19d

File tree

9 files changed

+60
-118
lines changed

9 files changed

+60
-118
lines changed

‎apps/OpenSign/src/assets/gif/mail_sent.gif‎

316 KB
Loading

‎apps/OpenSign/src/components/pdf/AddRoleModal.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const AddRoleModal = (props) => {
3131
<button
3232
onClick={props.handleCloseRoleModal}
3333
type="button"
34-
className="op-btn op-btn-secondary ml-2"
34+
className="op-btn op-btn-ghost ml-2"
3535
>
3636
Close
3737
</button>

‎apps/OpenSign/src/components/pdf/PdfHeader.js‎

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {
88
import "../../styles/signature.css";
99
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
1010
import { useNavigate } from "react-router-dom";
11-
import { themeColor } from "../../constant/const";
1211
import ModalUi from "../../primitives/ModalUi";
1312
import Loader from "../../primitives/Loader";
1413

@@ -80,15 +79,7 @@ function Header({
8079
{pdfUrl && alreadySign ? (
8180
<DropdownMenu.Root>
8281
<DropdownMenu.Trigger asChild>
83-
<div
84-
style={{
85-
color: themeColor,
86-
border: "none",
87-
fontWeight: "650",
88-
fontSize: "16px",
89-
padding: "0px 3px 0px 5px"
90-
}}
91-
>
82+
<div className="op-link op-link-primary no-underline text-[16px] font-semibold pr-[3px] pl-[5px]">
9283
<i className="fa fa-ellipsis-v" aria-hidden="true"></i>
9384
</div>
9485
</DropdownMenu.Trigger>
@@ -183,8 +174,9 @@ function Header({
183174
alertSendEmail();
184175
}
185176
}}
186-
className="border-none font-[650] text-[14px]"
187-
style={{ color: isMailSend ? "gray" : themeColor }}
177+
className={`${
178+
isMailSend ? "" : "op-link-primary"
179+
} op-link no-underline font-[650] text-[14px]`}
188180
data-tut={dataTut4}
189181
>
190182
{completeBtnTitle ? completeBtnTitle : "Send"}
@@ -199,18 +191,14 @@ function Header({
199191
embedWidgetsData();
200192
}
201193
}}
202-
style={{ color: themeColor }}
203-
className="border-none font-[650] text-[14px]"
194+
className="border-none font-[650] text-[14px] op-link op-link-primary no-underline"
204195
>
205196
Finish
206197
</div>
207198
)}
208199
<DropdownMenu.Root>
209200
<DropdownMenu.Trigger asChild>
210-
<div
211-
className="border-none font-[650] text-[18px] px-2 ml-[4px]"
212-
style={{ color: themeColor }}
213-
>
201+
<div className="font-[650] text-[18px] px-2 ml-[4px] op-link op-link-info no-underline">
214202
<i
215203
className="fa fa-ellipsis-v"
216204
aria-hidden="true"

‎apps/OpenSign/src/components/pdf/PlaceholderCopy.js‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, { useState } from "react";
2-
import { themeColor } from "../../constant/const";
32
import ModalUi from "../../primitives/ModalUi";
43
import { randomId, textWidget } from "../../constant/Utils";
54

@@ -214,33 +213,22 @@ function PlaceholderCopy(props) {
214213
);
215214
})}
216215

217-
<div
218-
style={{
219-
height: "1px",
220-
backgroundColor: "#9f9f9f",
221-
width: "100%",
222-
marginTop: "15px",
223-
marginBottom: "15px"
224-
}}
225-
></div>
216+
<div className="flex bg-[#9f9f9f] w-full my-[15px]"></div>
226217
<button
227218
onClick={() => {
228219
handleApplyCopy();
229220
handleUniqueId();
230221
}}
231-
style={{ background: themeColor }}
232222
type="button"
233223
disabled={!selectCopyType}
234-
className="finishBtn"
224+
className="op-btn op-btn-primary"
235225
>
236226
Apply
237227
</button>
238228
<button
239229
type="button"
240-
className="finishBtn cancelBtn"
241-
onClick={() => {
242-
handleUniqueId();
243-
}}
230+
className="op-btn op-btn-ghost"
231+
onClick={() => handleUniqueId()}
244232
>
245233
Cancel
246234
</button>

‎apps/OpenSign/src/components/pdf/SignPad.js‎

Lines changed: 26 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { useRef, useState, useEffect } from "react";
22
import SignatureCanvas from "react-signature-canvas";
3-
import { themeColor } from "../../constant/const";
43

54
function SignPad({
65
isSignPad,
@@ -291,7 +290,7 @@ function SignPad({
291290
<div className="flex flex-row justify-between mt-[3px]">
292291
<div className="flex flex-row justify-between gap-[5px] md:gap-[8px] text-[11px] md:text-base">
293292
{isStamp ? (
294-
<span style={{ color: themeColor }} className="signTab">
293+
<span className="op-link-primary op-link">
295294
{widgetType === "image"
296295
? "Upload image"
297296
: "Upload stamp image"}
@@ -306,22 +305,14 @@ function SignPad({
306305
setIsTab("draw");
307306
setImage();
308307
}}
309-
style={{
310-
color: isTab === "draw" ? themeColor : "#515252",
311-
marginLeft: "2px"
312-
}}
313-
className="signTab"
308+
className={`${
309+
isTab === "draw"
310+
? "op-link-primary"
311+
: "no-underline"
312+
} op-link underline-offset-8 ml-[2px]`}
314313
>
315314
Draw
316315
</span>
317-
318-
<div
319-
className={
320-
isTab === "draw"
321-
? "border-[1.5px] border-[#108783]"
322-
: "border-[1.5px] border-[#ffffff]"
323-
}
324-
></div>
325316
</div>
326317
<div>
327318
<span
@@ -331,21 +322,14 @@ function SignPad({
331322
setIsTab("uploadImage");
332323
setSignatureType("");
333324
}}
334-
style={{
335-
color:
336-
isTab === "uploadImage" ? themeColor : "#515252"
337-
}}
338-
className="signTab"
325+
className={`${
326+
isTab === "uploadImage"
327+
? "op-link-primary"
328+
: "no-underline"
329+
} op-link underline-offset-8 ml-[2px]`}
339330
>
340331
Upload Image
341332
</span>
342-
<div
343-
className={
344-
isTab === "uploadImage"
345-
? "border-[1.5px] border-[#108783]"
346-
: "border-[1.5px] border-[#ffffff]"
347-
}
348-
></div>
349333
</div>
350334
<div>
351335
<span
@@ -356,22 +340,14 @@ function SignPad({
356340
setSignatureType("");
357341
setImage();
358342
}}
359-
style={{
360-
color: isTab === "type" ? themeColor : "#515252",
361-
marginLeft: "2px"
362-
}}
363-
className="signTab"
343+
className={`${
344+
isTab === "type"
345+
? "op-link-primary"
346+
: "no-underline"
347+
} op-link underline-offset-8 ml-[2px]`}
364348
>
365349
Type
366350
</span>
367-
368-
<div
369-
className={
370-
isTab === "type"
371-
? "border-[1.5px] border-[#108783]"
372-
: "border-[1.5px] border-[#ffffff]"
373-
}
374-
></div>
375351
</div>
376352
{!isInitial && defaultSign ? (
377353
<div>
@@ -383,23 +359,14 @@ function SignPad({
383359
setSignatureType("");
384360
setImage();
385361
}}
386-
style={{
387-
color:
388-
isTab === "mysignature"
389-
? themeColor
390-
: "#515252"
391-
}}
392-
className="signTab"
362+
className={`${
363+
isTab === "mysignature"
364+
? "op-link-primary"
365+
: "no-underline"
366+
} op-link underline-offset-8 ml-[2px]`}
393367
>
394368
My Signature
395369
</span>
396-
<div
397-
className={
398-
isTab === "mysignature"
399-
? "border-[1.5px] border-[#108783]"
400-
: "border-[1.5px] border-[#ffffff]"
401-
}
402-
></div>
403370
</div>
404371
) : (
405372
isInitial &&
@@ -413,23 +380,14 @@ function SignPad({
413380
setSignatureType("");
414381
setImage();
415382
}}
416-
style={{
417-
color:
418-
isTab === "mysignature"
419-
? themeColor
420-
: "#515252"
421-
}}
422-
className="signTab"
383+
className={`${
384+
isTab === "mysignature"
385+
? "op-link-primary"
386+
: "no-underline"
387+
} op-link underline-offset-8 ml-[2px]`}
423388
>
424389
My Initials
425390
</span>
426-
<div
427-
className={
428-
isTab === "mysignature"
429-
? "border-[1.5px] border-[#108783]"
430-
: "border-[1.5px] border-[#ffffff]"
431-
}
432-
></div>
433391
</div>
434392
)
435393
)}

‎apps/OpenSign/src/components/shared/fields/SelectSigners.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ const SelectSigners = (props) => {
101101
<p
102102
className={`${
103103
isError ? "text-[red]" : "text-transparent"
104-
} text-[12px] m-[5px]`}
104+
} text-[11px] ml-[6px] my-[2px]`}
105105
>
106106
Please select signer
107107
</p>

‎apps/OpenSign/src/pages/PlaceHolderSign.js‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ import { EmailBody } from "../components/pdf/EmailBody";
4949
import Upgrade from "../primitives/Upgrade";
5050
import Alert from "../primitives/Alert";
5151
import Loader from "../primitives/Loader";
52-
52+
import mail_sent_gif from "../assets/gif/mail_sent.gif";
5353
function PlaceHolderSign() {
5454
const editorRef = useRef();
5555
const navigate = useNavigate();
@@ -1789,19 +1789,27 @@ function PlaceHolderSign() {
17891789
>
17901790
<div className="h-[100%] p-[20px]">
17911791
{mailStatus === "success" ? (
1792-
<p>You have successfully sent mails to all recipients!</p>
1792+
<div className="text-center mb-[10px]">
1793+
<img
1794+
src={mail_sent_gif}
1795+
className="w-[120px] h-[120px] mx-auto"
1796+
/>
1797+
<p>You have successfully sent mails to all recipients!</p>
1798+
{isCurrUser && (
1799+
<p>Do you want to sign documents right now ?</p>
1800+
)}
1801+
</div>
17931802
) : (
17941803
<p>Please setup mail adapter to send mail!</p>
17951804
)}
1796-
{isCurrUser && (
1797-
<p>Do you want to sign documents right now ?</p>
1805+
{!mailStatus && (
1806+
<div className="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div>
17981807
)}
1799-
<div className="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div>
18001808
{isCurrUser && (
18011809
<button
18021810
onClick={() => handleRecipientSign()}
18031811
type="button"
1804-
className="op-btn op-btn-primary"
1812+
className="op-btn op-btn-primary mr-1"
18051813
>
18061814
Yes
18071815
</button>
@@ -1812,7 +1820,7 @@ function PlaceHolderSign() {
18121820
setSignerPos([]);
18131821
}}
18141822
type="button"
1815-
className="finishBtn cancelBtn"
1823+
className="op-btn op-btn-ghost"
18161824
>
18171825
{isCurrUser ? "No" : "Close"}
18181826
</button>
@@ -1833,7 +1841,7 @@ function PlaceHolderSign() {
18331841
setIsShowEmail(false);
18341842
}}
18351843
type="button"
1836-
className="finishBtn cancelBtn"
1844+
className="op-btn op-btn-primary"
18371845
>
18381846
Ok
18391847
</button>
@@ -1992,9 +2000,7 @@ function PlaceHolderSign() {
19922000
aria-disabled
19932001
>
19942002
<div
1995-
style={{
1996-
maxHeight: window.innerHeight - 70 + "px"
1997-
}}
2003+
style={{ maxHeight: window.innerHeight - 70 + "px" }}
19982004
className="overflow-y-auto hide-scrollbar"
19992005
>
20002006
<SignerListPlace
@@ -2057,7 +2063,6 @@ function PlaceHolderSign() {
20572063
</button>
20582064
</div>
20592065
</ModalUi>
2060-
20612066
<LinkUserModal
20622067
handleAddUser={handleAddUser}
20632068
isAddUser={isAddUser}

‎apps/OpenSign/src/primitives/AddContact.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -266,7 +266,7 @@ const AddContact = (props) => {
266266
/>
267267
</div>
268268

269-
<div className="mt-[1rem] flex justify-start gap-2">
269+
<div className="mt-6 flex justify-start gap-2">
270270
<button type="submit" className="op-btn op-btn-primary">
271271
Submit
272272
</button>

‎apps/OpenSign/tailwind.config.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,10 @@ module.exports = {
6161
warning: "#ffbe00",
6262
"warning-content": "#ccd9e8",
6363
error: "#ff0000",
64-
"error-content": "#f3f4f6"
64+
"error-content": "#f3f4f6",
65+
"--rounded-btn": "1.9rem",
66+
"--tab-border": "2px",
67+
"--tab-radius": "0.7rem"
6568
}
6669
}
6770
],

0 commit comments

Comments
 (0)