herald-exchange-offramp-widget 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "herald-exchange-offramp-widget",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -55,4 +55,4 @@
     "stream": false,
     "crypto": false
   }
-}
+}

package/src/assets/css/style.module.css

@@ -22,25 +22,14 @@
 }
 
 :root {
-  --primary-set-color: #f9c201;
-  --secondary-set-color: #ffffff;
-  --tertiary-set-color: #000;
-  /* --quaternary-set-color: #878E96; */
-  --quaternary-set-color: #6b7178;
-  /* --bg-hover: #fffbf3; */
-  --senary-set-color: #298bff;
-  --overlay-set-bg: #f5f5f5;
-  /* --new-action-gradient: linear-gradient(180deg, #ffffff 39.57%, rgb(249 246 246)); */
-  /* --badges-success-bg: #f9fcf0; */
-  /* --badges-success-color: #7ab200; */
-  --badges-set-faile-color: #ff2222;
-  /* --badges-pending-bg: #e89a3c21; */
-  /* --badges-faile-bg: rgb(237 56 51 / 5%); */
-  /* --new-placeholder: #d2d2d2; */
-  --light-set-color: #fff;
+  
+  --primary-set-color: #000;
   --no-set-color: transparent;
-  /* border  */
-  --border-set-color: #e5eaf4;
+  --off-white-border:#e5e5e5;
+  --off-white:#fff;
+  --off-white-black:#0a0a0a;
+  --off-white-text:#0a0a0a99;
+  --badges-set-faile-color: #ff2222;
 }
 
 /*------------- Body -------------*/
