feat: select signature color

packages/lib/translations/de/common.po

@@ -140,6 +140,14 @@ msgstr "Genehmiger"
 msgid "Approving"
 msgstr "Genehmigung"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:270
+msgid "Black"
+msgstr ""
+
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:286
+msgid "Blue"
+msgstr ""
+
 #: packages/ui/primitives/document-flow/field-item-advanced-settings.tsx:297
 #: packages/ui/primitives/document-flow/send-document-action-dialog.tsx:58
 msgid "Cancel"
@@ -179,7 +187,7 @@ msgstr "Checkbox-Werte"
 msgid "Clear filters"
 msgstr "Filter löschen"
 
-#: packages/ui/primitives/signature-pad/signature-pad.tsx:256
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:308
 msgid "Clear Signature"
 msgstr "Unterschrift löschen"
 
@@ -312,6 +320,10 @@ msgstr "Globale Empfängerauthentifizierung"
 msgid "Go Back"
 msgstr "Zurück"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:294
+msgid "Green"
+msgstr ""
+
 #: packages/lib/constants/recipient-roles.ts:72
 msgid "I am a signer of this document"
 msgstr "Ich bin ein Unterzeichner dieses Dokuments"
@@ -477,6 +489,10 @@ msgstr "Erhält Kopie"
 msgid "Recipient action authentication"
 msgstr "Empfängeraktion Authentifizierung"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:278
+msgid "Red"
+msgstr ""
+
 #: packages/ui/primitives/document-flow/add-settings.tsx:298
 #: packages/ui/primitives/template-flow/add-template-settings.tsx:332
 msgid "Redirect URL"

packages/lib/translations/de/web.po

@@ -633,6 +633,14 @@ msgstr ""
 msgid "Billing"
 msgstr ""
 
+#: apps/web/src/app/(signing)/sign/[token]/form.tsx:207
+msgid "Black"
+msgstr ""
+
+#: apps/web/src/app/(signing)/sign/[token]/form.tsx:223
+msgid "Blue"
+msgstr ""
+
 #: apps/web/src/app/(dashboard)/settings/security/activity/user-security-activity-data-table.tsx:101
 msgid "Browser"
 msgstr ""
@@ -664,7 +672,7 @@ msgstr ""
 #: apps/web/src/app/(signing)/sign/[token]/document-action-auth-account.tsx:74
 #: apps/web/src/app/(signing)/sign/[token]/document-action-auth-passkey.tsx:164
 #: apps/web/src/app/(signing)/sign/[token]/document-action-auth-passkey.tsx:189
-#: apps/web/src/app/(signing)/sign/[token]/form.tsx:143
+#: apps/web/src/app/(signing)/sign/[token]/form.tsx:144
 #: apps/web/src/app/(signing)/sign/[token]/name-field.tsx:215
 #: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:327
 #: apps/web/src/app/(signing)/sign/[token]/sign-dialog.tsx:110
@@ -751,7 +759,7 @@ msgid "Click to copy signing link for sending to recipient"
 msgstr ""
 
 #: apps/web/src/app/(recipient)/d/[token]/sign-direct-template.tsx:175
-#: apps/web/src/app/(signing)/sign/[token]/form.tsx:107
+#: apps/web/src/app/(signing)/sign/[token]/form.tsx:108
 msgid "Click to insert field"
 msgstr ""
 
@@ -1604,6 +1612,10 @@ msgstr ""
 msgid "Go to your <0>public profile settings</0> to add documents."
 msgstr ""
 
+#: apps/web/src/app/(signing)/sign/[token]/form.tsx:231
+msgid "Green"
+msgstr ""
+
 #: apps/web/src/app/(dashboard)/settings/profile/page.tsx:29
 msgid "Here you can edit your personal details."
 msgstr ""
@@ -2247,7 +2259,7 @@ msgstr ""
 msgid "Please enter a meaningful name for your token. This will help you identify it later."
 msgstr ""
 
-#: apps/web/src/app/(signing)/sign/[token]/form.tsx:127
+#: apps/web/src/app/(signing)/sign/[token]/form.tsx:128
 msgid "Please mark as viewed to complete"
 msgstr ""
 
@@ -2412,6 +2424,10 @@ msgstr ""
 msgid "Recovery codes"
 msgstr ""
 
