feat: change Oauth form display

src/assets/icons/visu/enedis-logo.svg

+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 10C0 4.47715 4.47715 0 10 0H38C43.5229 0 48 4.47715 48 10V38C48 43.5229 43.5228 48 38 48H0V10Z" fill="black"/>
+<path d="M0 21V28H9V30C9 36.6274 14.3726 42 21 42H47.1679C47.7031 40.775 48 39.4222 48 38V35H21C18.2386 35 16 32.7615 16 30V28H33C36.3137 28 39 25.3137 39 22V12C39 8.68628 36.3137 6 33 6H15C11.6863 6 9 8.68628 9 12V19H16V16C16 14.3431 17.3431 13 19 13H29C30.6569 13 32 14.3431 32 16V18C32 19.6569 30.6569 21 29 21H0Z" fill="#F1C017"/>
+</svg>

src/components/CommonKit/Button/StyledOauthButton.tsx

+import React from 'react'
+import MuiButton, { ButtonProps } from '@material-ui/core/Button'
+import {
+  withStyles,
+  MuiThemeProvider,
+  createMuiTheme,
+} from '@material-ui/core/styles'
+
+const theme = createMuiTheme({
+  typography: {
+    useNextVariants: true,
+  },
+  shape: {
+    borderRadius: 2,
+  },
+  palette: {
+    primary: {
+      main: '#E3B82A',
+    },
+    secondary: {
+      main: '#7B7B7B',
+    },
+  },
+})
+
+const BaseButton = withStyles({
+  root: {
+    height: '5rem',
+    margin: '1.5rem 0 0 0',
+    padding: '0px 1px',
+  },
+  label: {
+    textTransform: 'none',
+    fontFamily: 'Lato, sans-serif',
+    fontStyle: 'normal',
+    fontSize: '1rem',
+    lineHeight: '120%',
+  },
+})(MuiButton)
+
+const PrimaryButton = withStyles({
+  root: {
+    background: 'var(--multiColorRadialGradient)',
+  },
+  label: {
+    color: '#000000',
+    fontWeight: 'bold',
+  },
+})(BaseButton)
+
+const SecondaryButton = withStyles({
+  root: {
+    border: '1px solid #121212',
+  },
+  label: {
+    color: '#E0E0E0',
+    fontWeight: 'normal',
+  },
+})(BaseButton)
+
+function MyButton(props: ButtonProps) {
+  return props.color === 'secondary' ? (
+    <SecondaryButton
+      fullWidth
+      color="secondary"
+      variant="outlined"
+      {...props}
+    />
+  ) : (
+    <PrimaryButton fullWidth color="primary" variant="contained" {...props} />
+  )
+}
+
+const StyledOauthButton: React.ComponentType<ButtonProps> = props => {
+  return (
+    <>
+      <MuiThemeProvider theme={theme}>
+        <MyButton {...props}>{props.children}</MyButton>
+      </MuiThemeProvider>
+    </>
+  )
+}
+
+StyledOauthButton.defaultProps = {
+  color: 'primary',
+}
+
+export default StyledOauthButton

src/components/ContentComponents/Konnector/KonnectorOAuthForm.tsx

 import React from 'react'
 import { translate } from 'cozy-ui/react/I18n'
 
-import OAuthForm from 'components/ContentComponents/OAuth/OAuthForm'
 import { Konnector } from 'doctypes'
