feat: design for login form

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

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>

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

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;