+#: apps/web/src/app/(signing)/sign/[token]/form.tsx:215
+msgid "Red"
+msgstr ""
+
 #: apps/web/src/app/(signing)/sign/[token]/complete/claim-account.tsx:78
 #: apps/web/src/components/forms/signup.tsx:93
 #: apps/web/src/components/forms/v2/signup.tsx:127

packages/lib/translations/en/common.po

@@ -135,6 +135,14 @@ msgstr "Approver"
 msgid "Approving"
 msgstr "Approving"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:270
+msgid "Black"
+msgstr "Black"
+
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:286
+msgid "Blue"
+msgstr "Blue"
+
 #: packages/ui/primitives/document-flow/field-item-advanced-settings.tsx:297
 #: packages/ui/primitives/document-flow/send-document-action-dialog.tsx:58
 msgid "Cancel"
@@ -174,7 +182,7 @@ msgstr "Checkbox values"
 msgid "Clear filters"
 msgstr "Clear filters"
 
-#: packages/ui/primitives/signature-pad/signature-pad.tsx:256
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:308
 msgid "Clear Signature"
 msgstr "Clear Signature"
 
@@ -307,6 +315,10 @@ msgstr "Global recipient action authentication"
 msgid "Go Back"
 msgstr "Go Back"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:294
+msgid "Green"
+msgstr "Green"
+
 #: packages/lib/constants/recipient-roles.ts:72
 msgid "I am a signer of this document"
 msgstr "I am a signer of this document"
@@ -472,6 +484,10 @@ msgstr "Receives copy"
 msgid "Recipient action authentication"
 msgstr "Recipient action authentication"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:278
+msgid "Red"
+msgstr "Red"
+
 #: packages/ui/primitives/document-flow/add-settings.tsx:298
 #: packages/ui/primitives/template-flow/add-template-settings.tsx:332
 msgid "Redirect URL"

packages/lib/translations/en/web.po

@@ -628,6 +628,14 @@ msgstr "Basic details"
 msgid "Billing"
 msgstr "Billing"
 
+#: apps/web/src/app/(signing)/sign/[token]/form.tsx:207
+msgid "Black"
+msgstr "Black"
+
+#: apps/web/src/app/(signing)/sign/[token]/form.tsx:223
+msgid "Blue"
+msgstr "Blue"
+
 #: apps/web/src/app/(dashboard)/settings/security/activity/user-security-activity-data-table.tsx:101
 msgid "Browser"
 msgstr "Browser"
@@ -659,7 +667,7 @@ msgstr "By enabling 2FA, you will be required to enter a code from your authenti
 #: apps/web/src/app/(signing)/sign/[token]/document-action-auth-account.tsx:74
 #: apps/web/src/app/(signing)/sign/[token]/document-action-auth-passkey.tsx:164
 #: apps/web/src/app/(signing)/sign/[token]/document-action-auth-passkey.tsx:189
-#: apps/web/src/app/(signing)/sign/[token]/form.tsx:143
+#: apps/web/src/app/(signing)/sign/[token]/form.tsx:144
 #: apps/web/src/app/(signing)/sign/[token]/name-field.tsx:215
 #: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:327
 #: apps/web/src/app/(signing)/sign/[token]/sign-dialog.tsx:110
@@ -746,7 +754,7 @@ msgid "Click to copy signing link for sending to recipient"
 msgstr "Click to copy signing link for sending to recipient"
 
 #: apps/web/src/app/(recipient)/d/[token]/sign-direct-template.tsx:175
-#: apps/web/src/app/(signing)/sign/[token]/form.tsx:107
+#: apps/web/src/app/(signing)/sign/[token]/form.tsx:108
 msgid "Click to insert field"
 msgstr "Click to insert field"
 
@@ -1599,6 +1607,10 @@ msgstr "Go to owner"
 msgid "Go to your <0>public profile settings</0> to add documents."
 msgstr "Go to your <0>public profile settings</0> to add documents."
 
+#: apps/web/src/app/(signing)/sign/[token]/form.tsx:231
+msgid "Green"
+msgstr "Green"
+
 #: apps/web/src/app/(dashboard)/settings/profile/page.tsx:29
 msgid "Here you can edit your personal details."
 msgstr "Here you can edit your personal details."
