Remove global styles.

packages/editor/src/components/action-widget/pane/icon-picker/image-icon-tab/index.tsx

@@ -3,6 +3,7 @@ import React, { ReactElement } from 'react';
 import iconGroups from './iconGroups.json';
 import { SvgImageIcon } from '@wisemapping/mindplot';
 import NodeProperty from '../../../../../classes/model/node-property';
+import { SvgIcon } from './styled';
 
 type IconImageTab = {
   iconModel: NodeProperty<string>;
@@ -14,8 +15,7 @@ const IconImageTab = ({ iconModel, triggerClose }: IconImageTab): ReactElement =
       {iconGroups.map((family, i) => (
         <span key={i}>
           {family.icons.map((icon: string) => (
-            <img
+            <SvgIcon
-              className="panelIcon"
               key={icon}
               src={SvgImageIcon.getImageUrl(icon)}
               onClick={() => {

packages/editor/src/components/action-widget/pane/icon-picker/image-icon-tab/styled.ts

@@ -0,0 +1,29 @@
+/*
+ *    Copyright [2021] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+import styled from 'styled-components';
+
+export const SvgIcon = styled.img`
+  width: 25px;
+  height: 25px;
+  margin-left: 4px;
+  margin-top: 3px;
+  cursor: pointer;
+  &:hover {
+    background-color: #efefef;
+  }
+`;

packages/editor/src/components/action-widget/pane/keyboard-shortcut-help/index.tsx

@@ -17,10 +17,11 @@
  */
 import React, { ReactElement } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { ShortcutsContainer } from './styled';
 
 const KeyboardShorcutsHelp = (): ReactElement => {
   return (
-    <div id="keyboardTable">
+    <ShortcutsContainer>
       <table>
         <colgroup>
           <col width="40%" />
@@ -247,7 +248,7 @@ const KeyboardShorcutsHelp = (): ReactElement => {
           </tr>
         </tbody>
       </table>
-    </div>
+    </ShortcutsContainer>
   );
 };
 export default KeyboardShorcutsHelp;

packages/editor/src/components/action-widget/pane/keyboard-shortcut-help/styled.ts

@@ -0,0 +1,35 @@
+/*
+ *    Copyright [2021] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+import styled from 'styled-components';
+
+export const ShortcutsContainer = styled.div`
+  font-size: 13px;
+  width: 100%;
+  & td {
+    padding: 3px;
+    white-space: nowrap;
+  }
+  & th {
+    padding: 5px;
+    white-space: nowrap;
+  }
+  & th {
+    background-color: #000000;
+    color: #ffffff;
+  }
+`;

packages/editor/src/components/warning-dialog/index.tsx

@@ -16,7 +16,7 @@
  *   limitations under the License.
  */
 import React, { useState } from 'react';
-import { Notifier } from './styled';
+import { CloseButton, InfoDialog, InfoDialogContent, Notifier } from './styled';
 import { useIntl } from 'react-intl';
 
 import CloseDialogSvg from '../../../images/close-dialog-icon.svg';
@@ -29,7 +29,6 @@ export type FooterPropsType = {
 
 const WarningDialog = ({ capability, message }: FooterPropsType): React.ReactElement => {
   const intl = useIntl();
-  const [dialogClass, setDialogClass] = useState('tryInfoPanel');
 
   let msgExt, msg: string;
   if (capability.mode !== 'viewonly' && capability.mode !== 'showcase' && capability.isMobile) {
@@ -68,30 +67,28 @@ const WarningDialog = ({ capability, message }: FooterPropsType): React.ReactEle
     });
   }
 
-  // if the toolbar is present, the alert must not overlap
+  const [open, setOpen] = useState(msgExt || message);
-  const alertTopAdjustmentStyle = 'tryInfoPanelWithToolbar';
-
   return (
     <>
       <Notifier id="headerNotifier"></Notifier>
-      {(msgExt || message) && (
+      {open && (
-        <div className={dialogClass + ' ' + alertTopAdjustmentStyle}>
+        <InfoDialog>
-          <div className="tryInfoPanelInner">
+          <InfoDialogContent>
-            <div className="closeButton">
+            <CloseButton>
               <button
                 onClick={(e) => {
-                  setDialogClass('tryInfoPanelClosed');
+                  setOpen(false);
                   e.preventDefault();
                   e.stopPropagation();
                 }}
               >
                 <img src={CloseDialogSvg} />
               </button>
-            </div>
+            </CloseButton>
             {msgExt && <p>{`${msg} ${msgExt}`}</p>}
             {message && <p>{message}</p>}
-          </div>
+          </InfoDialogContent>
-        </div>
+        </InfoDialog>
       )}
     </>
   );

packages/editor/src/components/warning-dialog/styled.ts

@@ -47,3 +47,42 @@ export const Notifier = styled.div`
   bottom: 10px;
   font-family: 'Montserrat', Arial, Helvetica, sans-serif;
 `;
+
+export const CloseButton = styled.div`
+  position: absolute;
+  top: 5px;
+  right: 5px;
+
+  button {
+    cursor: pointer;
+    border-style: hidden;
+    background-color: transparent;
+    padding: 0px;
+  }
+
+  button img {
+    width: 18px;
+    height: 18px;
+    filter: invert(73%) sepia(21%) saturate(4699%) hue-rotate(357deg) brightness(98%) contrast(108%);
+  }
+`;
+
+export const InfoDialog = styled.div`
+  position: absolute;
+  text-align: center;
+  top: 70px;
+  left: 0;
+  right: 0;
+  background-color: white;
+  border: solid 2px #ffa800;
+  margin: auto;
+  border-radius: 9px;
+  width: 80%;
+`;
+
+export const InfoDialogContent = styled.div`
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 5px;
+  padding-right: 5px;
+`;

packages/editor/src/global-styled.css

@@ -1,11 +1,6 @@
 /********************************************************************************/
 /* Header & Toolbar Styles */
 /********************************************************************************/
-html {
-  /* avoid bootstrap overriding font-size and breaking Mui */
-  font-size: initial;
-}
-
 body {
   width: 100vw;
   height: 100vh;
@@ -18,105 +13,8 @@ body {
   width: 100%;
   height: 100%;
 }
-.panelIcon {
-  width: 25px;
-  height: 25px;
-  margin-left: 4px;
-  margin-top: 3px;
-  cursor: pointer;
-}
-
-.panelIcon:hover {
-  background-color: #efefef;
-}
 
 .wise-editor .popover {
   font-size: 13px;
   max-width: none;
-}
-
-#keyboardTable {
-  font-size: 13px;
-  width: 100%;
-}
-
-#keyboardTable td {
-  padding: 3px;
-  white-space: nowrap;
-}
-
-#keyboardTable th {
-  padding: 5px;
-  white-space: nowrap;
-}
-
-#keyboardTable th {
-  background-color: #000000;
-  color: #ffffff;
-}
-
-.tryInfoPanel {
-  position: absolute;
-  text-align: center;
-  left: 0;
-  right: 0;
-  background-color: white;
-  border: solid 2px #ffa800;
-  margin: auto;
-  border-radius: 9px;
-  width: 80%;
-}
-
-@media (min-width: 600px) {
-  .tryInfoPanel {
-    font-size: 15px;
-  }
-}
-
-@media (max-width: 600px) {
-  .tryInfoPanel {
-    font-size: 13px;
-  }
-}
-
-.tryInfoPanel .tryInfoPanelInner {
-  padding-top: 10px;
-  padding-bottom: 10px;
-  padding-left: 5px;
-  padding-right: 5px;
-}
-
-.tryInfoPanel .tryInfoPanelInner .closeButton {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-}
-
-.tryInfoPanel .tryInfoPanelInner .closeButton button {
-  cursor: pointer;
-  border-style: hidden;
-  background-color: transparent;
-  padding: 0px;
-}
-
-.tryInfoPanel .tryInfoPanelInner .closeButton button img {
-  width: 18px;
-  height: 18px;
-  filter: invert(73%) sepia(21%) saturate(4699%) hue-rotate(357deg) brightness(98%) contrast(108%);
-}
-
-.tryInfoPanelWithToolbar {
-  top: 75px;
-}
-
-.tryInfoPanelWithoutToolbar {
-  top: 5px;
-}
-
-.tryInfoPanelClosed {
-  display: none;
-}
-
-.tryInfoPanel>p {
-  justify-content: center;
 }