diginet-core-ui 1.3.53-beta.1 → 1.3.53-beta.4

package/components/alert/index.js

@@ -9,26 +9,26 @@ import { color as colors } from '../../styles/colors';
 import ButtonIcon from '../button/icon';
 import Icon from '../../icons';
 import { hexToRGBA } from '../../styles/color-helper';
-import { typography } from '../../styles/typography';
-import { useTheme } from '../../theme';
 import { alignCenter, border, borderBox, borderRadius4px, breakWord, displayBlock, flexRow, justifyStart, positionRelative, userSelectNone } from '../../styles/general';
+import theme from '../../theme/settings';
 const {
-  heading3,
-  heading4,
-  heading5,
-  paragraph1,
-  paragraph2,
-  paragraph3
-} = typography;
-const {
-  system: {
-    rest,
-    white
-  }
-} = colors;
-const {
-  zIndex
-} = useTheme();
+  colors: {
+    system: {
+      rest,
+      white
+    }
+  },
+  typography: {
+    heading3,
+    heading4,
+    heading5,
+    paragraph1,
+    paragraph2,
+    paragraph3
+  },
+  spacing,
+  zIndex: zIndexCORE
+} = theme;
 const iconMap = new Map([['info', 'Info'], ['success', 'ApprovalFilled'], ['warning', 'Warning'], ['danger', 'CancelFilled']]);
 const maxWidthMap = new Map([['tiny', 320], ['small', 400], ['medium', 480]]);
 const primaryTypoMap = new Map([['tiny', heading5], ['small', heading4], ['medium', heading3]]);
@@ -177,7 +177,7 @@ const AlertContainerCSS = (size, progressing, duration) => css`
     transition: opacity ${progressing ? duration / 2 + 1 : duration * 1}s ease ${progressing ? duration / 2 : 0}s;
     margin-bottom: 1rem;
     pointer-events: auto;
-    z-index: ${zIndex(1)};
+    z-index: ${zIndexCORE(1)};
 `;
 
 const AlertInfoCSS = (mainColor, opacityColor) => css`
@@ -192,20 +192,21 @@ const AlertInfoCSS = (mainColor, opacityColor) => css`
     background-color: ${white};
     width: 100%;
     min-width: 320px;
-    padding: 0 4px 0 16px;
+    padding: ${spacing([0, 1, 0, 4])};
     opacity: 1;
 `;
 
 const AlertIconCSS = css`
     display: inherit;
     margin-right: 10px;
-    padding: 8px 0;
+    padding: ${spacing([2, 0])};
 `;
 
 const AlertTextCSS = clearAble => css`
     ${displayBlock};
     margin-right: ${clearAble ? '10px' : 0};
-    padding: 8px 0;
+    padding: ${spacing([2, 0])};
+    align-self: center;
 `;
 
 const AlertPrimaryCSS = (secondary, size) => css`
@@ -214,13 +215,13 @@ const AlertPrimaryCSS = (secondary, size) => css`
     ${alignCenter};
     ${justifyStart};
     ${userSelectNone};
-    ${secondary ? primaryTypoMap.get(size) : paragraph1}
+    ${secondary ? primaryTypoMap.get(size) : paragraph1};
 `;
 
 const AlertSecondaryCSS = size => css`
     ${displayBlock};
     ${userSelectNone};
-    ${size === 'tiny' ? paragraph3 : paragraph2}
+    ${size === 'tiny' ? paragraph3 : paragraph2};
 `;
 
 const AlertClearIconCSS = css`

package/components/alert/notify.js

@@ -3,14 +3,14 @@ import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import Alert from './';
 import { randomString } from '../../utils';
-import { useTheme } from '../../theme';
+import theme from '../../theme/settings';
 const {
-  zIndex
-} = useTheme();
+  zIndex: zIndexCORE
+} = theme;
 const positions = {
   general: {
     position: 'fixed',
-    zIndex: zIndex(2),
+    zIndex: zIndexCORE(2),
     backgroundColor: 'transparent',
     pointerEvents: 'none'
   },
@@ -123,15 +123,17 @@ const AlertNotify = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
       ReactDOM.render( /*#__PURE__*/React.createElement(Alert, {
         onClose: e => onClose(e, position),
+        secondary: message,
         ...props,
         ...options
-      }, message), document.querySelector(`div[class^="Notify-Alert-${position.vertical}-${position.horizontal}"]`).appendChild(el));
+      }), document.querySelector(`div[class^="Notify-Alert-${position.vertical}-${position.horizontal}"]`).appendChild(el));
     } else {
       ReactDOM.render( /*#__PURE__*/React.createElement(Alert, {
         onClose: onClose,
+        secondary: message,
         ...props,
         ...options
-      }, message), document.querySelector(`div[class^="Notify-Alert-"]`).appendChild(el));
+      }), document.querySelector(`div[class^="Notify-Alert-"]`).appendChild(el));
     }
   };