@@ -53,8 +42,8 @@ body {
   overflow-x: hidden;
   position: relative;
   font-family: "Red Hat Text", sans-serif;
-  color: var(--tertiary-set-color);
-  background-color: var(--secondary-set-color);
+  color: var(--primary-set-color);
+  background-color: var(--off-white);
   /* font-size:calc(.5 * (1.5vh + 1.1vw)) !important; */
   font-size: 12px !important;
   letter-spacing: 0.8px;
@@ -102,7 +91,7 @@ button:disabled {
 
 .actionBtn {
   --_background: var(--background, var(--primary-set-color));
-  --_color: var(--color, var(--tertiary-set-color));
+  --_color: var(--color, var(--primary-set-color));
   --_border: var(--border, transparent);
   --_btn-width: var(--btn-width, auto);
   background: var(--_background);
@@ -127,7 +116,7 @@ button:disabled {
   align-items: center;
   gap: 0.5em;
   justify-content: center;
-  font-size: 0.85em;
+  font-size: 0.95em;
   font-weight: 600;
   z-index: 0;
   font-family: "Red Hat Text", sans-serif;
@@ -135,23 +124,23 @@ button:disabled {
 
 .primary {
   --background: var(--primary-set-color);
-  --color: var(--tertiary-set-color);
+  --color: var(--off-white);
   --btn-width: 100%;
   --border: transparent;
 }
 
 .secondary {
   --background: #f9f9f9;
-  --color: var(--tertiary-set-color);
+  --color: var(--primary-set-color);
   --btn-width: auto;
   --border: transparent;
 }
 
 .overlay {
-  --background: transparent;
-  --color: var(--tertiary-set-color);
+  --background: var(--off-white);
+  --color: var(--primary-set-color);
   --btn-width: auto;
-  --border: #e5eaf4;
+  --border: var(--off-white);
   padding: 0.5em;
 }
 
@@ -185,7 +174,7 @@ button:disabled {
 }
 
 .widegt-tabs-box button.active {
-  background: var(--secondary-set-color);
+  background: var(--off-white);
   border-radius: 10px;
 }
 
@@ -233,8 +222,12 @@ button:disabled {
   display: block;
   min-width: 600px;
   max-width: 600px;
-  min-height: 600px;
-  overflow: hidden;
+  min-height: 550px;
+  position: relative;
+  border: 1px solid var(--off-white-border);
+  border-radius: 12px;
+  background: linear-gradient(rgba(78, 134, 242, 0.05) 0%, rgba(255, 73, 128, 0.05) 100%) rgba(0, 0, 0, 0);
+  padding: 2em;
 }
 
 
@@ -248,7 +241,6 @@ button:disabled {
     min-width: unset !important;
     max-width: unset !important;
     border-radius: 0px;
-    padding: 0em !important;
   }
   .exchangeWidgetContent ,.widegtTabsConten{
     padding: 1em !important;
@@ -283,7 +275,7 @@ button:disabled {
 .offRampFieldLabel {
   font-size: 1em;
   font-weight: 600;
-  color: #010101;
+  color: var(--off-white-black);
   margin-bottom: 0.5em;
 }
 
@@ -321,7 +313,7 @@ button:disabled {
 }
 
 .offRampNewBankBox .inputControl {
-  background: var(--light-set-color);
+  background: var(--off-white-border);
   border: 0;
   border-radius: 0;
   height: 45px;
@@ -329,7 +321,7 @@ button:disabled {
   font-size: 1.8em;
   font-weight: 600;
   width: 100%;
-  color: #7d7d7d;
+  color: var(--primary-set-color);
   padding-left: 0;
 }
 
@@ -337,12 +329,12 @@ button:disabled {
 .offRampNewBankBox .inputControl:active,
 .offRampNewBankBox .inputControl:focus-within,
 .offRampNewBankBox .inputControl:focus-visible {
-  background: var(--light-set-color);
+  background: var(--off-white);
   border: 0;
   outline: 0;
 }
 .offRampNewBankBox .inputControl:focus-visible {
-  background: var(--light-set-color);
+  background: var(--off-white);
   border: 0;
   outline: 0;
 }
@@ -356,8 +348,8 @@ button:disabled {
 }
 
 .offRampModalImg {
-  width: 1.5em;
-  height: 1.5em;
+  width: 2em;
+  height: 2em;
   object-fit: contain;
 }
 
@@ -389,6 +381,8 @@ button:disabled {
 
 .offRampFieldCard {
   display: flex;
+  /* border: 1px solid var(--off-white-border); */
+  background-color: var(--off-white);
 }
 @media (max-width: 767.98px) {
   .offRampFieldCard {
@@ -418,7 +412,6 @@ button:disabled {
 }
 .offRampFieldBox {
   width: 75%;
-  background: #fff9;
   padding: 1em;
   border-bottom-left-radius: 10px;
   border-top-left-radius: 10px;
@@ -429,7 +422,6 @@ button:disabled {
 
 .offRampFieldSelectCard {
   width: 50%;
-  background-color: #f8f9fa;
   padding: 1em;
   border-bottom-right-radius: 10px;
   border-top-right-radius: 10px;
@@ -443,7 +435,7 @@ button:disabled {
   height: 2em;
   display: grid;
   place-items: center;
-  background-color: #f8f9fa;
+  background-color: var(--primary-set-color);
   border-radius: 50%;
   font-weight: 700;
   font-size: 1.2em;
@@ -465,13 +457,13 @@ button:disabled {
 
 .offRampSpace {
   display: grid;
-  grid-template-columns: 70px auto;
+  grid-template-columns: 50px auto;
   align-items: center;
 }
 
 .offRampSpaceTop {
   display: grid;
-  grid-template-columns: 70px auto;
+  grid-template-columns: 50px auto;
   align-items: start;
 }
 
@@ -479,7 +471,7 @@ button:disabled {
   width: 1em;
   height: 1em;
   border-radius: 50%;
-  background-color: #f8f9fa;
+  background-color: var(--primary-set-color);
   margin-left: 10px;
 }
 
@@ -495,12 +487,12 @@ button:disabled {
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  border: 1px solid #fff;
+  border: 1px solid var(--off-white);
+  background-color: var(--off-white-border);
   border-radius: 8px;
   padding: 10px 15px;
   cursor: pointer;
   transition: all 0.3s ease;
-  background-color: var(--secondary-set-color);
   position: relative;
 }
 
@@ -535,10 +527,10 @@ button:disabled {
 .offRampInfoBox::after {
   content: "";
   position: absolute;
-  width: 2px;
+  width: 1px;
   height: 100%;
   top: 0;
-  background: #ffffff73;
+  background: var(--off-white-border);
   left: 15px;
   z-index: -1;
 }
@@ -622,7 +614,7 @@ button:disabled {
 .cautionInfo {
   font-size: 0.8em;
   font-weight: 400;
-  color: var(--tertiary-set-color);
+  color: var(--primary-set-color);
   line-height: 1.8;
 }
 
@@ -635,25 +627,26 @@ button:disabled {
 
 .offRampNewBankFields .inputControl {
   height: 45px;
-  background-color: var(--secondary-set-color);
+  background-color: var(--off-white-border);
   width: 100%;
-  border: 1px soild var(--secondary-set-color);
+  border: 1px soild var(--off-white-border);
   border-radius: 10px;
   padding: 10px;
-  font-size: 0.9em !important;
+  font-size: 0.95em !important;
   font-weight: 400 !important;
-  color: var(--tertiary-set-color);
+  color: var(--primary-set-color);
 }
 
 .offRampNewBankFields .inputControl:focus,
 .offRampNewBankFields .inputControl:active,
 .offRampNewBankFields .inputControl:focus-within,
 .offRampNewBankFields .inputControl:focus-visible {
-  border: 1px soild var(--secondary-set-color);
+    border: 1px soild var(--off-white-border);
+  background-color: var(--off-white-border);
   outline: 0;
 }
 .offRampNewBankFields .inputControl:focus-visible {
-  border: 1px soild var(--secondary-set-color);
+    border: 1px soild var(--off-white-border);
   outline: 0;
 }
 
@@ -686,7 +679,7 @@ button:disabled {
 
 .offRampDetailsInfoBox {
   padding: 2em;
-  background-color: var(--secondary-set-color);
+  background-color: var(--off-white);
   border-radius: 10px;
 }
 
@@ -886,21 +879,21 @@ button:disabled {
 }
 
 .offCurrencyOption h3 {
-  font-weight: 500;
-  color: var(--tertiary-set-color);
-  font-size: 0.85em;
+  font-weight: 600;
+  color: var(--primary-set-color);
+  font-size: 0.95em;
 }
 .offCurrencyOption {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  border: 1px solid var(--secondary-set-color);
+  border: 1px solid var(--off-white-border);
   border-radius: 8px;
   padding: 10px 15px;
   cursor: pointer;
   transition: all 0.3s ease;
-  background-color: var(--secondary-set-color);
+  background-color: var(--off-white-border);
   position: relative;
   width: 100%;
 }
@@ -917,7 +910,11 @@ button:disabled {
 }
 .offRampFormCheck .offRampFormCheckInput:checked ~ .offCurrencyOption {
   border-color: var(--primary-set-color);
-  background-color: #fff7d1;
+  background-color: var(--primary-set-color);
+  color: var(--off-white);
+}
+.offRampFormCheck .offRampFormCheckInput:checked ~ .offCurrencyOption  h3{
+  color: var(--off-white);
 }
 .offRampFormCheckInput {
   display: none;
@@ -968,6 +965,7 @@ button:disabled {
 .errorMsg {
   color: #e34f4f;
   margin-top: 0.5em;
+  position: absolute;
 }
 
 /* Sell Payment Module UI  */
@@ -987,12 +985,12 @@ button:disabled {
 .back-arrow-btn-sec h4 {
   font-size: 1.1em;
   font-weight: 600;
-  color: var(--tertiary-set-color);
+  color: var(--primary-set-color);
   margin-bottom: 0;
 }
 .sellQRPayementWrap {
   grid-gap: 2em;
-  background-color: var(--light-set-color);
+  background-color: var(--off-white);
   border-radius: 10px;
   display: grid;
   gap: 2em;
@@ -1008,7 +1006,7 @@ button:disabled {
   }
 }
 .sellAmtDetails {
-  background-color: var(--light-set-color);
+  background-color: var(--off-white);
   border-radius: 10px;
   display: flex;
   flex-direction: column;
@@ -1016,6 +1014,15 @@ button:disabled {
   margin-bottom: 1em !important;
   grid-area: 1 / 1 / 2 / 3;
 }
+.sellPaymentQRFrame {
+  display: grid;
+  place-items: center;
+  background-color: var(--off-white-border);
+  border-radius: 12px;
+  padding: 10px;
+  width: fit-content;
+  margin: 0 auto;
+}
 @media (max-width: 767.98px) {
   .sellAmtDetails {
     grid-area: unset;
@@ -1037,14 +1044,14 @@ button:disabled {
   flex-direction: column;
 }
 .sellPayLabel {
-  color: var(--quaternary-set-color);
-  font-size: 0.8em;
-  font-weight: 300;
+  color: var(--off-white-border);
+  font-size: 0.85em;
+  font-weight: 500;
   margin-bottom: 0.5em;
 }
 .sellPayAmt {
-  color: var(--tertiary-set-color);
-  font-size: 0.85em;
+  color: var(--primary-set-color);
+  font-size: 0.95em;
   font-weight: 500;
   margin-bottom: 0;
 }
@@ -1057,10 +1064,10 @@ button:disabled {
   background: #0000000a;
   border: 1px dashed #0000003b;
   border-radius: 10px;
-  padding: 0.7em;
+  padding: 1em;
 }
 .sellEstimatedInfo p {
-  color: var(--tertiary-set-color);
+  color: var(--primary-set-color);
   font-size: 0.85em;
   font-weight: 600;
   margin-bottom: 0;
@@ -1079,7 +1086,7 @@ button:disabled {
   }
 }
 .selllWalletAddressCard {
-  background: var(--overlay-set-bg);
+  background: var(--off-white-border);
   padding: 1.5em;
   border-radius: 10px;
   margin-bottom: 1.5em;
@@ -1090,13 +1097,13 @@ button:disabled {
 .sellWalletDataCard h6 {
   font-size: 0.8em;
   font-weight: 500;
-  color: var(--tertiary-set-color);
+  color: var(--primary-set-color);
   margin-bottom: 0.5em;
 }
 .sellHashLabel {
   font-size: 0.8em;
   font-weight: 500;
-  color: var(--tertiary-set-color);
+  color: var(--primary-set-color);
   margin-bottom: 0.5em;
 }
 .sellHashLabel span {
@@ -1109,38 +1116,39 @@ button:disabled {
   grid-template-columns: auto 65px;
 }
 .sellWalletCode {
-  border: 1px solid var(--border-set-color);
+  border: 1px solid var(--off-white);
+  background-color: var(--off-white);
   border-radius: 10px;
-  padding: 0.8em 1em;
+  padding: 1em;
 }
 .sellWalletCode span {
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
-  color: var(--tertiary-set-color);
+  color: var(--primary-set-color);
   display: -webkit-box;
-  font-size: 0.85em;
-  font-weight: 500;
+  font-size: 0.95em;
+  font-weight: 600;
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-all;
 }
 .sellHashFields {
   border-radius: 10px;
-  border: 1px solid var(--border-set-color);
+  border: 1px solid var(--off-white);
   font-size: 0.9em;
   font-weight: 400;
-  color: var(--tertiary-set-color);
-  background: transparent;
+  color: var(--primary-set-color);
+  background:var(--off-white);
   width: 100%;
-  padding: 0.8em 1em;
+  padding: 1em;
 }
 .sellHashFields:focus {
   border-radius: 10px;
-  border: 1px solid var(--border-set-color);
-  outline: 1px solid var(--border-set-color);
+  border: 1px solid var(--off-white);
+  outline: 1px solid var(--off-white);
   font-size: 0.9em;
   font-weight: 400;
-  color: var(--tertiary-set-color);
+  color: var(--primary-set-color);
   background: transparent;
   width: 100%;
   padding: 0.8em 1em;
@@ -1234,7 +1242,7 @@ button:disabled {
   position: absolute;
   width: 90vw;
   height: 2px;
-  background-color: #fff;
+  background-color: var(--off-white-border);
   top: 10px;
   left: 18px;
   transform-origin: center;
@@ -1343,15 +1351,15 @@ button:disabled {
   justify-content: center;
   flex-direction: column;
   gap: 1em;
-  font-size: 0.65em;
+  font-size: 0.75em;
   font-weight: 600;
   /* background-color: #f3e2c33b; */
-  color: var(--quaternary-set-color);
+  color: var(--primary-set-color);
   border-radius: 10px;
 }
 
 .flowStepperCard.completed {
-  color: var(--tertiary-set-color);
+  color: var(--primary-set-color);
 }
 
 .flowStepperCard .spinner-loader {
@@ -1361,8 +1369,8 @@ button:disabled {
 }
 
 .flowStepperProcess {
-  /* background-color: var(--light-set-color); */
-  background-color: #fff;
+  /* background-color: var(--off-white); */
+  background-color: var(--off-white-border);
   width: 2.5em;
   height: 2.5em;
   border-radius: 50%;
@@ -1396,13 +1404,13 @@ button:disabled {
   gap: 1em;
   font-size: 0.75em;
   font-weight: 600;
-  color: var(--quaternary-set-color);
+  color: var(--off-white-border);
   padding: 1em;
   border-radius: 10px;
 }
 
 .flow-stepper-success.completed {
-  color: var(--tertiary-set-color);
+  color: var(--primary-set-color);
 }
 
 .flow-stepper-bar {
@@ -1416,8 +1424,8 @@ button:disabled {
   width: 100%;
   aspect-ratio: 1;
   border-radius: 50%;
-  background: radial-gradient(farthest-side, #ffa516 94%, #0000) top/4.5px 4.5px no-repeat,
-    conic-gradient(#0000 30%, #ffa516);
+  background: radial-gradient(farthest-side, var(--primary-set-color) 94%, #0000) top/4.5px 4.5px no-repeat,
+    conic-gradient(#0000 30%, var(--primary-set-color));
   -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 4.5px), #000 0);
   animation: l13 1s infinite linear;
 }
@@ -1454,17 +1462,17 @@ button:disabled {
 }
 .off_info_card {
   border-radius: 10px;
-  padding: 0.5em;
+  padding: 1em;
   display: grid;
   grid-template-columns: 40px auto;
   align-items: center;
-  background: #ffffff47;
+  background: var(--off-white);
 }
 
 .off_caution_info {
-  font-size: 0.8em;
-  font-weight: 400;
-  color: var(--hightlight-color-des);
+  font-size: 0.85em;
+  font-weight: 500;
+  color: var(--primary-set-color);
   line-height: 1.8;
 }
 

package/src/components/ButtonStepper.tsx

@@ -120,7 +120,7 @@ const ButtonStepper = ({ props, monitoring }: { props: any; monitoring: boolean
                       height="24"
                       enableBackground="new 0 0 512 512"
                       viewBox="0 0 20 20"
-                      fill="#e4e0e0"
+                      fill="#fff"
                     >
                       <path
                         fillRule="evenodd"

package/src/components/CustomeSelect.tsx

@@ -11,6 +11,7 @@ interface CustomSelectProps {
   backgroundColor?: string;
   borderColor?: string;
   color?: string;
+  colorvalue?: string;
   svgFill?: string;
   image?: boolean;
   singleicons?: boolean;
@@ -31,6 +32,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
   backgroundColor = "#fff",
   borderColor = "var(--no-color)",
   color = "#000",
+  colorvalue ="#000",
   svgFill = "#333",
   image,
   singleicons,
@@ -57,6 +59,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
       padding: 0,
       minWidth: 250,
       fontSize: "0.95em",
+      fontWeight: "500",
       "&::-webkit-scrollbar-track": {
         boxShadow: "inset 0 0 6px rgba(0,0,0,0.3)",
         borderRadius: "3px",
@@ -80,22 +83,23 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
       border: `1px solid ${borderColor}!important`,
       borderRadius: "8px!important",
       boxShadow: "none!important",
-      height: "42px",
+      height: "45px",
       display: "flex",
       alignItems: "center",
       alignItemsContent: "center",
       cursor: "pointer",
-      fontSize: "0.85em",
+      fontSize: "1.2em",
+      fontWeight: "600",
     }),
     placeholder: (provided: any) => ({
       ...provided,
       color: color,
-      fontSize: "1.2em",
+      fontSize: "0.9em",
       fontWeight: "600",
     }),
     singleValue: (provided: any) => ({
       ...provided,
-      color: "#000",
+      color: colorvalue,
       display: "flex",
       alignItems: "center",
       gap: "1em",