Sidebar css updates and added modals

Fixed css bug with the modal and sidebar, and replaced more window confirms

components/core/ApplicationLayout.js

@@ -51,13 +51,11 @@ const STYLES_CONTENT = css`
   }
 `;
 
-const STYLES_SIDEBAR = css`
-  z-index: ${Constants.zindex.sidebar};
+const STYLES_SIDEBAR_ELEMENTS = css`
   height: 100vh;
   width: ${Constants.sizes.sidebar}px;
   padding: 0;
   flex-shrink: 0;
-  position: fixed;
   background-color: rgba(195, 195, 196, 1);
   top: 0;
   right: 0;
@@ -66,12 +64,20 @@ const STYLES_SIDEBAR = css`
   @media (max-width: ${Constants.sizes.mobile}px) {
     width: 100%;
   }
-
+  /*
   @supports ((-webkit-backdrop-filter: blur(25px)) or (backdrop-filter: blur(25px))) {
     -webkit-backdrop-filter: blur(25px);
     backdrop-filter: blur(25px);
     background-color: rgba(195, 195, 196, 0.6);
   }
+  */
+`;
+
+const STYLES_SIDEBAR = css`
+  position: fixed;
+  top: 0; right: 0;
+  margin: auto;
+  z-index: ${Constants.zindex.sidebar};
 `;
 
 const STYLES_SIDEBAR_HEADER = css`
@@ -202,13 +208,15 @@ export default class ApplicationLayout extends React.Component {
             enabled
             onOutsideRectEvent={this._handleDismiss}
           >
-            <div
-              css={STYLES_SIDEBAR}
-              ref={(c) => {
-                this._sidebar = c;
-              }}
-            >
-              {sidebarElements}
+            <div css={STYLES_SIDEBAR}>
+              <div
+                css={STYLES_SIDEBAR_ELEMENTS}
+                ref={(c) => {
+                  this._sidebar = c;
+                }}
+              >
+                {sidebarElements}
+              </div>
             </div>
           </Boundary>
         ) : null}

components/core/ConfirmationModal.js

@@ -10,12 +10,12 @@ import { Boundary } from "~/components/system/components/fragments/Boundary.js";
 
 const STYLES_TRANSPARENT_BG = css `
   background-color: ${Constants.system.bgBlurGrayBlack};
-  width: 100%;
+  z-index: ${Constants.zindex.modal};
+  width: 100vw;
   height: 100vh;
   position: fixed;
   left: 0;
   top: 0;
-  z-index: 999999;
 `;
 
 const STYLES_MAIN_MODAL = css `

components/sidebars/SidebarSingleSlateSettings.js

@@ -309,13 +309,12 @@ export default class SidebarSingleSlateSettings extends React.Component {
             </System.ButtonWarning>
           </div>
         </div>
-
         {this.state.modalShow && (
           <ConfirmationModal 
             type={"DELETE"}
             withValidation={false}
             callback={this._handleDelete} 
-            header={`Are you sure you want to delete the collection?`}
+            header={`Are you sure you want to delete the collection “${this.state.slatename}”?`}
             subHeader={`This collection will be deleted but all your files will remain in your file library. You can’t undo this action.`}
           />
         )}

scenes/SceneSettingsDeveloper.js

@@ -140,13 +140,13 @@ export default class SceneSettingsDeveloper extends React.Component {
   };
 
   _handleDelete = async (id) => {
-    this.setState({ loading: true });
+    this.setState({ loading: true, modalShow: false });
 
     const response = await Actions.deleteAPIKey({ id });
 
     Events.hasError(response);
 
-    this.setState({ loading: false, modalShow: false });
+    this.setState({ loading: false });
   };
 
   _handleChangeLanguage = (newLanguage) => {