From cdf707bfeabeae19ab0cb56d77ed3149c6073bd7 Mon Sep 17 00:00:00 2001
From: Kristof De Langhe <kristof.delanghe@atmire.com>
Date: Tue, 15 May 2018 11:34:45 +0200
Subject: [PATCH] Notification style fix

---
 package.json                                    |  2 +-
 .../notification/notification.component.html    |  2 +-
 .../notification/notification.component.scss    |  6 ++++++
 .../notifications-board.component.scss          | 17 +++++++++--------
 src/styles/_bootstrap_variables.scss            |  1 +
 src/styles/_mixins.scss                         | 14 +++++++++++++-
 yarn.lock                                       |  6 +++---
 7 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 2878daf1c8..706606038e 100644
--- a/package.json
+++ b/package.json
@@ -89,7 +89,7 @@
     "angular-idle-preload": "2.0.4",
     "angulartics2": "^5.2.0",
     "body-parser": "1.18.2",
-    "bootstrap": "^4.0.0",
+    "bootstrap": "4.1.1",
     "cerialize": "0.1.18",
     "compression": "1.7.1",
     "cookie-parser": "1.4.3",
diff --git a/src/app/shared/notifications/notification/notification.component.html b/src/app/shared/notifications/notification/notification.component.html
index 561e10263c..b35d6dee59 100644
--- a/src/app/shared/notifications/notification/notification.component.html
+++ b/src/app/shared/notifications/notification/notification.component.html
@@ -1,4 +1,4 @@
-<div class="alert {{notification.type}} alert-dismissible p-3" role="alert"
+<div class="alert {{notification.type}} alert-dismissible m-3 shadow" role="alert"
      [@enterLeave]="animate">
 
   <div class="notification-progress-loader position-absolute w-100" *ngIf="showProgressBar">
diff --git a/src/app/shared/notifications/notification/notification.component.scss b/src/app/shared/notifications/notification/notification.component.scss
index c433cd1e4d..1c8f0ae17c 100644
--- a/src/app/shared/notifications/notification/notification.component.scss
+++ b/src/app/shared/notifications/notification/notification.component.scss
@@ -1,5 +1,11 @@
 @import '../../../../styles/variables.scss';
 
+.alert {
+  display: inline-block;
+  min-width: $modal-sm;
+  text-align: left;
+}
+
 .close {
   outline: none !important
 }
diff --git a/src/app/shared/notifications/notifications-board/notifications-board.component.scss b/src/app/shared/notifications/notifications-board/notifications-board.component.scss
index 0dd1584c4e..28018e3b7e 100644
--- a/src/app/shared/notifications/notifications-board/notifications-board.component.scss
+++ b/src/app/shared/notifications/notifications-board/notifications-board.component.scss
@@ -2,24 +2,25 @@
 @import '../../../../styles/mixins';
 
 .notifications-wrapper {
-  width: 300px;
-  z-index: 1051;
+  z-index: $zindex-popover;
+  text-align: right;
+  @include word-wrap;
 }
 
 .notifications-wrapper.left {
-  left: 20px;
+  left: 0;
 }
 
 .notifications-wrapper.top {
-  top: 20px;
+  top:0;
 }
 
 .notifications-wrapper.right {
-  right: 20px;
+  right: 0;
 }
 
 .notifications-wrapper.bottom {
-  bottom: 20px;
+  bottom: 0;
 }
 
 .notifications-wrapper.center {
@@ -39,7 +40,7 @@
 @media screen and (max-width: map-get($grid-breakpoints, sm)) {
   .notifications-wrapper {
     width: auto;
-    left: 20px;
-    right: 20px;
+    left: 0;
+    right: 0;
   }
 }
diff --git a/src/styles/_bootstrap_variables.scss b/src/styles/_bootstrap_variables.scss
index a57d2deddf..ea89a3a0d5 100644
--- a/src/styles/_bootstrap_variables.scss
+++ b/src/styles/_bootstrap_variables.scss
@@ -34,3 +34,4 @@ $navbar-light-color:                rgba(black, .5) !default;
 $navbar-dark-toggler-icon-bg: url("data%3Aimage%2Fsvg+xml%3Bcharset%3Dutf8%2C%3Csvg+viewBox%3D%270+0+30+30%27+xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath+stroke%3D%27#{$navbar-dark-color}%27+stroke-width%3D%272%27+stroke-linecap%3D%27round%27+stroke-miterlimit%3D%2710%27+d%3D%27M4+7h22M4+15h22M4+23h22%27%2F%3E%3C%2Fsvg%3E");
 $navbar-light-toggler-icon-bg: url("data%3Aimage%2Fsvg+xml%3Bcharset%3Dutf8%2C%3Csvg+viewBox%3D%270+0+30+30%27+xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath+stroke%3D%27#{$navbar-light-color}%27+stroke-width%3D%272%27+stroke-linecap%3D%27round%27+stroke-miterlimit%3D%2710%27+d%3D%27M4+7h22M4+15h22M4+23h22%27%2F%3E%3C%2Fsvg%3E");
 
+$enable-shadows: true !default;
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 564ffc7755..2155396164 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -1,3 +1,15 @@
 @import '../../node_modules/bootstrap/scss/functions.scss';
 @import '../../node_modules/bootstrap/scss/mixins.scss';
-@import '../../node_modules/bootstrap/scss/variables.scss';
\ No newline at end of file
+@import '../../node_modules/bootstrap/scss/variables.scss';
+
+@mixin word-wrap() {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  -ms-word-break: break-all;
+  word-break: break-all;
+  word-break: break-word;
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+}
diff --git a/yarn.lock b/yarn.lock
index bb571e8d6c..e7f52732a3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1038,9 +1038,9 @@ boom@5.x.x:
   dependencies:
     hoek "4.x.x"
 
-bootstrap@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0.tgz#ceb03842c145fcc1b9b4e15da2a05656ba68469a"
+bootstrap@4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.1.tgz#3aec85000fa619085da8d2e4983dfd67cf2114cb"
 
 boxen@^1.2.1:
   version "1.3.0"