From d1862485dc3a810d10fe25af4673572ecf622dae Mon Sep 17 00:00:00 2001 From: Tykayn Date: Thu, 10 Feb 2022 14:50:05 +0100 Subject: [PATCH] style in leaving creation popup --- .../core/components/home/home.component.html | 2 +- .../steps/step-four/step-four.component.html | 2 +- .../stepper/stepper.component.html | 15 ++-- .../stepper/stepper.component.scss | 74 ++++++++++++------- .../language-selector.component.html | 2 +- src/assets/i18n/en.json | 8 +- src/assets/i18n/fr.json | 5 +- src/assets/icons/x_blue.svg | 3 + src/styles/libraries/_overrides.scss | 22 ++++++ src/styles/partials/_responsive.scss | 3 + 10 files changed, 96 insertions(+), 40 deletions(-) create mode 100644 src/assets/icons/x_blue.svg diff --git a/src/app/core/components/home/home.component.html b/src/app/core/components/home/home.component.html index 35f739b4..f5aff473 100644 --- a/src/app/core/components/home/home.component.html +++ b/src/app/core/components/home/home.component.html @@ -56,7 +56,7 @@ class="button no-outline cancel-button-reject pull-right" (click)="focusOnCancelButton()" > - {{ 'SENTENCES.Close' | translate }} + {{ 'SENTENCES.Close' | translate }}
diff --git a/src/app/features/administration/form/steps/step-four/step-four.component.html b/src/app/features/administration/form/steps/step-four/step-four.component.html index 037b8352..f52b0f88 100644 --- a/src/app/features/administration/form/steps/step-four/step-four.component.html +++ b/src/app/features/administration/form/steps/step-four/step-four.component.html @@ -101,7 +101,7 @@ class="button cancel-button-reject pull-right has-text-right" (click)="closeModalAndFocusOnOpenModalButton()" > - {{ 'SENTENCES.Close' | translate }} + {{ 'SENTENCES.Close' | translate }}
diff --git a/src/app/features/administration/stepper/stepper.component.html b/src/app/features/administration/stepper/stepper.component.html index 62806bd1..935ed61c 100644 --- a/src/app/features/administration/stepper/stepper.component.html +++ b/src/app/features/administration/stepper/stepper.component.html @@ -89,7 +89,7 @@

{{ 'popup.cancel.title' | translate }}

-

+

{{ 'popup.cancel.main' | translate }}

- -
diff --git a/src/app/features/administration/stepper/stepper.component.scss b/src/app/features/administration/stepper/stepper.component.scss index 37e59086..b68214bf 100644 --- a/src/app/features/administration/stepper/stepper.component.scss +++ b/src/app/features/administration/stepper/stepper.component.scss @@ -19,8 +19,9 @@ width: 40%; float: left; } + .step-title-poll { - max-width: 18ch; + max-width: 40ch; text-overflow: ellipsis; display: inline-block !important; overflow: hidden; @@ -86,24 +87,19 @@ } } - .cancel-button { - line-height: $stepper-nav-height / 2; - height: $stepper-nav-height / 2; - padding: 0 1rem; - margin-top: 0.75rem; - color: $primary_color; - border-color: $primary_color; - - &:hover { - color: $white; - background: $primary_color; + #close_stepper { + border-radius: 3em; + .title { + margin-top: 2rem; + font-size: 24px; + color: $d-primary-intense; } - } - .cancel-button-reject-bottom { - background: $secondary_color; - color: $white; - margin-left: 1rem; + .description { + color: $font_color; + font-size: 1rem; + line-height: 1.25rem; + } } .step-info { @@ -145,21 +141,47 @@ height: 2rem; } + .cancel-button-stepper { + padding: 0 1rem; + height: auto; + margin-top: 0.75rem; + border-color: $primary_color; + color: $primary_color; + } + + .cancel-button-confirm { + color: $white !important; + background: $primary_color; + margin-left: 1rem; + margin-top: 0.75rem; + border-color: $primary_color !important; + padding: 10px 30px; + } + + .cancel-button-reject-bottom { + color: $primary_color !important; + border-color: $primary_color !important; + margin-top: 0.75rem; + padding: 10px 30px; + + &:hover { + color: $white; + background: $primary_color; + } + } .cancel-button-reject { background: none; color: $primary_color; margin-right: -1rem; - - i { - color: $primary_color; - margin-left: 1ch; + float: right; + .icon { + margin-left: 1rem; + height: 1rem; + width: 1rem; + margin-top: 0.15rem; + float: right; } } - - .cancel-button-confirm { - color: $secondary_color; - margin-right: 0; - } } .lang-selector-icon { diff --git a/src/app/shared/components/selectors/language-selector/language-selector.component.html b/src/app/shared/components/selectors/language-selector/language-selector.component.html index d5b058e0..90547121 100644 --- a/src/app/shared/components/selectors/language-selector/language-selector.component.html +++ b/src/app/shared/components/selectors/language-selector/language-selector.component.html @@ -21,7 +21,7 @@ class="button no-outline cancel-button-reject" (click)="focusOnCancelButton()" > - {{ 'SENTENCES.Close' | translate }} + {{ 'SENTENCES.Close' | translate }}

diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index f3f6537f..296c5a15 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -63,9 +63,13 @@ "description_constraint": "max chars" }, "popup": { + "languages": { + "title": "Choose your locale", + "validate": "Save" + }, "cancel": { - "title": "You will cancel your poll creation", - "main": "Do you really want to leave the poll creation ?", + "title": "You will leave this poll creation", + "main": "Do you really want to leave ?", "validate": "Yes, cancel poll", "reject": "No" } diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json index 89697535..3ea9734f 100755 --- a/src/assets/i18n/fr.json +++ b/src/assets/i18n/fr.json @@ -67,10 +67,9 @@ "title": "Choisissez votre langue", "validate": "Enregistrer" }, - "cancel": { - "title": "Vous allez annuler votre sondage", - "main": "Si vous annulez votre sondage vous perdrez toutes les informations saisies jusqu'à maintenant. Souhaitez-vous vraiment annuler ?", + "title": "Vous allez quitter le sondage", + "main": "Toutes les informations seront effacées.\nSouhaitez-vous vraiment quitter ?", "validate": "Oui, quitter", "reject": "Non" } diff --git a/src/assets/icons/x_blue.svg b/src/assets/icons/x_blue.svg new file mode 100644 index 00000000..b59172fc --- /dev/null +++ b/src/assets/icons/x_blue.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/styles/libraries/_overrides.scss b/src/styles/libraries/_overrides.scss index 1f847af9..d3d03b32 100644 --- a/src/styles/libraries/_overrides.scss +++ b/src/styles/libraries/_overrides.scss @@ -19,3 +19,25 @@ $input-shadow: none; display: block !important; width: 80%; } + +// modal dialog +.p-dialog { + background: blue !important; +} +.cancel-button-reject { + background: none; + color: $primary_color; + margin-right: -1rem; + float: right; + .icon { + margin-left: 1rem; + height: 1rem; + width: 1rem; + margin-top: 0.15rem; + float: right; + } +} + +.round-borders { + border-radius: 1rem !important; +} diff --git a/src/styles/partials/_responsive.scss b/src/styles/partials/_responsive.scss index 3a491701..1d07c9b5 100644 --- a/src/styles/partials/_responsive.scss +++ b/src/styles/partials/_responsive.scss @@ -26,6 +26,9 @@ margin-top: 0; } } + .step-title-poll { + max-width: 18ch; + } } @media (min-width: 380px) { .feedback-container {