fix: text input signature font-family for mobile view

This commit is contained in:
RaktimaNXG
2024-01-02 10:03:06 +05:30
parent 852a3dc8bb
commit ee609061ed
2 changed files with 17 additions and 10 deletions
@@ -32,11 +32,10 @@ function SignPad({
const [signValue, setSignValue] = useState("");
const [textWidth, setTextWidth] = useState(null);
const fontOptions = [
{ value: "Lucida Handwriting" },
{ value: "Segoe Script" },
{ value: "Harrington" },
{ value: "cursive" }
{ value: "Fasthand" },
{ value: "Dancing Script" },
{ value: "Cedarville Cursive" },
{ value: "Delicious Handrawn" }
// Add more font options as needed
];
const [fontSelect, setFontSelect] = useState(fontOptions[0].value);
@@ -153,7 +152,7 @@ function SignPad({
// Create a canvas with the calculated width
const canvas = document.createElement("canvas");
canvas.width = textWidth * pixelRatio + 20 * pixelRatio;
canvas.width = textWidth * pixelRatio + 30 * pixelRatio;
canvas.height = 20 * pixelRatio; // You can adjust the height as needed
setTextWidth(textWidth * pixelRatio);
// Draw the text content on the canvas
@@ -164,7 +163,6 @@ function SignPad({
// Convert the canvas to image data
const dataUrl = canvas.toDataURL("image/png");
setSignature(dataUrl);
};
@@ -199,8 +197,6 @@ function SignPad({
justifyContent: "space-around",
alignItems: "end",
gap: 10
// background: themeColor(),
}}
>
{isStamp ? (
@@ -1,3 +1,8 @@
@import url('https://fonts.googleapis.com/css2?family=Fasthand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Delicious+Handrawn&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap');
.signatureCanvas {
border: 2px solid #888;
background-color: rgb(255, 255, 255);
@@ -810,6 +815,12 @@ option {
.mobileHead {
display: flex;
}
.signTab {
font-weight: 500 !important;
font-size: 10px !important;
}
}
@@ -868,7 +879,7 @@ option {
font-weight: 500 !important;
font-size: 10px !important;
font-size: 8px !important;
}
.uploadImgLogo {