search

okta / okta-signin-widget

HTML/CSS/JS widget that provides out-of-the-box authentication UX for your organization's apps
Other
376 stars 319 forks source link

Ability to overwrite or ignore css and/or fonts #3335

Open jchabotamica opened 1 year ago

jchabotamica commented 1 year ago

Describe the feature request

We have a react application built with webpack. I'd like to ignore the css from the okta-signin-widget node module and its font files. We would apply our own internal fonts by overwriting the css. The problem is that these cause unnecessary network calls to download the extra css (a lot of which is unused) and font files (not used at all).

New or Affected Resource(s)

okta-signin-widget@latest

Provide a documentation link

No response

Additional Information?

No response

jchabotamica commented 1 year ago

Currently there are multiple issues I see with how we handle these customizations. 1) We include the okta-sign-in.min.css file in our React component which rends the widget. 2) We have load our own css files with css selectors which overwrite a lot of these styles 3) The okta-sign-in.min.css file is very large at 231.8 KB compressed 4) This then downloads THREE additional woff files which we don't use as we have our own fonts and overwrite your font families in our custom css file. These block text from displaying also.

Should we be editing the okta-sign-in.min.css file directly instead?

shuowu-okta commented 1 year ago

@jchabotamica Thanks for reporting the issues!

Internal Ref: OKTA-644932

jchabotamica commented 1 year ago

@shuowu-okta thanks! Let me know if my request makes sense or not. Happy to provide any clarity.