diff --git a/src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx b/src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx index 2db7d009fe825f354b505285f1613b4e87bee92f..49124b24ab96342e3ae8d31758a2535eb1140f6c 100644 --- a/src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx +++ b/src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx @@ -165,35 +165,42 @@ const KonnectorLoginForm: React.FC<KonnectorLoginFormProps> = ({ </span> </div> <div className="form-message">{error}</div> - <div className="kloginauthform-button"> - <StyledAuthButton type="submit" color="primary" disabled={loading}> - <div className="authform-button-content"> - <div className="authform-button-content-icon"> - {icon && <StyledIcon icon={icon} size={48} />} + <div className="kloginauthform"> + <div className="kloginauthform-button"> + <StyledAuthButton + className="form-button" + type="submit" + color="primary" + disabled={loading} + > + <div className="authform-button-content"> + <div className="authform-button-content-icon"> + {icon && <StyledIcon icon={icon} size={48} />} + </div> + <div className="authform-button-text text-18-bold"> + <div>{t('auth.' + fluidConfig.name + '.connect.label1')}</div> + <div>{t('auth.' + fluidConfig.name + '.connect.label2')}</div> + </div> </div> - <div className="kauthform-button-text text-18-bold"> - <div>{t('auth.' + fluidConfig.name + '.connect.label1')}</div> - <div>{t('auth.' + fluidConfig.name + '.connect.label2')}</div> - </div> - </div> - </StyledAuthButton> - </div> - <div className="kloginauthform-text text-16-bold"> - <div className="text-16-bold"> - {t('auth.' + fluidConfig.name + '.no_account.title')} + </StyledAuthButton> </div> - <div className="text-16-normal"> - {t('auth.' + fluidConfig.name + '.no_account.text')} + <div className="kloginauthform-text text-16-bold"> + <div className="text-16-bold"> + {t('auth.' + fluidConfig.name + '.no_account.title')} + </div> + <div className="text-16-normal"> + {t('auth.' + fluidConfig.name + '.no_account.text')} + </div> </div> + <StyledButton + type="button" + color="secondary" + disabled={loading} + onClick={() => window.open(siteLink, '_blank')} + > + {t('auth.' + fluidConfig.name + '.create_account')} + </StyledButton> </div> - <StyledButton - type="button" - color="secondary" - disabled={loading} - onClick={() => window.open(siteLink, '_blank')} - > - {t('auth.' + fluidConfig.name + '.create_account')} - </StyledButton> </form> ) } diff --git a/src/components/ContentComponents/OAuth/OAuthForm.tsx b/src/components/ContentComponents/OAuth/OAuthForm.tsx index e05577f6e3ea10cfe9374612b2eff21121224941..aae44d9b810140423e3b4e6af23d42e01156b7da 100644 --- a/src/components/ContentComponents/OAuth/OAuthForm.tsx +++ b/src/components/ContentComponents/OAuth/OAuthForm.tsx @@ -55,15 +55,15 @@ const OAuthForm: React.FC<OAuthFormProps> = ({ onClick={handleSubmit} disabled={isWaiting} > - <div className="oauthform-button-content"> - <div className="oauthform-button-content-icon"> + <div className="authform-button-content"> + <div className="authform-button-content-icon"> {isWaiting ? ( <StyledBlackSpinner size={48} /> ) : ( <StyledIcon icon={iconEnedisLogo} size={48} /> )} </div> - <div className="oauthform-button-text text-18-bold"> + <div className="authform-button-text text-18-bold"> <div>{t('auth.' + konnector.slug + '.connect.label1')}</div> <div>{t('auth.' + konnector.slug + '.connect.label2')}</div> </div> diff --git a/src/styles/components/_auth.scss b/src/styles/components/_auth.scss index 7361443138f2eab3025c39a88ef28ec7b458d686..b4c77eef0258d030e6a89e138a2671a7884e63e7 100644 --- a/src/styles/components/_auth.scss +++ b/src/styles/components/_auth.scss @@ -6,40 +6,17 @@ justify-content: center; align-items: center; width: 100%; - .authform-button-text{ - display: flex; - flex-direction: column; - align-items: flex-start; - text-align: left; - margin-left: 1.25rem; - } -} - -.oauthform-button-content{ - display: flex; - justify-content: center; - align-items: center; - width: 100%; - .oauthform-button-text{ - display: flex; - flex-direction: column; - align-items: flex-start; - text-align: left; - margin-left: 1.25rem; + @media #{$large-phone} { + justify-content: left; } -} - -.nooauthform-button-content{ - display: flex; - justify-content: center; - align-items: center; - .nooauthform-button-content-icon{ + .authform-button-content-icon{ margin: 0 1.375rem; } - .nooauthform-button-text{ + .authform-button-text{ display: flex; flex-direction: column; align-items: flex-start; text-align: left; + max-width: 10.625rem; } } \ No newline at end of file diff --git a/src/styles/components/_konnector.scss b/src/styles/components/_konnector.scss index 489feeeea72d4ffa069d4e6530c6f1ff6073593c..f45481cfd8e0624d746c808dea141381217c6f40 100644 --- a/src/styles/components/_konnector.scss +++ b/src/styles/components/_konnector.scss @@ -143,20 +143,17 @@ } // KonnectorLoginForm -.kloginauthform{ - margin: 0 1.5rem; - @media #{$large-phone} { - margin: 0; - } - .kloginauthform-text{ +.kloginauthform { + .kloginauthform-text { color: $text-bright; padding-top: 1rem; } - .kloginauthform-button{ + .kloginauthform-button { margin-bottom: 1rem; } } + // KonnectorLoading .klaunch-content { margin: 0.5rem 1.5rem;