FUI - Margin fixes and updated template file (#2774)

jsorohova · web-flow · commit dd2aebc4fd7e · 2025-02-26T18:33:39.000+01:00
diff --git a/src/components/apis/api-products/ko/runtime/api-products-dropdown.html b/src/components/apis/api-products/ko/runtime/api-products-dropdown.html
@@ -1,6 +1,6 @@
 <div class="form-group">
     <div class="input-group">
-        <div class="form-control" tabindex="0" role="button" aria-label="Products" data-toggle="dropdown">
+        <div class="form-control m-0" tabindex="0" role="button" aria-label="Products" data-toggle="dropdown">
             <span data-bind="text: selection"></span>
         </div>
         <button class="input-group-addon no-border" data-toggle="dropdown" aria-label="Expand products list">
@@ -9,7 +9,7 @@
         <div class="dropdown">
             <div class="form-group">
                 <input type="search" class="form-control form-control-light" aria-label="Search"
-                    placeholder="Search products" spellcheck="false" data-bind="textInput: pattern" />
+                    placeholder="Search products" spellcheck="false" data-bind="textInput: pattern, style: { width: '100%' }" />
             </div>
 
             <div class="menu menu-vertical" role="list">
diff --git a/src/components/apis/api-products/ko/runtime/api-products-tiles.html b/src/components/apis/api-products/ko/runtime/api-products-tiles.html
@@ -1,5 +1,5 @@
-<div class="form-inline max-w-500">
-    <input type="search" class="form-control form-control-light" aria-label="Search" placeholder="Search products" spellcheck="false"
+<div class="form-group max-w-500">
+    <input type="search" class="form-control form-control-light m-0" aria-label="Search" placeholder="Search products" spellcheck="false"
         data-bind="textInput: pattern" />
 </div>
 
diff --git a/src/components/apis/api-products/ko/runtime/api-products.html b/src/components/apis/api-products/ko/runtime/api-products.html
@@ -1,5 +1,5 @@
-<div class="form-inline max-w-500">
-    <input type="search" class="form-control form-control-light" aria-label="Search" placeholder="Search products" spellcheck="false"
+<div class="form-group max-w-500">
+    <input type="search" class="form-control form-control-light m-0" aria-label="Search" placeholder="Search products" spellcheck="false"
         data-bind="textInput: pattern" />
 </div>
 
diff --git a/src/components/apis/list-of-apis/ko/runtime/api-list-dropdown.html b/src/components/apis/list-of-apis/ko/runtime/api-list-dropdown.html
@@ -1,6 +1,6 @@
 <div class="form-group">
     <div class="input-group" tabindex="0" aria-label="APIs">
-        <div class="form-control text-truncate" data-toggle="dropdown" role="button">
+        <div class="form-control text-truncate m-0" data-toggle="dropdown" role="button">
             <span data-bind="text: selection"></span>
             <!-- ko if: selectedApi() -->
             <!-- ko if: selectedApi().type === 'soap' -->
@@ -18,8 +18,8 @@
             <i class="icon-emb icon-emb-chevron-down"></i>
         </button>
         <div class="dropdown api-list-dropdown">
-            <input type="search" class="form-control form-control-light" aria-label="Search" placeholder="Search APIs"
-                data-bind="textInput: pattern" autofocus />
+            <input type="search" class="form-control form-control-light m-0" aria-label="Search" placeholder="Search APIs"
+                data-bind="textInput: pattern, style: { width: '100%' }" autofocus />
 
             <!-- <tag-input params="{ scope: 'apis', onChange: onTagsChange }"></tag-input> -->
 
diff --git a/src/components/apis/list-of-apis/ko/runtime/api-list-tiles.html b/src/components/apis/list-of-apis/ko/runtime/api-list-tiles.html
@@ -1,6 +1,6 @@
 <div class="form-inline max-w-500">
     <div class="form-group d-block flex-grow">
-        <input type="search" class="form-control form-control-light" aria-label="Search APIs" placeholder="Search APIs"
+        <input type="search" class="form-control form-control-light m-0" aria-label="Search APIs" placeholder="Search APIs"
             spellcheck="false" data-bind="textInput: pattern" />
         <tag-input params="{ scope: 'apis', onChange: onTagsChange }"></tag-input>
     </div>
diff --git a/src/components/apis/list-of-apis/ko/runtime/api-list.html b/src/components/apis/list-of-apis/ko/runtime/api-list.html
@@ -1,6 +1,6 @@
 <div class="form-inline max-w-500">
     <div class="form-group d-block flex-grow">
-        <input type="search" class="form-control form-control-light" aria-label="Search APIs" placeholder="Search APIs" spellcheck="false"
+        <input type="search" class="form-control form-control-light m-0" aria-label="Search APIs" placeholder="Search APIs" spellcheck="false"
             data-bind="textInput: pattern" />
         <tag-input params="{ scope: 'apis', onChange: onTagsChange }"></tag-input>
     </div>
diff --git a/src/components/operations/operation-list/ko/runtime/operation-list.html b/src/components/operations/operation-list/ko/runtime/operation-list.html
@@ -20,7 +20,7 @@
 <!-- ko ifnot: apiType() === 'websocket' || apiType() === 'graphql'-->
 <div class="form-inline max-w-500">
     <div class="form-group d-block flex-grow mw-170">
-        <input type="search" class="form-control form-control-light" aria-label="Search operations"
+        <input type="search" class="form-control form-control-light m-0" aria-label="Search operations"
             placeholder="Search operations" spellcheck="false" data-bind="textInput: pattern" />
         <tag-input params="{ scope: $component.tagScope, onChange: onTagsChange }"></tag-input>
     </div>
diff --git a/src/components/products/product-apis/ko/runtime/product-apis-tiles.html b/src/components/products/product-apis/ko/runtime/product-apis-tiles.html
@@ -1,5 +1,5 @@
-<div class="form-inline max-w-500">
-    <input type="search" class="form-control form-control-light" aria-label="Search" placeholder="Search APIs" spellcheck="false"
+<div class="form-group max-w-500">
+    <input type="search" class="form-control form-control-light m-0" aria-label="Search" placeholder="Search APIs" spellcheck="false"
         data-bind="textInput: pattern" />
 </div>
 
diff --git a/src/components/products/product-apis/ko/runtime/product-apis.html b/src/components/products/product-apis/ko/runtime/product-apis.html
@@ -1,5 +1,5 @@
-<div class="form-inline max-w-500">
-    <input type="search" class="form-control form-control-light" aria-label="Search" placeholder="Search APIs" spellcheck="false"
+<div class="form-group max-w-500">
+    <input type="search" class="form-control form-control-light m-0" aria-label="Search" placeholder="Search APIs" spellcheck="false"
         data-bind="textInput: pattern" />
 </div>
 
diff --git a/src/components/products/product-list/ko/runtime/product-list-dropdown.html b/src/components/products/product-list/ko/runtime/product-list-dropdown.html
@@ -1,6 +1,6 @@
 <div class="form-group">
     <div class="input-group">
-        <div class="form-control" tabindex="0" role="button" aria-label="Products" data-toggle="dropdown">
+        <div class="form-control m-0" tabindex="0" role="button" aria-label="Products" data-toggle="dropdown">
             <span data-bind="text: selection"></span>
         </div>
         <button class="input-group-addon no-border" data-toggle="dropdown" aria-label="Expand products list">
@@ -9,7 +9,7 @@
         <div class="dropdown">
             <div class="form-group">
                 <input type="search" class="form-control form-control-light" aria-label="Search"
-                    placeholder="Search products" spellcheck="false" data-bind="textInput: pattern" />
+                    placeholder="Search products" spellcheck="false" data-bind="textInput: pattern, style: { width: '100%' }" />
             </div>
 
             <div class="menu menu-vertical" role="list">
diff --git a/src/components/products/product-list/ko/runtime/product-list-tiles.html b/src/components/products/product-list/ko/runtime/product-list-tiles.html
@@ -1,5 +1,5 @@
-<div class="form-inline max-w-500">
-    <input type="search" class="form-control form-control-light" aria-label="Search" placeholder="Search products" spellcheck="false"
+<div class="form-group max-w-500">
+    <input type="search" class="form-control form-control-light m-0" aria-label="Search" placeholder="Search products" spellcheck="false"
         data-bind="textInput: pattern" />
 </div>
 
diff --git a/src/components/products/product-list/ko/runtime/product-list.html b/src/components/products/product-list/ko/runtime/product-list.html
@@ -1,5 +1,5 @@
-<div class="form-inline max-w-500">
-    <input type="search" class="form-control form-control-light" aria-label="Search" placeholder="Search products" spellcheck="false"
+<div class="form-group max-w-500">
+    <input type="search" class="form-control form-control-light m-0" aria-label="Search" placeholder="Search products" spellcheck="false"
         data-bind="textInput: pattern" />
 </div>
 
diff --git a/src/components/products/product-subscribe/ko/runtime/product-subscribe.html b/src/components/products/product-subscribe/ko/runtime/product-subscribe.html
@@ -21,26 +21,24 @@
 <!-- /ko -->
 
 <!-- ko ifnot: limitReached -->
-<form>
-    <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>
-            <!-- /ko -->
-            <!-- ko if: termsOfUse -->
-            <div class="col-4 form-inline">
-                <div class="form-check">
-                    <input id="consentCheckbox" type="checkbox" class="form-check-input" data-bind="checked: consented" />
-                    <label for="consentCheckbox" class="form-check-label"> I agree to the Terms of Use. &nbsp;<a href="#" data-bind="click: toggleTermsOfUser, text: showHideLabel"></a></label>
-                </div>
-            </div>
-            <!-- /ko -->
-            <div class="col-3" >
-                <button class="button button-primary" data-bind="click: $component.subscribe, enable: canSubscribe">Subscribe</button>
+<form class="form-group p-0">
+    <div class="flex flex-row mb-20">
+        <!-- ko ifnot: delegationEnabled -->
+        <div class="col-5 p-0">
+            <input type="text" class="form-control m-0" placeholder="Your new product subscription name" data-bind="textInput: subscriptionName" />
+        </div>
+        <!-- /ko -->
+        <!-- ko if: termsOfUse -->
+        <div class="col-4 form-inline">
+            <div class="form-check">
+                <input id="consentCheckbox" type="checkbox" class="form-check-input" data-bind="checked: consented" />
+                <label for="consentCheckbox" class="form-check-label"> I agree to the Terms of Use. &nbsp;<a href="#" data-bind="click: toggleTermsOfUser, text: showHideLabel"></a></label>
             </div>
         </div>
+        <!-- /ko -->
+        <div class="col-3" >
+            <button class="button button-primary m-0" data-bind="click: $component.subscribe, enable: canSubscribe">Subscribe</button>
+        </div>
     </div>
 
     <!-- ko if: showTermsOfUse -->
diff --git a/src/components/products/product-subscribe/react/runtime/ProductSubscribeForm.tsx b/src/components/products/product-subscribe/react/runtime/ProductSubscribeForm.tsx
@@ -26,18 +26,20 @@ export const ProductSubscribeForm = ({ subscribe, termsOfUse, showTermsByDefault
                 verticalAlign={"center"}
                 tokens={{ childrenGap: 15 }}
                 className="form-group"
+                style={{ marginTop: "1rem" }}
             >
                 <input
                     value={subscriptionName}
                     onChange={(event) => setSubscriptionName(event.target.value)}
                     placeholder={"Your new product subscription name"}
-                    className="form-control"
+                    className="form-control m-0" //m-0 class overrides customer styles
                     style={{ width: "20em" }}
                 />
                 <BtnSpinner
                     onClick={() => subscribe(subscriptionName, consented)}
                     className="button button-primary"
                     disabled={!subscriptionName || (termsOfUse && !consented)}
+                    style={{ margin: "0 0 0 1rem" }}
                 >
                     Subscribe
                 </BtnSpinner>
diff --git a/src/components/utils/react/BtnSpinner.tsx b/src/components/utils/react/BtnSpinner.tsx
@@ -6,14 +6,16 @@ export type TProps = ButtonProps & {
     onClick: () => Promise<unknown>;
     working?: boolean;
     className?: string;
+    style?: React.CSSProperties;
 };
 
 export const BtnSpinner = ({
     children,
     onClick,
     disabled,
     working: workingProp,
-    className
+    className,
+    style = {},
 }: TProps) => {
     const [working, setWorking] = useState(false);
 
@@ -25,6 +27,7 @@ export const BtnSpinner = ({
                 onClick().finally(() => setWorking(false));
             }}
             className={className}
+            style={style}
         >
             {(working || workingProp) && <Spinner size={"extra-tiny"} style={{ marginRight: ".5rem" }} />}
             {children}
diff --git a/src/themes/website/styles/utils.scss b/src/themes/website/styles/utils.scss
@@ -194,6 +194,10 @@
     margin-right: 20px;
 }
 
+.mb-20 {
+    margin-bottom: 20px;
+}
+
 .w-100 {
     width: 100%;
 }
diff --git a/templates/fui/data.json b/templates/fui/data.json
diff --git a/templates/fui/media/2dd99fb4-4c42-86b1-ab2a-ae5d99df2767.png b/templates/fui/media/2dd99fb4-4c42-86b1-ab2a-ae5d99df2767.png
diff --git a/templates/fui/media/54635f91-230a-28fd-a532-c246f2356f0f.png b/templates/fui/media/54635f91-230a-28fd-a532-c246f2356f0f.png
diff --git a/templates/fui/media/ab94dbfe-c61b-bf5c-41a1-f43db9dbc040.png b/templates/fui/media/ab94dbfe-c61b-bf5c-41a1-f43db9dbc040.png
diff --git a/templates/fui/media/d3a70fe1-1b65-b6f1-446e-b0c141b1903f.png b/templates/fui/media/d3a70fe1-1b65-b6f1-446e-b0c141b1903f.png
