feat: add options to customize qr code styles and add logos

[akhileshthite]

Description:

Integrate the QR code styling library (referenced below) to the DScan extension, allowing users to customize the styles of QR codes (e.g., rounded dots) and add logos in the center. This enhancement will improve user experience by providing aesthetically pleasing and branded QR codes.

Library: https://github.com/kozakdenys/qr-code-styling

Task:

1. QR code library:
   • Update QR Code Generation Library: Transition from the current davidshimjs-qrcodejs library to the latest qr-code-styling library for QR code generation. An example of the current implementation:

Copy code
const createQRCodeFor = (identifier, dimension) => {
  return new QRCode(identifier, {
    width: dimension,
    height: dimension,
    colorDark: "#000000", // default
    colorLight: "#ffffff", // default
    correctLevel: QRCode.CorrectLevel.L,
  });
};

• This function will need modifications to align with the new library's capabilities. An example:

    const qrCode = new QRCodeStyling({
        width: dimension,
        height: dimension,
        type: "png",
        data: cid?,
        image: "https://github.com/p2plabsxyz/dscan/blob/main/public/logo.png", // default
        dotsOptions: {
            colorDark: "#000000", // default
            type: "rounded"
        },
        backgroundOptions: {
            colorLight: "#ffffff", // default
        },
        imageOptions: {
            crossOrigin: "anonymous",
            margin: 20
        }
    });

2. Style Picker:
   • Integrate an option for users to pick different styles for the QR code (e.g., rounded dots, square dots).
3. Logo Picker:
   • Allow users to upload a logo that will be placed in the center of the QR code.
   • Ensure the logo does not obstruct the QR code's readability.
4. UI Integration:
   • Adjust the UI on file.html and folder.html to incorporate the style and logo pickers.
   • Update the main.css for any required styling related to the new UI elements.

Refer to the #31 color picker pull request for this implementation.

Important files:

./src/scripts/qrcode.js ./src/file.html ./src/folder.html ./src/css/main.css

Please make sure you're using the latest stable versions of npm and Node.js :)

[Pinaka-Pani-18]

Could you explain it briefly so that I can try to solve this issue?

[akhileshthite]

Could you explain it briefly so that I can try to solve this issue?

Added more details!

[akhileshthite]

Could you explain it briefly so that I can try to solve this issue?

Are you working on this issue @Pinaka-Pani-18?

[AdityaNik]

issue looking good! can you please assign it to me?

[akhileshthite]

issue looking good! can you please assign it to me?

Assigned!