From 2ca09d2ccfbe132bd55f6236871cc5ff011e98c5 Mon Sep 17 00:00:00 2001
From: eugenetsakh <onatolich@gmail.com>
Date: Mon, 9 Dec 2024 18:12:46 +0100
Subject: [PATCH 1/3] Fix Captcha styles, fix subscribe to product alignment,
 prevent custom styles from interfering with predefined widgets

---
 .../ko/runtime/product-subscribe.html         |  6 ++--
 .../react/runtime/ProductSubscribeForm.tsx    |  2 +-
 .../runtime/hip-captcha/react/NewCaptcha.tsx  | 32 ++++++++++---------
 .../users/signup/ko/runtime/signup.html       |  6 ++--
 .../website/styles/widgets/widgets.scss       | 26 +++++++++++++++
 webpack.publisher.js                          |  2 +-
 6 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/src/components/products/product-subscribe/ko/runtime/product-subscribe.html b/src/components/products/product-subscribe/ko/runtime/product-subscribe.html
index 04ce9d900..278f491a9 100644
--- a/src/components/products/product-subscribe/ko/runtime/product-subscribe.html
+++ b/src/components/products/product-subscribe/ko/runtime/product-subscribe.html
@@ -22,11 +22,11 @@
 
 <!-- ko ifnot: limitReached -->
 <form>
-    <div class="table">        
+    <div class="table">
         <div class="table-row">
             <!-- ko ifnot: delegationEnabled -->
-            <div class="col-5">
-                <input type="text" class="form-control" placeholder="Your new product subscription name" data-bind="textInput: subscriptionName" />
+            <div class="col-5 form-inline">
+                <input type="text" class="form-control" style="width: 100%" placeholder="Your new product subscription name" data-bind="textInput: subscriptionName" />
             </div>
             <!-- /ko -->
             <!-- ko if: termsOfUse -->