+import OAuthForm from 'components/ContentComponents/OAuth/OAuthForm'
+import StyledButton from 'components/CommonKit/Button/StyledButton'
 
 interface KonnectorOAuthFormProps {
   konnector: Konnector
@@ -18,9 +19,26 @@ const KonnectorOAuthForm: React.FC<KonnectorOAuthFormProps> = ({
   t,
 }: KonnectorOAuthFormProps) => {
   return (
-    <div>
-      {t('oauth.connect.' + konnector.slug)}
-      <OAuthForm konnector={konnector} onSuccess={onSuccess} />
+    <div className="koauthform">
+      <div className="koauthform-text text-16-normal">
+        {t('oauth.connect.' + konnector.slug + '.info')}
+      </div>
+      <div className="koauthform-button">
+        <OAuthForm konnector={konnector} onSuccess={onSuccess} />
+      </div>
+      <div className="koauthform-text text-16-bold">
+        <div className="text-16-bold">
+          {t('oauth.no_account.' + konnector.slug + '.title')}
+        </div>
+        <div className="text-16-normal">
+          {t('oauth.no_account.' + konnector.slug + '.text')}
+        </div>
+      </div>
+      <div className="koauthform-button">
+        <StyledButton type="button" color="secondary" disabled={loading}>
+          {t('oauth.create_account.' + konnector.slug)}
+        </StyledButton>
+      </div>
     </div>
   )
 }

src/components/ContentComponents/OAuth/OAuthForm.tsx

-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import { Client, withClient } from 'cozy-client'
 import { translate } from 'cozy-ui/react/I18n'
 
 import { Konnector } from 'doctypes'
-import KonnectorService from 'services/konnectorService'
-
 import { OAuthWindow } from 'cozy-harvest-lib/dist/components/OAuthWindow'
 
-import StyledButton from 'components/CommonKit/Button/StyledButton'
+import iconEnedisLogo from 'assets/icons/visu/enedis-logo.svg'
+import StyledOauthButton from 'components/CommonKit/Button/StyledOauthButton'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 
 interface OAuthFormProps {
   konnector: Konnector
@@ -47,14 +47,22 @@ const OAuthForm: React.FC<OAuthFormProps> = ({
   const isWaiting = status === WAITING
   return !konnector ? null : (
     <>
-      <StyledButton
+      <StyledOauthButton
         type="button"
         color="primary"
         onClick={handleSubmit}
         disabled={isWaiting}
       >
-        {t('oauth.connect.label')}
-      </StyledButton>
+        <div className="oauthform-button-content">
+          <div className="oauthform-button-content-icon">
+            <StyledIcon icon={iconEnedisLogo} size={48} />
+          </div>
+          <div className="oauthform-button-text text-18-bold">
+            <div>{t('oauth.connect.' + konnector.slug + '.label1')}</div>
+            <div>{t('oauth.connect.' + konnector.slug + '.label2')}</div>
+          </div>
+        </div>
+      </StyledOauthButton>
       {isWaiting && (
         <OAuthWindow
           client={client}

src/locales/en.json

@@ -172,8 +172,20 @@
   },
   "oauth": {
     "connect": {
-      "enedis": "En cliquant sur ce bouton, vous allez accéder à votre compte personnel Enedis où vous pourrez donner votre accord pour qu’Enedis nous transmette vos données.",
-      "label": "Connexion"
+      "enedis": {
+        "info" : "En cliquant sur ce bouton, vous allez accéder à votre compte personnel Enedis où vous pourrez donner votre accord pour qu’Enedis nous transmette vos données.",
+        "label1": "J'accède à mon",
+        "label2": "espace client Enedis"
+      }
+    },
+    "no_account" : {
+      "enedis" : {
+        "title": "Pas de compte Enedis ?",
+        "text": "Vous pouvez le créer en vous munissant d'une facture d'élétricité."
+      }
+    },
+    "create_account": {
+      "enedis": "Je créé mon compte personnal Enedis"
     },
     "window": {
       "title": "OAuth"

src/styles/components/_konnector.scss

@@ -105,6 +105,16 @@
   }
 }
 
+.koauthform{
+  .koauthform-text{
+    color: $text-bright;
+    padding-top: 1rem;
+  }
+  .koauthform-button{
+    margin-bottom: 1rem;
+  }
+}
+
 .state-icon {
   height: 22px;
   width: 22px;

src/styles/components/_oauth.scss

+@import '../base/color';
+@import '../base/breakpoint';
+
+.oauthform-button-content{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .oauthform-button-content-icon{
+    margin: 0 1.375rem;
+  }
+  .oauthform-button-text{
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
\ No newline at end of file

src/styles/index.scss

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