From 02d5d767f484c37decae086753ab08fd37f14464 Mon Sep 17 00:00:00 2001
From: Nicolas Pagny <npagny@grandlyon.com>
Date: Thu, 4 Jun 2020 14:28:00 +0200
Subject: [PATCH] Seperating oauth and nooauth styles
---
.../Konnector/KonnectorForm.tsx | 12 ++++++------
src/styles/components/_konnector.scss | 15 +++++++++++++++
src/styles/components/_nooauth.scss | 17 +++++++++++++++++
src/styles/index.scss | 1 +
4 files changed, 39 insertions(+), 6 deletions(-)
create mode 100644 src/styles/components/_nooauth.scss
diff --git a/src/components/ContentComponents/Konnector/KonnectorForm.tsx b/src/components/ContentComponents/Konnector/KonnectorForm.tsx
index c2fb1577b..cfd77ac8e 100644
--- a/src/components/ContentComponents/Konnector/KonnectorForm.tsx
+++ b/src/components/ContentComponents/Konnector/KonnectorForm.tsx
@@ -111,13 +111,13 @@ const KonnectorForm: React.FC<KonnectorFormProps> = ({
</span>
</div>
- <div className="koauthform-button">
- <StyledNoOauthButton type="submit" color="primary">
- <div className="oauthform-button-content">
- <div className="oauthform-button-content-icon">
+ <div className="knooauthform-button">
+ <StyledNoOauthButton type="submit" color="primary" disabled={loading}>
+ <div className="nooauthform-button-content">
+ <div className="nooauthform-button-content-icon">
{icon && <StyledIcon icon={icon} size={48} />}
</div>
- <div className="oauthform-button-text text-18-bold">
+ <div className="nooauthform-button-text text-18-bold">
<div>
{t('nooauth.connection.text')}{' '}
{t('nooauth.' + fluidConfig.name + '.text')}
@@ -127,7 +127,7 @@ const KonnectorForm: React.FC<KonnectorFormProps> = ({
</StyledNoOauthButton>
</div>
<br />
- <div className="koauthform-text text-16-bold">
+ <div className="knooauthform-text text-16-bold">
<div className="text-16-bold">
{t('nooauth.creation.no_account')}{' '}
{t('nooauth.' + fluidConfig.name + '.text')} ?
diff --git a/src/styles/components/_konnector.scss b/src/styles/components/_konnector.scss
index f12600f8c..41704c852 100644
--- a/src/styles/components/_konnector.scss
+++ b/src/styles/components/_konnector.scss
@@ -126,6 +126,21 @@
}
}
+// KonnectorForm
+.knooauthform{
+ margin: 0 1.5rem;
+ @media #{$large-phone} {
+ margin: 0;
+ }
+ .knooauthform-text{
+ color: $text-bright;
+ padding-top: 1rem;
+ }
+ .knooauthform-button{
+ margin-bottom: 1rem;
+ }
+}
+
// KonnectorLoading
.kload-content {
margin: 0.5rem 1.5rem;
diff --git a/src/styles/components/_nooauth.scss b/src/styles/components/_nooauth.scss
new file mode 100644
index 000000000..3c418a4b5
--- /dev/null
+++ b/src/styles/components/_nooauth.scss
@@ -0,0 +1,17 @@
+@import '../base/color';
+@import '../base/breakpoint';
+
+.nooauthform-button-content{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ .nooauthform-button-content-icon{
+ margin: 0 1.375rem;
+ }
+ .nooauthform-button-text{
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ text-align: left;
+ }
+}
\ No newline at end of file
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 840c8d99c..3844047fa 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -23,6 +23,7 @@
@import 'components/faq';
@import 'components/splash';
@import 'components/oauth';
+@import 'components/nooauth';
:root {
--blue: #{$blue};
--
GitLab