@potok/modal - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

components/Modal.jsx

@@ -8,2 +8,3 @@ import React, { type Node } from 'react';
 import CloseIcon from '@potok/icons/glyph/clear/close-1';
+import { colors } from '@potok/theme';
 import {
@@ -55,3 +56,3 @@ ModalWrapper,
         <Close onClick={onClose}>
-          <CloseIcon />
+          <CloseIcon primaryColor={colors.N500} />
         </Close>
@@ -58,0 +59,0 @@ <div>{children}</div>

components/README.md

@@ -45,3 +45,7 @@ Modal component
 
-const style = {
+const wrapperStyle = {
+  'text-align': 'center'
+};
+
+const buttonStyle = {
   margin: 0
@@ -55,7 +59,7 @@ };
       {state.isOpen && (<Modal onClose={() => setState({ isOpen: false })} title="My title">
-        <div>
+        <div style={wrapperStyle}>
           <div>Are you sure?</div>
           <br />
-          <Button style={style} onClick={() => setState({ isOpen: false })}>OK</Button>
-        </div>  
+          <Button style={buttonStyle} onClick={() => setState({ isOpen: false })}>OK</Button>
+        </div>
       </Modal>)}
@@ -62,0 +66,0 @@ <ModalGatewayDest />

components/styled/index.js

@@ -8,2 +8,3 @@ import styled from 'styled-components';
   fontWeightMedium,
+  layers,
 } from '@potok/theme';
@@ -18,2 +19,4 @@
   .${backdropClass} {
+    padding: 0 10px;
+    white-space: normal;
     position: fixed;
@@ -40,2 +43,3 @@ top: 0;
     max-width: 400px;
+    width: 100%;
   }
@@ -60,3 +64,2 @@ `;
   svg {
-    fill: ${colors.N500};
     cursor: pointer;
@@ -81,3 +84,3 @@ }
   position: fixed;
-  z-index: 100;
+  z-index: ${layers.modal};
 `;

package.json

 {
   "name": "@potok/modal",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Potok.io UI Modal component",
@@ -5,0 +5,0 @@ "main": "./components/Modal.jsx",

No alert changes

Improved metrics

Total package byte prevSize

5106

increased by4.25%

Lines of code

133

increased by3.1%

No dependency changes