Seperating oauth and nooauth styles

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')} ?

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;

src/styles/components/_nooauth.scss

+@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

src/styles/index.scss

@@ -23,6 +23,7 @@
 @import 'components/faq';
 @import 'components/splash';
 @import 'components/oauth';
+@import 'components/nooauth';
 
 :root {
   --blue: #{$blue};