Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Captcha styles, fix subscribe to product alignment, prevent custom styles from interfering with predefined widgets #2734

Open
wants to merge 3 commits into
base: fui/master
Choose a base branch
from
Open

Fix Captcha styles, fix subscribe to product alignment, prevent custom styles from interfering with predefined widgets #2734

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cb9672c
Fix Captcha styles, fix subscribe to product alignment, prevent custo…
Onatolich Dec 9, 2024
c50a778
upd
Onatolich Dec 10, 2024
fa129c4
upd
Onatolich Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/products/product-subscribe/react/runtime/ProductSubscribeForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
Expand Down
32 changes: 17 additions & 15 deletions src/components/users/runtime/hip-captcha/react/NewCaptcha.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions src/components/users/signup/ko/runtime/signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
28 changes: 28 additions & 0 deletions src/themes/website/styles/widgets/widgets.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,31 @@
@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.
* Note: selector is duplicated to increase its weight. Do not use !important as it will break
* some widgets that rely on inline styles.
*/
.fui-FluentProvider.fui-FluentProvider.fui-FluentProvider {
.button {
margin: 10px 20px 10px 0;
padding: 9px 50px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am still sure this 50px value is wrong for the redesign. I know you took it from old widgets. Please, check designs and come up with proper spacing. For everything you specify here, not just this padding.

}

.form-group {
margin: 5px 10px 20px 0;
padding: 0;

label {
margin: 0 0 0.5em;
padding: 0;
}

.form-control {
margin: 0;
padding: 7px 10px 5px;
}
}
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please, move all this to another file. Let's keep this for just imports.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why? This seems as an appropriate file to import all specific widget styles as well as defining global widget styles as well.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file is not redesign specific. Please, create a new one and place it there.
Also, why .fui-FluentProvider is specified 3 times? Can we specify it once as old widgets don't have this class at all.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file is not redesign specific. Please, create a new one and place it there.

Where do we put redesign specific files?

Also, why .fui-FluentProvider is specified 3 times?

Read a comment I written to it

Copy link
Collaborator

@jsorohova jsorohova Dec 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where do we put redesign specific files?

There is a folder named fui right next to this file.

Read a comment I written to it

Ok. My bad. Let's leave like this.

2 changes: 1 addition & 1 deletion webpack.publisher.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const publisherConfig = {
},
entry: {
"index": ["./src/startup.publish.ts"]
},
},
output: {
filename: "./[name].js",
path: path.resolve(__dirname, "dist/publisher")
Expand Down