diff --git a/src/components/products/product-subscribe/react/runtime/ProductSubscribeForm.tsx b/src/components/products/product-subscribe/react/runtime/ProductSubscribeForm.tsx
index 14a4fadca..17e96ce1a 100644
--- a/src/components/products/product-subscribe/react/runtime/ProductSubscribeForm.tsx
+++ b/src/components/products/product-subscribe/react/runtime/ProductSubscribeForm.tsx
@@ -27,7 +27,7 @@ export const ProductSubscribeForm = ({ subscribe, termsOfUse, showTermsByDefault
                 tokens={{ childrenGap: 15 }}
                 className="form-group"
             >
-                <Stack.Item>
+                <Stack.Item className="form-inline">
                     <input
                         value={subscriptionName}
                         onChange={(event) => setSubscriptionName(event.target.value)}
diff --git a/src/components/users/runtime/hip-captcha/react/NewCaptcha.tsx b/src/components/users/runtime/hip-captcha/react/NewCaptcha.tsx
index 6847574fb..cd919afe9 100644
--- a/src/components/users/runtime/hip-captcha/react/NewCaptcha.tsx
+++ b/src/components/users/runtime/hip-captcha/react/NewCaptcha.tsx
@@ -91,25 +91,27 @@ export const NewCaptcha = ({ backendService, onInitComplete }: TCaptchaProps) =>
                     <Tab icon={<Speaker2Regular />} value={ECaptchaType.audio}>Audio</Tab>
                 </TabList>
 
-                {working ? (
-                    <Stack.Item style={{ padding: "13px 0" }}>
-                        <Spinner label={"Loading captcha"} labelPosition="below" />
-                    </Stack.Item>
-                ) : captchaType === ECaptchaType.visual ? (
-                    <Stack.Item>
-                        <img
+                <div style={{ margin: "10px 0" }}>
+                    {working ? (
+                      <Stack.Item style={{ padding: "13px 0" }}>
+                          <Spinner style={{ display: "inline-flex" }} label={"Loading captcha"} labelPosition="below" />
+                      </Stack.Item>
+                    ) : captchaType === ECaptchaType.visual ? (
+                      <Stack.Item>
+                          <img
                             src={`data:image/png;base64,${captchaChallenge}`}
                             alt="visual challange"
-                        />
-                    </Stack.Item>
-                ) : (
-                    <audio controls>
-                        <source
+                          />
+                      </Stack.Item>
+                    ) : (
+                      <audio controls>
+                          <source
                             src={`data:audio/mp3;base64,${captchaChallenge}`}
                             type="audio/mp3"
-                        />
-                    </audio>
-                )}
+                          />
+                      </audio>
+                    )}
+                </div>
 
 
                 <Stack.Item>
diff --git a/src/components/users/signup/ko/runtime/signup.html b/src/components/users/signup/ko/runtime/signup.html
index 215eed2d1..2a6768d83 100644
--- a/src/components/users/signup/ko/runtime/signup.html
+++ b/src/components/users/signup/ko/runtime/signup.html
@@ -34,14 +34,14 @@
 
         <!-- ko if: requireHipCaptcha -->
         <hip-captcha params="{ captchaData: captchaData, onInitComplete: onCaptchaCreated }"></hip-captcha>
-        <!-- /ko -->       
-        
+        <!-- /ko -->
+
         <!-- ko if: termsEnabled && termsOfUse -->
         <terms-of-use params="{ isConsentRequired: isConsentRequired, consented: consented, termsOfUse: termsOfUse }"></terms-of-use>
         <!-- /ko -->
 
         <div class="form-group">
-            
+
             <!-- ko ifnot: working -->
             <button type="button" id="signup" class="button button-primary" data-bind="click: signup">
                 Sign up
diff --git a/src/themes/website/styles/widgets/widgets.scss b/src/themes/website/styles/widgets/widgets.scss
index 301ff28b5..f2c8c7443 100644
--- a/src/themes/website/styles/widgets/widgets.scss
+++ b/src/themes/website/styles/widgets/widgets.scss
@@ -18,3 +18,29 @@
 @import "fui/operation-details.scss";
 @import "fui/apis-products-lists.scss";
 @import "fui/reports.scss";
+
+/**
+ * If you need to make sure that custom defined styles do not interfere with widgets,
+ * this is a good place to do it. Make sure to add !important to insure overriding.
+ */
+[data-bind="widget: widget"] {
+  .button {
+    margin: 10px 20px 10px 0 !important;
+    padding: 9px 50px !important;
+  }
+
+  .form-group {
+    margin: 5px 10px 20px 0 !important;
+    padding: 0 !important;
+
+    label {
+      margin: 0 0 0.5em !important;
+      padding: 0 !important;
+    }
+
+    .form-control {
+      margin: 0 !important;
+      padding: 7px 10px 5px !important;
+    }
+  }
+}
diff --git a/webpack.publisher.js b/webpack.publisher.js
index 0c82f01a2..4fcc7651c 100644
--- a/webpack.publisher.js
+++ b/webpack.publisher.js
@@ -15,7 +15,7 @@ const publisherConfig = {
     },
     entry: {
         "index": ["./src/startup.publish.ts"]
-    },    
+    },
     output: {
         filename: "./[name].js",
         path: path.resolve(__dirname, "dist/publisher")

From 804d8a1ba874389057e6ff49ba84973aa7c33e23 Mon Sep 17 00:00:00 2001
From: eugenetsakh <onatolich@gmail.com>
Date: Tue, 10 Dec 2024 17:34:07 +0100
Subject: [PATCH 2/3] upd

---
 .../product-subscribe/ko/runtime/product-subscribe.html     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/products/product-subscribe/ko/runtime/product-subscribe.html b/src/components/products/product-subscribe/ko/runtime/product-subscribe.html
index 278f491a9..04ce9d900 100644
--- a/src/components/products/product-subscribe/ko/runtime/product-subscribe.html
+++ b/src/components/products/product-subscribe/ko/runtime/product-subscribe.html
@@ -22,11 +22,11 @@
 
 <!-- ko ifnot: limitReached -->
 <form>
-    <div class="table">
+    <div class="table">        
         <div class="table-row">
             <!-- ko ifnot: delegationEnabled -->
-            <div class="col-5 form-inline">
-                <input type="text" class="form-control" style="width: 100%" placeholder="Your new product subscription name" data-bind="textInput: subscriptionName" />
+            <div class="col-5">
+                <input type="text" class="form-control" placeholder="Your new product subscription name" data-bind="textInput: subscriptionName" />
             </div>
             <!-- /ko -->
             <!-- ko if: termsOfUse -->

From 18e1c9433271c1e7ef2cb12e614fb17652ce5db6 Mon Sep 17 00:00:00 2001
From: eugenetsakh <onatolich@gmail.com>
Date: Thu, 12 Dec 2024 12:37:29 +0100
Subject: [PATCH 3/3] upd

---
 .../website/styles/widgets/widgets.scss       | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/themes/website/styles/widgets/widgets.scss b/src/themes/website/styles/widgets/widgets.scss
index f2c8c7443..b04e1d081 100644
--- a/src/themes/website/styles/widgets/widgets.scss
+++ b/src/themes/website/styles/widgets/widgets.scss
@@ -21,26 +21,28 @@
 
 /**
  * If you need to make sure that custom defined styles do not interfere with widgets,
- * this is a good place to do it. Make sure to add !important to insure overriding.
+ * this is a good place to do it.
+ * Note: selector is duplicated to increase its weight. Do not use !important as it will break
+ * some widgets that rely on inline styles.
  */
-[data-bind="widget: widget"] {
+.fui-FluentProvider.fui-FluentProvider.fui-FluentProvider {
   .button {
-    margin: 10px 20px 10px 0 !important;
-    padding: 9px 50px !important;
+    margin: 10px 20px 10px 0;
+    padding: 9px 50px;
   }
 
   .form-group {
-    margin: 5px 10px 20px 0 !important;
-    padding: 0 !important;
+    margin: 5px 10px 20px 0;
+    padding: 0;
 
     label {
-      margin: 0 0 0.5em !important;
-      padding: 0 !important;
+      margin: 0 0 0.5em;
+      padding: 0;
     }
 
     .form-control {
-      margin: 0 !important;
-      padding: 7px 10px 5px !important;
+      margin: 0;
+      padding: 7px 10px 5px;
     }
   }
 }