supertokens-auth-react icon indicating copy to clipboard operation
supertokens-auth-react copied to clipboard

Possibility to override "thirdPartyEmailPasswordDivider" style

Open nik2208 opened this issue 1 year ago • 2 comments

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?

nik2208 avatar Jan 15 '24 08:01 nik2208

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

rishabhpoddar avatar Jan 15 '24 08:01 rishabhpoddar

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;
                },
            `,

nik2208 avatar Jan 15 '24 08:01 nik2208