supertokens / supertokens-auth-react

ReactJS authentication module for SuperTokens
https://supertokens.com
Other
260 stars 81 forks source link

Possibility to override "thirdPartyEmailPasswordDivider" style #785

Open nik2208 opened 5 months ago

nik2208 commented 5 months ago

in italian the translation for the english work "or" is "oppure", which is quite long and breaks the flex boundaries of the divider row. I've searched inside the library but the divider doesn't seem to be customisable. Screenshot 2024-01-15 at 09 09 27 is it possible to add it to the set of customisable components?

rishabhpoddar commented 5 months ago

I think the component you want to override is ThirdPartyEmailPasswordHeader_Override, and then you can add your own react component there instead of ours.

nik2208 commented 5 months ago

shouldnt I be able to override its style with something like this?

style: `
                [data-supertokens~=container] {
                    --palette-background: 51, 51, 51;
                    --palette-inputBackground: 41, 41, 41;
                    --palette-inputBorder: 41, 41, 41;
                    --palette-textTitle: 255, 255, 255;
                    --palette-textLabel: 255, 255, 255;
                    --palette-textPrimary: 255, 255, 255;
                    --palette-error: 173, 46, 46;
                    --palette-textInput: 169, 169, 169;
                    --palette-textLink: 169, 169, 169;
                    --palette-primary: ${environment.SUPERTOKENS.STYLE.PALETTE_PRIMARY};
                    --palette-primaryBorder: ${environment.SUPERTOKENS.STYLE.PALETTE_PRIMARY_BORDER};
                },
                [data-supertokens~=thirdPartyEmailPasswordDividerOr] {
                    margin-top: 0.55em;
                },
                [data-supertokens~=divider] {
                    flex: 2 3;
                },
            `,