From c388f2c8c539488d753a494a963ca505a8c33178 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Tue, 31 May 2022 10:49:52 +0200
Subject: [PATCH] fix(design): various return on alignments and icons
---
.../information-step.component.html | 4 +-
.../information-step.component.scss | 8 +-
.../progress-bar/progress-bar.component.scss | 2 +-
.../structure-access-modality.component.html | 2 +-
.../components/button/button.component.scss | 6 +-
.../checkbox-form.component.scss | 4 +
.../modal-filter/modal-filter.component.scss | 2 +-
src/assets/form/sprite.svg | 83 +++++--------------
src/styles.scss | 1 +
9 files changed, 44 insertions(+), 68 deletions(-)
diff --git a/src/app/form/form-view/global-components/information-step/information-step.component.html b/src/app/form/form-view/global-components/information-step/information-step.component.html
index 43051fda0..9af833f1d 100644
--- a/src/app/form/form-view/global-components/information-step/information-step.component.html
+++ b/src/app/form/form-view/global-components/information-step/information-step.component.html
@@ -65,7 +65,7 @@
Votre structure ne disposant ni d’accompagnement, ni de formation, elle n’apparaitra pas sur
Rés’in.
</h3>
- <p>Votre profil a bien été mis à jour.</p>
+ <p class="no-margin-top">Votre profil a bien été mis à jour.</p>
<div class="btn">
<app-button
[style]="buttonTypeEnum.Primary"
@@ -84,8 +84,8 @@
"
>
<div class="information-step-container profile-updated no-max-width">
- <h3>Merci, les informations de votre profil ont été mises à jour</h3>
<img src="../../assets/form/profileUpdated.svg" alt="image profil" />
+ <h3>Merci, les informations de votre profil ont été mises à jour</h3>
<div class="btn">
<app-button
[style]="buttonTypeEnum.Primary"
diff --git a/src/app/form/form-view/global-components/information-step/information-step.component.scss b/src/app/form/form-view/global-components/information-step/information-step.component.scss
index db5e928d0..7509b7bba 100644
--- a/src/app/form/form-view/global-components/information-step/information-step.component.scss
+++ b/src/app/form/form-view/global-components/information-step/information-step.component.scss
@@ -36,7 +36,8 @@
p {
@include lato-regular-18;
- margin: 0;
+ margin-bottom: 0;
+ margin-top: 1em;
}
span {
@include lato-bold-24;
@@ -86,6 +87,7 @@
&.profile-updated {
.centered {
text-align: center;
+ font-weight: normal;
}
.btn {
margin-top: 17px;
@@ -116,3 +118,7 @@
height: 180px;
}
}
+
+.no-margin-top {
+ margin-top: unset !important;
+}
diff --git a/src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss b/src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss
index 44fa546dd..2c9f96348 100644
--- a/src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss
+++ b/src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss
@@ -6,7 +6,7 @@
.progressBar {
height: #{$progressBar-height};
max-width: 980px;
- margin: 16px auto;
+ margin: 16px auto 8px auto;
@media #{$tablet} {
margin: 0px 4px;
diff --git a/src/app/form/form-view/structure-form/structure-access-modality/structure-access-modality.component.html b/src/app/form/form-view/structure-form/structure-access-modality/structure-access-modality.component.html
index fa182c437..92df73478 100644
--- a/src/app/form/form-view/structure-form/structure-access-modality/structure-access-modality.component.html
+++ b/src/app/form/form-view/structure-form/structure-access-modality/structure-access-modality.component.html
@@ -16,7 +16,7 @@
<app-svg-icon [iconClass]="'icon-26'" [type]="'form'" [icon]="'notValidate'" class="validationIcon"></app-svg-icon>
<span>Il faut renseigner au moins un champ</span>
</p>
- <div *ngIf="accessModality" fxLayout="row wrap" fxLayoutGap="16px" fxLayoutAlign="flex-start" class="welcomingTerms">
+ <div *ngIf="accessModality" fxLayout="column wrap" fxLayoutAlign="flex-start" class="welcomingTerms">
<app-checkbox-form
*ngFor="let module of accessModality.modules"
[isChecked]="isInArray('accessModality', module.id)"
diff --git a/src/app/shared/components/button/button.component.scss b/src/app/shared/components/button/button.component.scss
index 844107305..2f34723d8 100644
--- a/src/app/shared/components/button/button.component.scss
+++ b/src/app/shared/components/button/button.component.scss
@@ -63,6 +63,7 @@ button {
.text {
background: $primary-color;
border: 1px solid $grey-1;
+ line-height: 15px;
color: $white;
&.withIcon {
@@ -83,6 +84,7 @@ button {
margin: auto;
color: $white;
width: auto;
+ line-height: 15px;
&.withIcon {
color: $white;
}
@@ -100,6 +102,7 @@ button {
margin: auto;
color: $grey-1;
width: auto;
+ line-height: 15px;
&.withIcon {
color: $grey-1;
}
@@ -117,6 +120,7 @@ button {
border: 1px solid $grey-1;
color: $grey-1;
font-size: 14px;
+ line-height: 15px;
&.withIcon {
color: $grey-1;
}
@@ -221,7 +225,6 @@ button {
top: -1px;
right: -1px;
border: 1px solid $grey-1;
-
background: $white;
height: 31px;
color: $grey-1;
@@ -230,6 +233,7 @@ button {
vertical-align: middle;
border-radius: 4px;
font-size: 14px;
+ line-height: 15px;
&.withIcon {
color: $black;
height: 36px;
diff --git a/src/app/shared/components/checkbox-form/checkbox-form.component.scss b/src/app/shared/components/checkbox-form/checkbox-form.component.scss
index 680ae5d99..36a9deb11 100644
--- a/src/app/shared/components/checkbox-form/checkbox-form.component.scss
+++ b/src/app/shared/components/checkbox-form/checkbox-form.component.scss
@@ -45,4 +45,8 @@ button {
background: $white;
border: 3px solid $green-1;
}
+ .checkmark {
+ width: 24px;
+ height: 24px;
+ }
}
diff --git a/src/app/structure-list/components/modal-filter/modal-filter.component.scss b/src/app/structure-list/components/modal-filter/modal-filter.component.scss
index c74aa4544..c443be97c 100644
--- a/src/app/structure-list/components/modal-filter/modal-filter.component.scss
+++ b/src/app/structure-list/components/modal-filter/modal-filter.component.scss
@@ -87,6 +87,7 @@
.blockFiltre {
width: auto;
margin: 25px 20px;
+ margin-bottom: calc(25px - 1rem);
min-width: 200px;
@media #{$large-phone} {
@@ -151,7 +152,6 @@
}
.footer {
box-sizing: border-box;
- height: 50px;
padding: 0.5rem;
.reset {
width: 45%;
diff --git a/src/assets/form/sprite.svg b/src/assets/form/sprite.svg
index 3dd06aaf7..c5874854f 100644
--- a/src/assets/form/sprite.svg
+++ b/src/assets/form/sprite.svg
@@ -121,33 +121,34 @@ d="M11.3335 4.44447C11.3335 4.44447 10.9446 4.88892 10.1668 4.88892C9.38905 4.88
stroke="none" />
</symbol>
-<symbol id="accesLibre" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">
-<rect x="22" y="8" width="10" height="28" fill="white" stroke="#4F4F4F" stroke-width="2"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10 5V37L23 43.5L23 0.5L10 5ZM19 23C19 21.8954 19.8954 21 21 21V25C19.8954 25 19 24.1046 19 23Z" stroke="none"/>
-<rect x="33" y="35" width="3" height="2" fill="#4F4F4F" stroke="none"/>
-<rect x="7" y="35" width="3" height="2" fill="#4F4F4F" stroke="none"/>
+
+
+<symbol id="accesLibre" width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="16.75" y="7.75" width="15.5" height="28.5" fill="white" stroke="#333333" stroke-width="1.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 5V37L23 43.5L23 0.5L10 5ZM19 23C19 21.8954 19.8954 21 21 21V25C19.8954 25 19 24.1046 19 23Z" fill="#DA3635"/>
+<path d="M33 35.5H35.25C35.6642 35.5 36 35.8358 36 36.25C36 36.6642 35.6642 37 35.25 37H33V35.5Z" fill="#333333"/>
+<path d="M7 36.25C7 35.8358 7.33579 35.5 7.75 35.5H10V37H7.75C7.33579 37 7 36.6642 7 36.25Z" fill="#333333"/>
</symbol>
-<symbol id="surRdv" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.1111 6C12.1293 6 11.3333 6.79594 11.3333 7.77778V9.55556H7.77778C6.79594 9.55556 6 10.3515 6 11.3333V36.2222C6 37.2041 6.79594 38 7.77778 38H36.2222C37.2041 38 38 37.2041 38 36.2222V11.3333C38 10.3515 37.2041 9.55556 36.2222 9.55556H32.6667V7.77778C32.6667 6.79594 31.8707 6 30.8889 6C29.9071 6 29.1111 6.79594 29.1111 7.77778V9.55556H14.8889V7.77778C14.8889 6.79594 14.093 6 13.1111 6ZM7.77778 16.2222V36.2222H36.2222V16.2222H7.77778Z" fill="#4F4F4F" stroke="none"/>
-<rect x="7.77783" y="15.7778" width="28.4444" height="20.4444" fill="white" stroke="none"/>
-<path d="M16.6666 26.3636L20.8148 30L27.3333 22" fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+
+<symbol id="surRdv" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 16H37V34C37 35.6569 35.6569 37 34 37H10C8.34315 37 7 35.6569 7 34V16Z" fill="white"/>
+<path d="M16.6665 26.3636L20.8147 30L27.3332 22" stroke="#DA3635" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="7" y="10" width="30" height="27" rx="3" stroke="#333333" stroke-width="1.5"/>
+<path d="M7 13C7 11.3431 8.34315 10 10 10H34C35.6569 10 37 11.3431 37 13V16H7V13Z" fill="#333333"/>
+<rect x="12" y="6" width="3" height="6" rx="1.5" fill="#333333"/>
+<rect x="29" y="6" width="3" height="6" rx="1.5" fill="#333333"/>
</symbol>
-<symbol id="telephoneVisio" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<path d="M25.0419 30.0674L20.6788 34.4303L11.9528 25.7043L16.3158 21.3413C16.8339 20.8232 16.8339 19.9845 16.3158 19.4678L9.6911 12.8431C9.17304 12.325 8.33434 12.325 7.81763 12.8431L3.45459 17.2061C3.45459 31.8693 14.5112 42.9285 29.177 42.9285L33.5401 38.5656C34.0581 38.0474 34.0581 37.2088 33.5401 36.692L26.9153 30.0674C26.3986 29.5506 25.5587 29.5506 25.0419 30.0674Z" fill="#4F4F4F" stroke="none"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M32.6799 24.3312C32.7893 21.4558 31.6409 18.5585 29.2978 16.5266C26.982 14.5183 23.9945 13.785 21.192 14.2656L19.7273 12.5443C23.4085 11.5374 27.5084 12.3275 30.6082 15.0156C33.7509 17.741 35.1078 21.7601 34.5737 25.5945L32.6799 24.3312Z" stroke="none"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M26.935 24.7419C26.8751 23.2343 26.2165 21.7539 24.9866 20.6874C23.7682 19.6308 22.2271 19.1867 20.7391 19.3283L19.2476 17.5754C21.6325 16.923 24.2887 17.4349 26.2969 19.1764C28.333 20.9421 29.2121 23.546 28.866 26.0301L26.935 24.7419Z" stroke="none"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M38.9258 23.3934C39.2657 18.7937 37.5047 14.0969 33.7522 10.8427C30.0465 7.62914 25.2228 6.53725 20.7641 7.46158L19.3115 5.75444C24.6404 4.29671 30.5754 5.44046 35.0626 9.33177C39.6119 13.277 41.5761 19.095 40.8029 24.6457L38.9258 23.3934Z" stroke="none"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<rect width="44" height="44" fill="white"/>
-</clipPath>
-</defs>
+
+<symbol id="telephoneVisio" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.418 29.0271L21.8168 30.6282C20.6452 31.7997 18.7458 31.7997 17.5742 30.6282L14.3719 27.4258C13.2003 26.2543 13.2003 24.3548 14.3719 23.1832L15.973 21.582C16.415 21.1401 16.415 20.4245 15.973 19.9836L10.3209 14.3315C9.87891 13.8895 9.16334 13.8895 8.72249 14.3315L5.87868 17.1753C5.31607 17.7379 4.99107 18.5021 5.03132 19.2967C5.61265 30.7735 14.2247 39.3873 25.7033 39.9687C26.4979 40.0089 27.2621 39.6839 27.8247 39.1214L30.6685 36.2776C31.1105 35.8355 31.1105 35.12 30.6685 34.6791L25.0164 29.0271C24.5756 28.5862 23.8589 28.5862 23.418 29.0271Z" fill="#333333"/>
+<path d="M33.1635 24.6539C33.3738 21.5337 32.17 18.3556 29.6254 16.1489C27.112 13.9693 23.8458 13.2188 20.8184 13.8266L19.7273 12.5444C23.4085 11.5374 27.5083 12.3275 30.6081 15.0156C33.7508 17.741 35.1077 21.7601 34.5736 25.5945L33.1635 24.6539Z" fill="#DA3635"/>
+<path d="M27.4385 25.0778C27.4697 23.3164 26.7492 21.5542 25.3142 20.3097C23.895 19.079 22.0736 18.6118 20.3513 18.8725L19.2476 17.5754C21.6325 16.923 24.2887 17.4349 26.2969 19.1764C28.333 20.9421 29.2121 23.546 28.866 26.0301L27.4385 25.0778Z" fill="#DA3635"/>
+<path d="M39.4012 23.7106C39.8462 18.8701 38.0324 13.8928 34.0797 10.465C30.1777 7.08122 25.0759 5.97452 20.3964 7.02957L19.3114 5.75447C24.6403 4.29674 30.5753 5.44049 35.0625 9.3318C39.6118 13.277 41.576 19.0951 40.8028 24.6457L39.4012 23.7106Z" fill="#DA3635"/>
</symbol>
+
<symbol id="twitter" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.1818 6.43077C17.7682 7.04615 17.2807 7.56923 16.7193 8V8.36923C16.7193 9.75385 16.4091 11.0923 15.7886 12.3846C15.1977 13.6769 14.2523 14.7692 12.9523 15.6615C11.6523 16.5538 10.1602 17 8.47614 17C6.85114 17 5.35909 16.5385 4 15.6154C4.20682 15.6462 4.44318 15.6615 4.70909 15.6615C6.03864 15.6615 7.23523 15.2308 8.29886 14.3692C7.67841 14.3692 7.11705 14.1846 6.61477 13.8154C6.1125 13.4154 5.77273 12.9077 5.59545 12.2923C6.06818 12.3538 6.51136 12.3385 6.925 12.2462C6.24545 12.0923 5.68409 11.7385 5.24091 11.1846C4.79773 10.6308 4.57614 9.98462 4.57614 9.24615V9.2C4.98977 9.44615 5.43295 9.58462 5.90568 9.61539C5.66932 9.43077 5.44773 9.2 5.24091 8.92308C5.03409 8.64615 4.87159 8.35385 4.75341 8.04615C4.63523 7.70769 4.57614 7.38462 4.57614 7.07692C4.57614 6.52308 4.70909 6.01539 4.975 5.55385C6.54091 7.52308 8.55 8.58462 11.0023 8.73846C10.7955 7.72308 10.9875 6.84615 11.5784 6.10769C12.1693 5.36923 12.9227 5 13.8386 5C14.6659 5 15.3602 5.32308 15.9216 5.96923C16.5716 5.84615 17.192 5.6 17.783 5.23077C17.5466 5.93846 17.1182 6.49231 16.4977 6.89231C17.0591 6.83077 17.6205 6.67692 18.1818 6.43077Z" fill="#696969"/>
</symbol>
@@ -750,46 +751,6 @@ stroke="none" />
<rect x="13.124" y="20" width="2" height="1" fill="white" stroke="none" />
</symbol>
- <symbol id="accesLibre" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">
- <rect x="22" y="8" width="10" height="28" fill="white" stroke="#4F4F4F" stroke-width="2" />
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M10 5V37L23 43.5L23 0.5L10 5ZM19 23C19 21.8954 19.8954 21 21 21V25C19.8954 25 19 24.1046 19 23Z"
- stroke="none" />
- <rect x="33" y="35" width="3" height="2" fill="#4F4F4F" stroke="none" />
- <rect x="7" y="35" width="3" height="2" fill="#4F4F4F" stroke="none" />
- </symbol>
-
- <symbol id="surRdv" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M13.1111 6C12.1293 6 11.3333 6.79594 11.3333 7.77778V9.55556H7.77778C6.79594 9.55556 6 10.3515 6 11.3333V36.2222C6 37.2041 6.79594 38 7.77778 38H36.2222C37.2041 38 38 37.2041 38 36.2222V11.3333C38 10.3515 37.2041 9.55556 36.2222 9.55556H32.6667V7.77778C32.6667 6.79594 31.8707 6 30.8889 6C29.9071 6 29.1111 6.79594 29.1111 7.77778V9.55556H14.8889V7.77778C14.8889 6.79594 14.093 6 13.1111 6ZM7.77778 16.2222V36.2222H36.2222V16.2222H7.77778Z"
- fill="#4F4F4F" stroke="none" />
- <rect x="7.77783" y="15.7778" width="28.4444" height="20.4444" fill="white" stroke="none" />
- <path d="M16.6666 26.3636L20.8148 30L27.3333 22" fill="none" stroke-width="4" stroke-linecap="round"
- stroke-linejoin="round" />
- </symbol>
-
- <symbol id="telephoneVisio" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">
- <g clip-path="url(#clip0)">
- <path
- d="M25.0419 30.0674L20.6788 34.4303L11.9528 25.7043L16.3158 21.3413C16.8339 20.8232 16.8339 19.9845 16.3158 19.4678L9.6911 12.8431C9.17304 12.325 8.33434 12.325 7.81763 12.8431L3.45459 17.2061C3.45459 31.8693 14.5112 42.9285 29.177 42.9285L33.5401 38.5656C34.0581 38.0474 34.0581 37.2088 33.5401 36.692L26.9153 30.0674C26.3986 29.5506 25.5587 29.5506 25.0419 30.0674Z"
- fill="#4F4F4F" stroke="none" />
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M32.6799 24.3312C32.7893 21.4558 31.6409 18.5585 29.2978 16.5266C26.982 14.5183 23.9945 13.785 21.192 14.2656L19.7273 12.5443C23.4085 11.5374 27.5084 12.3275 30.6082 15.0156C33.7509 17.741 35.1078 21.7601 34.5737 25.5945L32.6799 24.3312Z"
- stroke="none" />
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M26.935 24.7419C26.8751 23.2343 26.2165 21.7539 24.9866 20.6874C23.7682 19.6308 22.2271 19.1867 20.7391 19.3283L19.2476 17.5754C21.6325 16.923 24.2887 17.4349 26.2969 19.1764C28.333 20.9421 29.2121 23.546 28.866 26.0301L26.935 24.7419Z"
- stroke="none" />
- <path fill-rule="evenodd" clip-rule="evenodd"
- d="M38.9258 23.3934C39.2657 18.7937 37.5047 14.0969 33.7522 10.8427C30.0465 7.62914 25.2228 6.53725 20.7641 7.46158L19.3115 5.75444C24.6404 4.29671 30.5754 5.44046 35.0626 9.33177C39.6119 13.277 41.5761 19.095 40.8029 24.6457L38.9258 23.3934Z"
- stroke="none" />
- </g>
- <defs>
- <clipPath id="clip0">
- <rect width="44" height="44" fill="white" />
- </clipPath>
- </defs>
- </symbol>
-
<symbol id="twitter" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M18.1818 6.43077C17.7682 7.04615 17.2807 7.56923 16.7193 8V8.36923C16.7193 9.75385 16.4091 11.0923 15.7886 12.3846C15.1977 13.6769 14.2523 14.7692 12.9523 15.6615C11.6523 16.5538 10.1602 17 8.47614 17C6.85114 17 5.35909 16.5385 4 15.6154C4.20682 15.6462 4.44318 15.6615 4.70909 15.6615C6.03864 15.6615 7.23523 15.2308 8.29886 14.3692C7.67841 14.3692 7.11705 14.1846 6.61477 13.8154C6.1125 13.4154 5.77273 12.9077 5.59545 12.2923C6.06818 12.3538 6.51136 12.3385 6.925 12.2462C6.24545 12.0923 5.68409 11.7385 5.24091 11.1846C4.79773 10.6308 4.57614 9.98462 4.57614 9.24615V9.2C4.98977 9.44615 5.43295 9.58462 5.90568 9.61539C5.66932 9.43077 5.44773 9.2 5.24091 8.92308C5.03409 8.64615 4.87159 8.35385 4.75341 8.04615C4.63523 7.70769 4.57614 7.38462 4.57614 7.07692C4.57614 6.52308 4.70909 6.01539 4.975 5.55385C6.54091 7.52308 8.55 8.58462 11.0023 8.73846C10.7955 7.72308 10.9875 6.84615 11.5784 6.10769C12.1693 5.36923 12.9227 5 13.8386 5C14.6659 5 15.3602 5.32308 15.9216 5.96923C16.5716 5.84615 17.192 5.6 17.783 5.23077C17.5466 5.93846 17.1182 6.49231 16.4977 6.89231C17.0591 6.83077 17.6205 6.67692 18.1818 6.43077Z"
diff --git a/src/styles.scss b/src/styles.scss
index 76c2be28f..d3f5836ff 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -342,6 +342,7 @@ button {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
+ box-shadow: 0px 4px 16px rgb(0 0 0 / 25%);
}
}
--
GitLab