@@ -2242,7 +2254,7 @@ msgstr "Please contact support if you would like to revert this action."
 msgid "Please enter a meaningful name for your token. This will help you identify it later."
 msgstr "Please enter a meaningful name for your token. This will help you identify it later."
 
-#: apps/web/src/app/(signing)/sign/[token]/form.tsx:127
+#: apps/web/src/app/(signing)/sign/[token]/form.tsx:128
 msgid "Please mark as viewed to complete"
 msgstr "Please mark as viewed to complete"
 
@@ -2407,6 +2419,10 @@ msgstr "Recovery code copied"
 msgid "Recovery codes"
 msgstr "Recovery codes"
 
+#: apps/web/src/app/(signing)/sign/[token]/form.tsx:215
+msgid "Red"
+msgstr "Red"
+
 #: apps/web/src/app/(signing)/sign/[token]/complete/claim-account.tsx:78
 #: apps/web/src/components/forms/signup.tsx:93
 #: apps/web/src/components/forms/v2/signup.tsx:127

packages/ui/primitives/signature-pad/signature-pad.tsx

@@ -9,6 +9,13 @@ import type { StrokeOptions } from 'perfect-freehand';
 import { getStroke } from 'perfect-freehand';
 
 import { unsafe_useEffectOnce } from '@documenso/lib/client-only/hooks/use-effect-once';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
 
 import { cn } from '../../lib/utils';
 import { getSvgPathFromStroke } from './helper';
@@ -36,6 +43,7 @@ export const SignaturePad = ({
   const [isPressed, setIsPressed] = useState(false);
   const [lines, setLines] = useState<Point[][]>([]);
   const [currentLine, setCurrentLine] = useState<Point[]>([]);
+  const [selectedColor, setSelectedColor] = useState('black');
 
   const perfectFreehandOptions = useMemo(() => {
     const size = $el.current ? Math.min($el.current.height, $el.current.width) * 0.03 : 10;
@@ -85,6 +93,7 @@ export const SignaturePad = ({
           ctx.restore();
           ctx.imageSmoothingEnabled = true;
           ctx.imageSmoothingQuality = 'high';
+          ctx.fillStyle = selectedColor;
 
           lines.forEach((line) => {
             const pathData = new Path2D(
@@ -129,6 +138,7 @@ export const SignaturePad = ({
 
         ctx.imageSmoothingEnabled = true;
         ctx.imageSmoothingQuality = 'high';
+        ctx.fillStyle = selectedColor;
 
         newLines.forEach((line) => {
           const pathData = new Path2D(
@@ -237,7 +247,7 @@ export const SignaturePad = ({
     >
       <canvas
         ref={$el}
-        className={cn('relative block dark:invert', className)}
+        className={cn('relative block', className)}
         style={{ touchAction: 'none' }}
         onPointerMove={(event) => onMouseMove(event)}
         onPointerDown={(event) => onMouseDown(event)}
@@ -247,6 +257,48 @@ export const SignaturePad = ({
         {...props}
       />
 
+      <div className="absolute right-2 top-2">
+        <Select onValueChange={(value) => setSelectedColor(value)}>
+          <SelectTrigger className="bg-background w-[60px]">
+            <SelectValue placeholder="Color" />
+          </SelectTrigger>
+
+          <SelectContent align="end">
+            <SelectItem value="black">
+              <div className="flex items-center">
+                <div className="flex w-[150px] items-center">
+                  <Trans>Black</Trans>
+                </div>
+              </div>
+            </SelectItem>
+
+            <SelectItem value="red">
+              <div className="flex items-center">
+                <div className="flex w-[150px] items-center">
+                  <Trans>Red</Trans>
+                </div>
+              </div>
+            </SelectItem>
+
+            <SelectItem value="blue">
+              <div className="flex items-center">
+                <div className="flex w-[150px] items-center">
+                  <Trans>Blue</Trans>
+                </div>
+              </div>
+            </SelectItem>
+
+            <SelectItem value="green">
+              <div className="flex items-center">
+                <div className="flex w-[150px] items-center">
+                  <Trans>Green</Trans>
+                </div>
+              </div>
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
       <div className="absolute bottom-4 right-4 flex gap-2">
         <button
           type="button"