From 75a974a7908e01d0fb6eb640b4f533594055c688 Mon Sep 17 00:00:00 2001
From: ronronscelestes <julie.plantey@gmail.com>
Date: Fri, 22 Oct 2021 13:55:52 +0200
Subject: [PATCH 1/3] attempt to fix notification

---
 .../src/components/Notifications/index.js     | 32 +++++++++++--------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/core/admin/admin/src/components/Notifications/index.js b/packages/core/admin/admin/src/components/Notifications/index.js
index 7a99668b51..673be2f78f 100644
--- a/packages/core/admin/admin/src/components/Notifications/index.js
+++ b/packages/core/admin/admin/src/components/Notifications/index.js
@@ -1,11 +1,14 @@
 import { NotificationsProvider } from '@strapi/helper-plugin';
 import React, { useReducer } from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/parts/Box';
+import styled from 'styled-components';
 import { Stack } from '@strapi/parts/Stack';
 import Notification from './Notification';
 import reducer, { initialState } from './reducer';
-import NotificationsWrapper from './Wrapper';
+
+const CustomStack = styled(Stack)`
+  margin-left: -250px;
+`;
 
 const Notifications = ({ children }) => {
   const [{ notifications }, dispatch] = useReducer(reducer, initialState);
@@ -19,17 +22,20 @@ const Notifications = ({ children }) => {
 
   return (
     <NotificationsProvider toggleNotification={displayNotification}>
-      <NotificationsWrapper justifyContent="space-around">
-        <Stack size={notifications.length}>
-          {notifications.map(notification => {
-            return (
-              <Box key={notification.id} style={{ width: 500 }}>
-                <Notification dispatch={dispatch} notification={notification} />
-              </Box>
-            );
-          })}
-        </Stack>
-      </NotificationsWrapper>
+      <CustomStack
+        left="50%"
+        position="fixed"
+        size={2}
+        top={`${46 / 16}rem`}
+        width={`${500 / 16}rem`}
+        zIndex={10}
+      >
+        {notifications.map(notification => {
+          return (
+            <Notification key={notification.id} dispatch={dispatch} notification={notification} />
+          );
+        })}
+      </CustomStack>
       {children}
     </NotificationsProvider>
   );

From ba458fc50d9b7ecd11e2d20be842a23810271b48 Mon Sep 17 00:00:00 2001
From: ronronscelestes <julie.plantey@gmail.com>
Date: Fri, 22 Oct 2021 14:04:41 +0200
Subject: [PATCH 2/3] fixed margin left

---
 .../admin/admin/src/components/Notifications/index.js  | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/core/admin/admin/src/components/Notifications/index.js b/packages/core/admin/admin/src/components/Notifications/index.js
index 673be2f78f..1352851d21 100644
--- a/packages/core/admin/admin/src/components/Notifications/index.js
+++ b/packages/core/admin/admin/src/components/Notifications/index.js
@@ -1,15 +1,10 @@
 import { NotificationsProvider } from '@strapi/helper-plugin';
 import React, { useReducer } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { Stack } from '@strapi/parts/Stack';
 import Notification from './Notification';
 import reducer, { initialState } from './reducer';
 
-const CustomStack = styled(Stack)`
-  margin-left: -250px;
-`;
-
 const Notifications = ({ children }) => {
   const [{ notifications }, dispatch] = useReducer(reducer, initialState);
 
@@ -22,8 +17,9 @@ const Notifications = ({ children }) => {
 
   return (
     <NotificationsProvider toggleNotification={displayNotification}>
-      <CustomStack
+      <Stack
         left="50%"
+        marginLeft="-250px"
         position="fixed"
         size={2}
         top={`${46 / 16}rem`}
@@ -35,7 +31,7 @@ const Notifications = ({ children }) => {
             <Notification key={notification.id} dispatch={dispatch} notification={notification} />
           );
         })}
-      </CustomStack>
+      </Stack>
       {children}
     </NotificationsProvider>
   );

From 3fe2bd57ec837a390114207901682e5b1d9d7222 Mon Sep 17 00:00:00 2001
From: ronronscelestes <julie.plantey@gmail.com>
Date: Fri, 22 Oct 2021 15:05:39 +0200
Subject: [PATCH 3/3] updated tests + removed old Wrapper component file

---
 .../src/components/Notifications/Wrapper.js   | 12 -----
 .../Notifications/tests/index.test.js         | 44 +++++--------------
 .../admin/admin/src/tests/StrapiApp.test.js   | 44 +++++--------------
 3 files changed, 24 insertions(+), 76 deletions(-)
 delete mode 100644 packages/core/admin/admin/src/components/Notifications/Wrapper.js

diff --git a/packages/core/admin/admin/src/components/Notifications/Wrapper.js b/packages/core/admin/admin/src/components/Notifications/Wrapper.js
deleted file mode 100644
index e012ba40cf..0000000000
--- a/packages/core/admin/admin/src/components/Notifications/Wrapper.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-import { Flex } from '@strapi/parts/Flex';
-
-const Wrapper = styled(Flex)`
-  position: fixed;
-  top: 46px;
-  right: 0;
-  left: 0;
-  z-index: 1100;
-`;
-
-export default Wrapper;
diff --git a/packages/core/admin/admin/src/components/Notifications/tests/index.test.js b/packages/core/admin/admin/src/components/Notifications/tests/index.test.js
index 5d3344ff9e..7a8c1122ae 100644
--- a/packages/core/admin/admin/src/components/Notifications/tests/index.test.js
+++ b/packages/core/admin/admin/src/components/Notifications/tests/index.test.js
@@ -30,24 +30,15 @@ describe('<Notifications />', () => {
 
     expect(firstChild).toMatchInlineSnapshot(`
       .c0 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-box-pack: space-around;
-        -webkit-justify-content: space-around;
-        -ms-flex-pack: space-around;
-        justify-content: space-around;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
+        margin-left: -250px;
+        position: fixed;
+        left: 50%;
+        top: 2.875rem;
+        z-index: 10;
+        width: 31.25rem;
       }
 
-      .c2 {
+      .c1 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -57,30 +48,19 @@ describe('<Notifications />', () => {
         flex-direction: column;
       }
 
-      .c2 > * {
+      .c1 > * {
         margin-top: 0;
         margin-bottom: 0;
       }
 
-      .c2 > * + * {
-        margin-top: 0px;
-      }
-
-      .c1 {
-        position: fixed;
-        top: 46px;
-        right: 0;
-        left: 0;
-        z-index: 1100;
+      .c1 > * + * {
+        margin-top: 8px;
       }
 
       <div
         class="c0 c1"
-      >
-        <div
-          class="c2"
-        />
-      </div>
+        width="31.25rem"
+      />
     `);
   });
 
diff --git a/packages/core/admin/admin/src/tests/StrapiApp.test.js b/packages/core/admin/admin/src/tests/StrapiApp.test.js
index afcb75e9c7..4b49b058ff 100644
--- a/packages/core/admin/admin/src/tests/StrapiApp.test.js
+++ b/packages/core/admin/admin/src/tests/StrapiApp.test.js
@@ -15,24 +15,15 @@ describe('ADMIN | StrapiApp', () => {
 
     expect(container.firstChild).toMatchInlineSnapshot(`
       .c0 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-box-pack: space-around;
-        -webkit-justify-content: space-around;
-        -ms-flex-pack: space-around;
-        justify-content: space-around;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
+        margin-left: -250px;
+        position: fixed;
+        left: 50%;
+        top: 2.875rem;
+        z-index: 10;
+        width: 31.25rem;
       }
 
-      .c2 {
+      .c1 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -42,30 +33,19 @@ describe('ADMIN | StrapiApp', () => {
         flex-direction: column;
       }
 
-      .c2 > * {
+      .c1 > * {
         margin-top: 0;
         margin-bottom: 0;
       }
 
-      .c2 > * + * {
-        margin-top: 0px;
-      }
-
-      .c1 {
-        position: fixed;
-        top: 46px;
-        right: 0;
-        left: 0;
-        z-index: 1100;
+      .c1 > * + * {
+        margin-top: 8px;
       }
 
       <div
         class="c0 c1"
-      >
-        <div
-          class="c2"
-        />
-      </div>
+        width="31.25rem"
+      />
     `);
   });