Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Replace modal close icon with a simple button, make it nicer

Browse Source 
[MAILPOET-2804]
This commit is contained in:
Jan Jakeš
2020-03-31 13:09:18 +02:00
committed by Veljko V
parent 322103e865
commit bd83fec5bc
4 changed files with 22 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
assets/css/src/components-plugin/_modal.scss
View File

@@ -93,14 +93,24 @@
margin: 0; margin: 0;
} }
.components-button { .mailpoet-modal-close {
left: $modal-grid-size; border: 0;
cursor: pointer;
height: $modal-close-button-size;
padding: $modal-close-button-padding;
position: relative; position: relative;
} right: -$modal-close-button-padding;
top: -$modal-close-button-padding;
width: $modal-close-button-size;
.mailpoet-modal-close svg { svg {
opacity: .5; opacity: .5;
stroke: $modal-dark-gray-900; stroke: #979797;
&:hover {
stroke: #636363;
}
}
} }
} }

2
assets/css/src/settings/_modal.scss
View File

@@ -6,6 +6,8 @@ $modal-light-gray-500: #e2e4e7;
$modal-min-width: 360px; $modal-min-width: 360px;
$modal-screen-overlay-z-index: 100000; $modal-screen-overlay-z-index: 100000;
$modal-shadow-modal: 0 3px 30px rgba($modal-dark-gray-900, .2); $modal-shadow-modal: 0 3px 30px rgba($modal-dark-gray-900, .2);
$modal-close-button-size: 24px;
$modal-close-button-padding: 6px;
$modal-grid-size: 8px; $modal-grid-size: 8px;
$modal-grid-size-large: 16px; $modal-grid-size-large: 16px;

9
assets/js/src/common/modal/close_icon.jsx
View File

@@ -1,10 +1,7 @@
import React from 'react'; import React from 'react';
import { Path, SVG, G } from '@wordpress/components';
export default ( export default (
<SVG viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 48 48">
<G id="icons/ic_close" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd"> <path d="M42 6L6 42M6 6L42 42" strokeWidth="12" strokeLinecap="round" />
<Path d="M8,2 C8.55228475,2 9,2.44771525 9,3 L9,7 L13,7 C13.5522847,7 14,7.44771525 14,8 C14,8.55228475 13.5522847,9 13,9 L9,9 L9,13 C9,13.5522847 8.55228475,14 8,14 C7.44771525,14 7,13.5522847 7,13 L7,9 L3,9 C2.44771525,9 2,8.55228475 2,8 C2,7.44771525 2.44771525,7 3,7 L7,7 L7,3 C7,2.44771525 7.44771525,2 8,2 Z" id="Combined-Shape" fill="#FF5301" fillRule="nonzero" transform="translate(8.000000, 8.000000) rotate(45.000000) translate(-8.000000, -8.000000) " /> </svg>
</G>
</SVG>
); );

3
assets/js/src/common/modal/header.jsx
View File

@@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Button } from '@wordpress/components';
import closeIcon from './close_icon.jsx'; import closeIcon from './close_icon.jsx';
@@ -22,7 +21,7 @@ const ModalHeader = ({
) } ) }
</div> </div>
{ isDismissible && ( { isDismissible && (
<Button onClick={onClose} icon={closeIcon} className="mailpoet-modal-close" /> <button type="button" onClick={onClose} className="mailpoet-modal-close">{closeIcon}</button>
) } ) }
</div> </div>
); );