Merge pull request #401 from Adslot/modal-close-icon-fix

Fix: Add modal close cross icon
Adslot · Dec 8, 2016 · 8b17bc5 · 8b17bc5
2 parents a4fc36c + f20bc64
commit 8b17bc5
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/src/components/Main.jsx b/src/components/Main.jsx
@@ -354,7 +354,7 @@ class AppComponent extends React.Component {
         </Button>
 
         <Modal show={this.state.showSimpleModal} bsSize="small" keyboard={false}>
-          <Modal.Header>
+          <Modal.Header closeButton onHide={this.toggleSimpleModal}>
             <Modal.Title>Modal Label</Modal.Title>
           </Modal.Header>
           <Modal.Body>

diff --git a/src/styles/bootstrapOverrides/Modal.scss b/src/styles/bootstrapOverrides/Modal.scss
@@ -1,3 +1,4 @@
+@import '../icon';
 @import '../variable';
 
 .modal {
@@ -29,6 +30,21 @@
   &-header {
     background-color: $color-background-highlighted;
     padding: 10px $modal-header-footer-left-padding;
+
+    > .close {
+      $close-icon-size: 20px;
+      background-image: $icon-cross;
+      background-position: center;
+      background-size: $close-icon-size;
+      height: $close-icon-size;
+      margin-right: -5px;
+      margin-top: 0;
+      width: $close-icon-size;
+
+      > span {
+        display: none;
+      }
+    }
   }
 
   &-footer {

diff --git a/src/styles/icon.scss b/src/styles/icon.scss
@@ -1,10 +1,11 @@
 @import './mixins/dataUriEncoder';
 
-$icon-folder-closed: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#ababab" d="M12.5 4c.3 0 .5.2.5.5V6h1.8c.4.1.5.5.4.8l-1.8 6.4c-.1.3-.3.4-.5.4H2.5c-.3 0-.5-.2-.5-.5V4.5c0-.3.2-.5.5-.5h10z"/><path fill="#fff" d="M3 5v5.6l1.4-4.2c.1-.1.2-.4.6-.4h7V5H3z"/></svg>');
-$icon-folder-open: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#5a5a5a" d="M12.5 4c.3 0 .5.2.5.5v4h2.3c.4 0 .6.4.4.7l-2.3 4.1c-.1.3-.3.4-.5.4H2.5c-.3 0-.5-.2-.5-.5V4.5c0-.3.2-.5.5-.5h10z"/><path fill="#fff" d="M3 5v6.3l1.4-2.6c.1-.2.3-.2.4-.2H12V5H3z"/></svg>');
-$icon-calendar: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 50 50"><path d="M40.5 4h-3.7v3.3c0 1.3-1 2.3-2.3 2.3-1.3 0-2.3-1-2.3-2.3V4H17.8v3.3c0 1.3-1 2.3-2.3 2.3s-2.3-1-2.3-2.3V4H9.5C7 4 5 6 5 8.5v35.9c0 2.5 2 4.4 4.5 4.4h31c2.5 0 4.5-2 4.5-4.4V8.5C45 6 43 4 40.5 4zm1.6 40.3c0 .9-.7 1.6-1.6 1.6h-31c-.9 0-1.6-.7-1.6-1.6V15.1H42v29.2z" fill="#5a5a5a"/><path d="M15.5 8.2c.5 0 .9-.4.9-.8V2c0-.5-.4-.8-.9-.8s-.9.4-.9.8v5.3c.1.5.4.9.9.9zm19 0c.5 0 .9-.4.9-.8V2c0-.5-.4-.8-.9-.8s-.9.4-.9.8v5.3c0 .5.4.9.9.9zM37 20h3v3h-3zm-4.5 0h3v3h-3zM28 20h3v3h-3zm-4.5 0h3v3h-3zM19 20h3v3h-3zm18 6h3v3h-3zm-4.5 0h3v3h-3zM28 26h3v3h-3zm-4.5 0h3v3h-3zM19 26h3v3h-3zm-4.5 0h3v3h-3zM10 26h3v3h-3zm27 6h3v3h-3zm-4.5 0h3v3h-3zM28 32h3v3h-3zm-4.5 0h3v3h-3zM19 32h3v3h-3zm-4.5 0h3v3h-3zM10 32h3v3h-3zm18 6h3v3h-3zm-4.5 0h3v3h-3zM19 38h3v3h-3zm-4.5 0h3v3h-3zM10 38h3v3h-3z" fill="#5a5a5a"/></svg>');
 $icon-arrow-bracket: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#006dcc" d="M11 3L8.1 8l2.9 5H8.4L5 8.1v-.2L8.4 3H11z"/></svg>');
+$icon-calendar: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 50 50"><path d="M40.5 4h-3.7v3.3c0 1.3-1 2.3-2.3 2.3-1.3 0-2.3-1-2.3-2.3V4H17.8v3.3c0 1.3-1 2.3-2.3 2.3s-2.3-1-2.3-2.3V4H9.5C7 4 5 6 5 8.5v35.9c0 2.5 2 4.4 4.5 4.4h31c2.5 0 4.5-2 4.5-4.4V8.5C45 6 43 4 40.5 4zm1.6 40.3c0 .9-.7 1.6-1.6 1.6h-31c-.9 0-1.6-.7-1.6-1.6V15.1H42v29.2z" fill="#5a5a5a"/><path d="M15.5 8.2c.5 0 .9-.4.9-.8V2c0-.5-.4-.8-.9-.8s-.9.4-.9.8v5.3c.1.5.4.9.9.9zm19 0c.5 0 .9-.4.9-.8V2c0-.5-.4-.8-.9-.8s-.9.4-.9.8v5.3c0 .5.4.9.9.9zM37 20h3v3h-3zm-4.5 0h3v3h-3zM28 20h3v3h-3zm-4.5 0h3v3h-3zM19 20h3v3h-3zm18 6h3v3h-3zm-4.5 0h3v3h-3zM28 26h3v3h-3zm-4.5 0h3v3h-3zM19 26h3v3h-3zm-4.5 0h3v3h-3zM10 26h3v3h-3zm27 6h3v3h-3zm-4.5 0h3v3h-3zM28 32h3v3h-3zm-4.5 0h3v3h-3zM19 32h3v3h-3zm-4.5 0h3v3h-3zM10 32h3v3h-3zm18 6h3v3h-3zm-4.5 0h3v3h-3zM19 38h3v3h-3zm-4.5 0h3v3h-3zM10 38h3v3h-3z" fill="#5a5a5a"/></svg>');
 $icon-chevron: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M1 8.6l6.8-4.9h.3L15 8.6v3.7L8 8.1l-7 4.2V8.6z"/></svg>');
+$icon-cross: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M4 11.3L7.3 8 4.1 4.7l.8-.7L8 7.2 11.1 4l.7.7-3.1 3.2 3.3 3.3-.7.8L8 8.7 4.7 12l-.7-.7z"/></svg>');
+$icon-folder-closed: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#ababab" d="M12.5 4c.3 0 .5.2.5.5V6h1.8c.4.1.5.5.4.8l-1.8 6.4c-.1.3-.3.4-.5.4H2.5c-.3 0-.5-.2-.5-.5V4.5c0-.3.2-.5.5-.5h10z"/><path fill="#fff" d="M3 5v5.6l1.4-4.2c.1-.1.2-.4.6-.4h7V5H3z"/></svg>');
+$icon-folder-open: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#5a5a5a" d="M12.5 4c.3 0 .5.2.5.5v4h2.3c.4 0 .6.4.4.7l-2.3 4.1c-.1.3-.3.4-.5.4H2.5c-.3 0-.5-.2-.5-.5V4.5c0-.3.2-.5.5-.5h10z"/><path fill="#fff" d="M3 5v6.3l1.4-2.6c.1-.2.3-.2.4-.2H12V5H3z"/></svg>');
 $icon-search: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#fff" d="M14.8 12.8l-3.5-3.5c.9-1.6 1.1-3.6 0-5.6C10.5 2 8.7 1 6.8 1 4.1 1 1.7 2.8 1.1 5.4c-.7 3.6 2 6.7 5.4 6.7 1 0 2-.3 2.8-.8l3.4 3.4.1.1c.3.3.7.3.9 0l1.1-1.1c.3-.2.3-.7 0-.9zm-8.3-2.1c-2.9 0-5-2.9-3.7-5.9.6-1.5 2.2-2.4 3.7-2.4 1.1 0 2.1.4 2.9 1.2.8.8 1.2 1.8 1.2 2.9 0 1.1-.4 2.1-1.2 2.9-.7.9-1.8 1.3-2.9 1.3z"/></svg>');
 
 $icon-size: 16px;