diff --git a/src/app/profile/profile.component.scss b/src/app/profile/profile.component.scss index 50f831bd0b480351d3ba1edd610a51b51604c058..f2547348eb9a58390bbf3fbe56eff4323e321668 100644 --- a/src/app/profile/profile.component.scss +++ b/src/app/profile/profile.component.scss @@ -48,33 +48,8 @@ } .structureSection { margin-bottom: 108px; - .structureCard { - border: 1px solid $grey-4; - border-radius: 6px; - .structureInfo { - border-radius: 6px; - background: $white; - min-height: 100px; - padding: 33px 55px; - @media #{$large-phone} { - padding: 33px 25px; - } - a { - margin: 0; - &.structureName { - @include cn-bold-26; - color: $secondary-color; - text-decoration: underline; - } - } - .ownerName { - @include cn-regular-18; - color: $grey-2; - } - } - @include background-hash($grey-2); - } } + .addSection { button { background: $red-default; diff --git a/src/app/user-verification/user-verification.component.html b/src/app/user-verification/user-verification.component.html index 4d2ba4981ac457ac4d36ccc58add540002086830..628bb8efe98b0575616bac18c89923a28424e1f0 100644 --- a/src/app/user-verification/user-verification.component.html +++ b/src/app/user-verification/user-verification.component.html @@ -11,55 +11,34 @@ Votre compte a bien été créé. </h3> </div> - - <div *ngIf="structure" class="structureInfoBlock" fxLayout="row" fxLayoutAlign=" center"> - <div class="structureInfoContent" fxLayout="column"> - {{ structure.structureName }} - <span>{{ structure.getLabelTypeStructure() }}</span> + <div *ngIf="structure" class="structureCard"> + <div class="structureInfo" fxLayout="column" fxLayoutGap="14px"> + <div fxLayout="row" fxLayoutAlign="space-between start" fxLayoutGap="20px"> + <a class="structureName" routerLink="/home" [state]="{ data: structure }">{{ structure.structureName }}</a> + </div> </div> - <div class="validateSvg"> - <svg class="validate" aria-hidden="true"> - <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use> - </svg> - </div> - </div> - <div class="btnSection" fxLayout="row" fxLayoutAlign="space-around center"> - <button *ngIf="structure" class="btn" routerLink="/home" [state]="{ data: structure }">Voir ma structure</button> - <button class="btn tmp-form-link" routerLink="/home"> - <a - class="typeform-share button" - href="https://form.typeform.com/to/vfbLqfKe?typeform-medium=embed-snippet" - data-mode="popup" - data-size="100" - target="_blank" - rel="noopener noreferrer" - >Donnez nous votre avis ! - </a> - </button> </div> </div> <p *ngIf="verificationIssue"> Une erreur est survenue lors de la validation de votre email... Veuillez envoyer un mail au support. </p> - <script> - (function () { - var qs, - js, - q, - s, - d = document, - gi = d.getElementById, - ce = d.createElement, - gt = d.getElementsByTagName, - id = 'typef_orm_share', - b = 'https://embed.typeform.com/'; - if (!gi.call(d, id)) { - js = ce.call(d, 'script'); - js.id = id; - js.src = b + 'embed.js'; - q = gt.call(d, 'script')[0]; - q.parentNode.insertBefore(js, q); - } - })(); - </script> + <!-- TypeForm --> + <div *ngIf="!verificationIssue"> + <iframe + *ngIf="structure" + class="typeform-widget custom-form" + title="typeform" + src="https://form.typeform.com/to/m7DV3CdW?typeform-medium=embed-snippet" + ></iframe> + <div + *ngIf="!structure" + class="typeform-widget custom-form" + data-url="https://form.typeform.com/to/ASJH3B7Z?typeform-medium=embed-snippet" + ></div> + </div> + <div class="btnSection" fxLayout="row" fxLayoutAlign="space-around center"> + <button *ngIf="structure && verificationSuccess" class="btn" routerLink="/home" [state]="{ data: structure }"> + Voir ma structure + </button> + </div> </div> diff --git a/src/app/user-verification/user-verification.component.scss b/src/app/user-verification/user-verification.component.scss index e48bfc961dcf1783535832ad439a87fd2006d116..8fb73ba431f51da2407dd97c5b93067df7e95554 100644 --- a/src/app/user-verification/user-verification.component.scss +++ b/src/app/user-verification/user-verification.component.scss @@ -7,28 +7,7 @@ padding: 18px; margin: auto; } -.structureInfoBlock { - background: $green-1; - color: $white; - padding: 16px; - border-radius: 6px; - @include cn-bold-18; - .structureInfoContent { - width: 100%; - } - span { - font-style: italic; - @include cn-regular-14; - } - .validateSvg { - stroke: $white; - text-align: right; - svg { - height: 14px; - width: 14px; - } - } -} + .btn { background: $secondary-color; border-radius: 4px; @@ -57,3 +36,19 @@ color: $white !important; } } + +.custom-form { + width: 100%; + height: 480px; + border: none; +} + +// Override button style to be the same as typeform button +button { + margin: 0px; + max-width: 100%; + font-size: 24px !important; + line-height: 32px !important; + min-height: 48px; + width: 245px !important; +} diff --git a/src/index.html b/src/index.html index 034e83f362a671532cf29573af2a2b3ebd73ad4a..1dfbff37e98e160421dc47c16ab7c8bb99dff3ef 100644 --- a/src/index.html +++ b/src/index.html @@ -12,6 +12,7 @@ href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.72.0/dist/L.Control.Locate.min.css" /> <script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script> + <script src="https://embed.typeform.com/embed.js"></script> </head> <body> <app-root></app-root> diff --git a/src/styles.scss b/src/styles.scss index 966c57e678d6dba6efa711125c2345e7b9c6a4d1..24a7585c8aa811ce9c856b8210201b33fcc12604 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -239,3 +239,30 @@ button { transform: translate(-50%, -50%); } } + +.structureCard { + border: 1px solid $grey-4; + border-radius: 6px; + .structureInfo { + border-radius: 6px; + background: $white; + min-height: 100px; + padding: 33px 55px; + @media #{$large-phone} { + padding: 33px 25px; + } + a { + margin: 0; + &.structureName { + @include cn-bold-26; + color: $secondary-color; + text-decoration: underline; + } + } + .ownerName { + @include cn-regular-18; + color: $grey-2; + } + } + @include background-hash($grey-2); +}