From 557bb1c9b0eb9c6a521a83161f07f5fe128f5295 Mon Sep 17 00:00:00 2001
From: gcarron <gcarron@grandlyon.com>
Date: Fri, 20 May 2022 17:04:53 +0200
Subject: [PATCH 1/2] feat(toastr): New toastr design
---
src/assets/ico/sprite.svg | 10 ++++++++++
src/assets/ico/toast-error.svg | 4 ++++
src/assets/ico/toast-success.svg | 3 +++
src/assets/scss/_color.scss | 1 +
src/styles.scss | 28 +++++++++++++++++++++++++++-
5 files changed, 45 insertions(+), 1 deletion(-)
create mode 100644 src/assets/ico/toast-error.svg
create mode 100644 src/assets/ico/toast-success.svg
diff --git a/src/assets/ico/sprite.svg b/src/assets/ico/sprite.svg
index 269660abc..73f22d30d 100644
--- a/src/assets/ico/sprite.svg
+++ b/src/assets/ico/sprite.svg
@@ -467,4 +467,14 @@
</defs>
</symbol>
+<symbol id="toastError" width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.8169 11.4821C27.3593 10.9397 28.2738 10.9749 28.8596 11.5607C29.4454 12.1464 29.4806 13.061 28.9382 13.6034L13.2247 29.3169C12.6823 29.8593 11.7677 29.8241 11.1819 29.2383C10.5962 28.6525 10.561 27.738 11.1034 27.1956L26.8169 11.4821Z" fill="#FF0000"/>
+<path d="M28.8169 27.5179C29.3593 28.0603 29.3241 28.9749 28.7383 29.5607C28.1525 30.1464 27.2379 30.1816 26.6955 29.6392L10.9821 13.9257C10.4397 13.3833 10.4748 12.4688 11.0606 11.883C11.6464 11.2972 12.561 11.262 13.1034 11.8044L28.8169 27.5179Z" fill="#FF0000"/>
+</symbol>
+
+<symbol id="toastSuccess" width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 21.1364L17.3889 27.5L23.1944 20.5L29 13.5" stroke="#47C562" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</symbol>
+
+
</svg>
diff --git a/src/assets/ico/toast-error.svg b/src/assets/ico/toast-error.svg
new file mode 100644
index 000000000..ee0c5fef9
--- /dev/null
+++ b/src/assets/ico/toast-error.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.8169 11.4821C27.3593 10.9397 28.2738 10.9749 28.8596 11.5607C29.4454 12.1464 29.4806 13.061 28.9382 13.6034L13.2247 29.3169C12.6823 29.8593 11.7677 29.8241 11.1819 29.2383C10.5962 28.6525 10.561 27.738 11.1034 27.1956L26.8169 11.4821Z" fill="#FF0000"/>
+<path d="M28.8169 27.5179C29.3593 28.0603 29.3241 28.9749 28.7383 29.5607C28.1525 30.1464 27.2379 30.1816 26.6955 29.6392L10.9821 13.9257C10.4397 13.3833 10.4748 12.4688 11.0606 11.883C11.6464 11.2972 12.561 11.262 13.1034 11.8044L28.8169 27.5179Z" fill="#FF0000"/>
+</svg>
diff --git a/src/assets/ico/toast-success.svg b/src/assets/ico/toast-success.svg
new file mode 100644
index 000000000..0e3288b11
--- /dev/null
+++ b/src/assets/ico/toast-success.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 21.1364L17.3889 27.5L23.1944 20.5L29 13.5" stroke="#47C562" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/scss/_color.scss b/src/assets/scss/_color.scss
index 5aeb2b9a1..eb80f1989 100644
--- a/src/assets/scss/_color.scss
+++ b/src/assets/scss/_color.scss
@@ -15,6 +15,7 @@ $grey-8: #f8f8f8;
$red: #da3635;
$red-dark: #b85959;
$red-1: #f35453;
+$red-error: #ff0000;
/* GOLD */
$gold: #bd9e6a;
/* form colors */
diff --git a/src/styles.scss b/src/styles.scss
index dbb591fe4..39285560a 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -75,7 +75,33 @@ a {
.bold {
font-weight: bold !important;
}
-
+//Toastr
+.ngx-toastr {
+ &.toast-success {
+ background: white;
+ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.25);
+ color: $grey-1;
+ border: solid 2px $green-1;
+ &::after {
+ content: url('/assets/ico/toast-success.svg') !important;
+ position: absolute !important;
+ top: 14px !important;
+ left: 5px !important;
+ }
+ }
+ &.toast-error {
+ background: white;
+ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.25);
+ color: $grey-1;
+ border: solid 2px $red-error;
+ &::after {
+ content: url('assets/ico/toast-error.svg') !important;
+ position: absolute !important;
+ top: 14px !important;
+ left: 5px !important;
+ }
+ }
+}
// Containers
.content-container {
margin: 0;
--
GitLab
From 0550551c675b5f3e6c7d756142ed79cae06c15f9 Mon Sep 17 00:00:00 2001
From: gcarron <gcarron@grandlyon.com>
Date: Mon, 23 May 2022 11:38:08 +0200
Subject: [PATCH 2/2] edit toast-info
---
src/assets/ico/toast-info.svg | 3 +++
src/styles.scss | 17 +++++++++++++++--
2 files changed, 18 insertions(+), 2 deletions(-)
create mode 100644 src/assets/ico/toast-info.svg
diff --git a/src/assets/ico/toast-info.svg b/src/assets/ico/toast-info.svg
new file mode 100644
index 000000000..96420e351
--- /dev/null
+++ b/src/assets/ico/toast-info.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34 20.5C34 28.232 27.732 34.5 20 34.5C12.268 34.5 6 28.232 6 20.5C6 12.768 12.268 6.5 20 6.5C27.732 6.5 34 12.768 34 20.5ZM20.0001 18.9999C20.8285 18.9999 21.5001 19.6715 21.5001 20.4999V27.4999C21.5001 28.3284 20.8285 28.9999 20.0001 29C19.1717 29 18.5001 28.3284 18.5001 27.5V20.4999C18.5001 19.6715 19.1717 18.9999 20.0001 18.9999ZM20 16.362C21.0665 16.362 21.931 15.4975 21.931 14.431C21.931 13.3645 21.0665 12.4999 20 12.4999C18.9335 12.4999 18.069 13.3645 18.069 14.431C18.069 15.4975 18.9335 16.362 20 16.362Z" fill="#2F96B4"/>
+</svg>
diff --git a/src/styles.scss b/src/styles.scss
index 39285560a..940e64df0 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -81,7 +81,7 @@ a {
background: white;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.25);
color: $grey-1;
- border: solid 2px $green-1;
+ border: solid 3px $green-1;
&::after {
content: url('/assets/ico/toast-success.svg') !important;
position: absolute !important;
@@ -93,7 +93,7 @@ a {
background: white;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.25);
color: $grey-1;
- border: solid 2px $red-error;
+ border: solid 3px $red-error;
&::after {
content: url('assets/ico/toast-error.svg') !important;
position: absolute !important;
@@ -101,7 +101,20 @@ a {
left: 5px !important;
}
}
+ &.toast-info {
+ background: white;
+ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.25);
+ color: $grey-1;
+ border: solid 3px $blue;
+ &::after {
+ content: url('assets/ico/toast-info.svg') !important;
+ position: absolute !important;
+ top: 30px !important;
+ left: 5px !important;
+ }
+ }
}
+
// Containers
.content-container {
margin: 0;
--
GitLab