remove signature component

update Readme to explain individual core components

README.md

@@ -40,22 +40,34 @@ npm run start
 
 Head off to `http://localhost:6006/` to see storybook, while `http://127.0.0.1:8080/` to see your actual document rendered in a dummy application.
 
+#### Core Components
+Core components are reusable React components that provide additional functionalities for renderer templates.
+
 ### Example Templates
+Core components, located in the `src/core directory``, are reusable React components that offer enhanced functionalities for renderer templates.
+
+This repository contains a collection of example templates along with demonstrations of how to use core components. You can find these examples in the `/src/templates` directory. These templates serve as references and guides to help you set up your own templates to meet your unique requirements.
+
+#### DocumentQrCode
+It allows users to share documents across devices using a QR code.
+
+For detailed information on how to use the QR Code Component, please refer to the official documentation [here](https://docs.tradetrust.io/docs/reference/tradetrust-website/qr-code/).
 
-This repository contains a collection of example templates located in the `/src/templates` directory. These templates serve as references and guides for setting up your own templates to suit your specific needs.
+#### Wrapper/ Error Boundary
+The Wrapper/Error Boundary Component is designed to handle scenarios where a template cannot be rendered correctly. In such cases, this component acts as a fallback, displaying a user-friendly error message and stack.
 
-All of these templates are built using core components located under the `/src/core`. Additionally, they all utilize a QR code component to generate QR codes for easy sharing and access to relevant information.
+#### PrivacyFilter
 
-1. Bill of Lading
-The "Bill of Lading" template provides a basic example.
+The Privacy Filter Component is a powerful tool for safeguarding sensitive information within a document. To use the Privacy Filter in the decentralized renderer, follow these steps
 
-2. Invoice Template
-The "Invoice Template" showcases the use of a privacy filter to automatically redact sensitive information, ensuring data security and privacy.
+- Click the "Edit Document" button within the PrivacyFilter component.
+- Click "Remove" on the redactable values to specify the information you want to remove.
+- Click "Done" on the Privacy Filter Component to complete the process.
+- Download the document with hidden values
 
-3. XML Renderer
-The "XML Renderer" template demonstrates how to use XML data to dynamically render content within your template.
+#### PrintWatermark
 
-Feel free to explore these examples and adapt them to your own projects.
+The PrintWatermark Component allows users to include the TradeTrust watermark text in the background of a document's print preview.
 
 ### Creating new templates
 

src/core/PrintWatermark/PrintWatermark.tsx

@@ -18,7 +18,7 @@ export const PrintWatermark: FunctionComponent = () => (
       @media print {
         width: 100%;
         height: 100%;
-        opacity: 0.6;
+        opacity: 0.4;
         display: block;
       }
     `}

src/core/Wrapper/Wrapper.tsx

@@ -1,5 +1,6 @@
 import React, { FunctionComponent } from "react";
 import { ErrorBoundary } from "../ErrorBoundary";
+import { PrintWatermark } from "../PrintWatermark";
 
 // `container mx-auto px-4` <- this is in line with tt and creator's tw config, so containers can align
 export const Wrapper: FunctionComponent = ({ children, ...props }) => {

src/main.css

@@ -860,10 +860,6 @@ pre {
   margin-bottom: 3rem;
 }
 
-.mb-16 {
-  margin-bottom: 4rem;
-}
-
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1016,10 +1012,6 @@ pre {
   height: 3.5rem;
 }
 
-.h-24 {
-  height: 6rem;
-}
-
 .h-4 {
   height: 1rem;
 }
@@ -1060,18 +1052,10 @@ pre {
   width: 50%;
 }
 
-.w-1\/3 {
-  width: 33.333333%;
-}
-
 .w-1\/4 {
   width: 25%;
 }
 
-.w-1\/5 {
-  width: 20%;
-}
-
 .w-14 {
   width: 3.5rem;
 }
@@ -1084,10 +1068,6 @@ pre {
   width: 16.666667%;
 }
 
-.w-2\/3 {
-  width: 66.666667%;
-}
-
 .w-3\/12 {
   width: 25%;
 }
@@ -1096,10 +1076,6 @@ pre {
   width: 75%;
 }
 
-.w-3\/5 {
-  width: 60%;
-}
-
 .w-4 {
   width: 1rem;
 }
@@ -1198,6 +1174,10 @@ pre {
   table-layout: auto;
 }
 
+.border-collapse {
+  border-collapse: collapse;
+}
+
 .-translate-x-1\/2 {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1341,10 +1321,6 @@ pre {
   overflow-wrap: break-word;
 }
 
-.break-all {
-  word-break: break-all;
-}
-
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1385,10 +1361,6 @@ pre {
   border-width: 4px;
 }
 
-.border-b-2 {
-  border-bottom-width: 2px;
-}
-
 .border-r {
   border-right-width: 1px;
 }