Skip to content

Commit 6a365f7

Browse files
prafull-opensignlabsprafull-opensignlabs
committed
style: update widget detail popups
1 parent e4d946e commit 6a365f7

File tree

7 files changed

+45
-93
lines changed

7 files changed

+45
-93
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const AddRoleModal = (props) => {
88
isOpen={props.isModalRole}
99
handleClose={props.handleCloseRoleModal}
1010
>
11-
<div className="addusercontainer">
11+
<div className="h-full py-[10px] px-[20px]">
1212
<form className="flex flex-col" onSubmit={props.handleAddRole}>
1313
<input
1414
value={props.roleName}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -481,7 +481,7 @@ function Header({
481481
}
482482
handleClose={() => setIsDownloading("")}
483483
>
484-
<div className="p-3 md:p-5 text-[13px] md:text-base text-center">
484+
<div className="p-3 md:p-5 text-[13px] md:text-base text-center text-base-content">
485485
{isDownloading === "certificate"}{" "}
486486
<p>
487487
Your completion certificate is being generated. Please wait

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -195,13 +195,13 @@ function PlaceholderCopy(props) {
195195
props.setIsPageCopy(false);
196196
}}
197197
>
198-
<div style={{ height: "100%", padding: 20 }}>
198+
<div className="h-full p-[20px] text-base-content">
199199
{copyType.map((data, key) => {
200200
return (
201-
<div key={key} style={{ display: "flex", flexDirection: "column" }}>
202-
<label key={key} style={{ fontSize: "16px", fontWeight: "500" }}>
201+
<div key={key} className="flex flex-col">
202+
<label className="text-[16px] font-medium">
203203
<input
204-
style={{ accentColor: "red", marginRight: "10px" }}
204+
className="mr-[10px] accent-[red]"
205205
type="radio"
206206
value={data}
207207
onChange={() => setSelectCopyType(data)}

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

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -452,9 +452,7 @@ function RenderPdf({
452452
{/* this component for render pdf document is in middle of the component */}
453453
<div className="flex items-center justify-center">
454454
<Document
455-
onLoadError={() => {
456-
setPdfLoadFail(true);
457-
}}
455+
onLoadError={() => setPdfLoadFail(true)}
458456
loading={"Loading Document.."}
459457
onLoadSuccess={pageDetails}
460458
// ref={pdfRef}'
@@ -501,10 +499,7 @@ function RenderPdf({
501499
>
502500
<div
503501
data-tut="reactourForth"
504-
style={{
505-
border: "0.1px solid #ebe8e8",
506-
width: pdfOriginalWidth
507-
}}
502+
style={{ border: "0.1px solid #ebe8e8", width: pdfOriginalWidth }}
508503
ref={drop}
509504
id="container"
510505
>

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

Lines changed: 37 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -122,15 +122,15 @@ const WidgetNameModal = (props) => {
122122
props.widgetName === textInputWidget
123123
? "pt-0"
124124
: ""
125-
} p-[20px]`}
125+
} p-[20px] text-base-content`}
126126
>
127-
<div className="form-section">
128-
<label htmlFor="name" style={{ fontSize: 13 }}>
127+
<div className="mb-[0.75rem] text-[13px]">
128+
<label htmlFor="name">
129129
Name
130-
<span className="text-[red] text-[13px]"> *</span>
130+
<span className="text-[red]"> *</span>
131131
</label>
132132
<input
133-
className="addUserInput"
133+
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
134134
name="name"
135135
value={formdata.name}
136136
onChange={(e) => handleChange(e)}
@@ -140,14 +140,15 @@ const WidgetNameModal = (props) => {
140140
{(props.defaultdata?.type === textInputWidget ||
141141
props.widgetName === textInputWidget) && (
142142
<>
143-
<div className="form-section">
143+
<div className="mb-[0.75rem]">
144144
<div className="flex items-center gap-1">
145145
<label
146146
htmlFor="textvalidate"
147-
className={
148-
!props.isSubscribe && isEnableSubscription && "disabled"
149-
}
150-
style={{ fontSize: 13 }}
147+
className={`${
148+
!props.isSubscribe && isEnableSubscription
149+
? "bg-opacity-50 pointer-events-none"
150+
: ""
151+
} text-[13px]`}
151152
>
152153
Validation
153154
</label>
@@ -157,45 +158,37 @@ const WidgetNameModal = (props) => {
157158
{!props.isSubscribe && isEnableSubscription && <Upgrade />}
158159
</div>
159160
<div
160-
className={
161-
!props.isSubscribe && isEnableSubscription && "disabled"
162-
}
163-
style={{
164-
display: "flex",
165-
flexDirection: "row",
166-
gap: 10,
167-
marginBottom: "0.5rem"
168-
}}
161+
className={`${
162+
!props.isSubscribe && isEnableSubscription
163+
? "bg-opacity-50 pointer-events-none"
164+
: ""
165+
} flex flex-row gap-[10px] mb-[0.5rem]`}
169166
>
170-
<div style={{ width: "100%", position: "relative" }}>
167+
<div className="w-full relative group">
171168
<input
172-
className="relative z-20 w-[87%] md:w-[92%] p-2.5 border-[1px] border-[#d1d5db] rounded-l-md outline-none text-xs"
169+
className="z-20 relative op-input op-input-bordered rounded-r-none op-input-sm focus:outline-none group-hover:border-base-content w-[87%] md:w-[92%] text-xs"
173170
name="textvalidate"
174171
placeholder="Enter custom regular expression"
175172
value={formdata.textvalidate}
176173
onChange={(e) => handleChange(e)}
177174
// onBlur={() => handleBlurRegex()}
178175
/>
179176
<select
180-
className="validationlist addUserInput"
177+
className="validationlist op-input op-input-bordered op-input-sm focus:outline-none group-hover:border-base-content w-full text-xs"
181178
name="textvalidate"
182179
value={formdata.textvalidate}
183180
onChange={(e) => handleChange(e)}
184181
onBlur={() => handleBlurRegex()}
185182
>
186183
<option
187184
disabled={formdata?.textvalidate}
188-
style={{ fontSize: "13px" }}
185+
className="text-[13px]"
189186
>
190187
Select...
191188
</option>
192189
{inputOpt.map((data, ind) => {
193190
return (
194-
<option
195-
style={{ fontSize: "13px" }}
196-
key={ind}
197-
value={data}
198-
>
191+
<option className="text-[13px]" key={ind} value={data}>
199192
{data}
200193
</option>
201194
);
@@ -205,12 +198,12 @@ const WidgetNameModal = (props) => {
205198
</div>
206199
</div>
207200

208-
<div className="form-section">
209-
<label htmlFor="name" style={{ fontSize: 13 }}>
201+
<div className="mb-[0.75rem]">
202+
<label htmlFor="name" className="text-[13px]">
210203
Default value
211204
</label>
212205
<input
213-
className="addUserInput"
206+
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
214207
name="defaultValue"
215208
value={formdata.defaultValue}
216209
onChange={(e) => handledefaultChange(e)}
@@ -228,37 +221,22 @@ const WidgetNameModal = (props) => {
228221
style={{ fontSize: 12 }}
229222
>
230223
<i
231-
className="fas fa-exclamation-circle"
232-
style={{ color: "#fab005", fontSize: 15 }}
233-
></i>{" "}
224+
className="fas fa-exclamation-circle text-[15px]"
225+
style={{ color: "#fab005" }}
226+
></i>
234227
invalid default value
235228
</div>
236229
)}
237230
</div>
238231
</>
239232
)}
240-
<div className="form-section">
241-
<div
242-
style={{
243-
display: "flex",
244-
flexDirection: "row",
245-
gap: 10,
246-
marginBottom: "0.5rem"
247-
}}
248-
>
233+
<div className="mb-[0.75rem]">
234+
<div className="flex flex-row gap-[10px] mb-[0.5rem]">
249235
{statusArr.map((data, ind) => {
250236
return (
251-
<div
252-
key={ind}
253-
style={{
254-
display: "flex",
255-
flexDirection: "row",
256-
gap: 5,
257-
alignItems: "center"
258-
}}
259-
>
237+
<div key={ind} className="flex flex-row gap-[5px] items-center">
260238
<input
261-
style={{ accentColor: "red", marginRight: "10px" }}
239+
className="mr-[3px] accent-[red]"
262240
type="radio"
263241
name="status"
264242
onChange={() =>
@@ -268,45 +246,28 @@ const WidgetNameModal = (props) => {
268246
formdata.status.toLowerCase() === data.toLowerCase()
269247
}
270248
/>
271-
<div style={{ fontSize: "13px", fontWeight: "500" }}>
272-
{data}
273-
</div>
249+
<div className="text-[13px] font-medium">{data}</div>
274250
</div>
275251
);
276252
})}
277253
</div>
278254
</div>
279255
{(props.defaultdata?.type === textInputWidget ||
280256
props?.widgetName === textInputWidget) && (
281-
<div className="form-section">
282-
<label htmlFor="hint" style={{ fontSize: 13 }}>
257+
<div className="mb-[0.75rem]">
258+
<label htmlFor="hint" className="text-[13px]">
283259
Hint
284260
</label>
285261
<input
286-
className="addUserInput"
262+
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
287263
name="hint"
288264
value={formdata.hint}
289265
onChange={(e) => handleChange(e)}
290266
/>
291267
</div>
292268
)}
293-
<div
294-
style={{
295-
height: 1,
296-
backgroundColor: "#b7b3b3",
297-
width: "100%",
298-
marginBottom: "16px"
299-
}}
300-
></div>
301-
<button
302-
style={{
303-
color: "white",
304-
padding: "5px 20px",
305-
backgroundColor: "#32a3ac"
306-
}}
307-
type="submit"
308-
className="finishBtn"
309-
>
269+
<div className="h-[1px] w-full mb-[16px] bg-[#b7b3b3]"></div>
270+
<button type="submit" className="op-btn op-btn-primary">
310271
Save
311272
</button>
312273
</form>

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1413,7 +1413,6 @@ function PdfRequestFiles() {
14131413
/>
14141414
</div>
14151415
)}
1416-
14171416
<div
14181417
className="relative op-card overflow-hidden flex flex-col md:flex-row justify-between bg-base-300"
14191418
style={{
@@ -1840,7 +1839,6 @@ function PdfRequestFiles() {
18401839
</div>
18411840
</div>
18421841
)}
1843-
18441842
<ModalUi
18451843
isOpen={validateAlert}
18461844
title={"Validation alert"}
@@ -1851,7 +1849,6 @@ function PdfRequestFiles() {
18511849
The input does not meet the criteria set by the regular
18521850
expression.
18531851
</p>
1854-
18551852
<div className="h-[1px] bg-[#9f9f9f] w-full my-[15px]"></div>
18561853
<button
18571854
onClick={() => setValidateAlert(false)}

‎apps/OpenSign/src/styles/AddUser.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,6 @@
9090
background-size: 1rem auto;
9191
}
9292

93-
9493
@media (max-width: 375px) {
9594
.validationlist {
9695
background-position: right 0.5rem top 50%;

0 commit comments

Comments
 (0)