Circled close button icon in light mode

README.md

@@ -6,9 +6,27 @@
 
 https://stackedit.io/
 
-### NEW!!! Integrate StackEdit in any website!
+### NEW!!! Embed StackEdit in any website!
 
-See https://benweet.github.io/stackedit.js/
+See https://github.com/benweet/stackedit.js
+
+Chrome extension: https://chrome.google.com/webstore/detail/ajehldoplanpchfokmeempkekhnhmoha
+
+### Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm start
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+```
 
 ### StackEdit can:
 
@@ -32,20 +50,4 @@ See https://benweet.github.io/stackedit.js/
  - Online synchronization using Google Drive, Dropbox and GitHub
  - One click publish to Blogger, Dropbox, Gist, GitHub, Google Drive, WordPress, Zendesk
 
-### Build Setup
-
-``` bash
-# install dependencies
-npm install
-
-# serve with hot reload at localhost:8080
-npm start
-
-# build for production with minification
-npm run build
-
-# build for production and view the bundle analyzer report
-npm run build --report
-```
-
 > **NOTE:** This page has been written and published with [StackEdit](https://stackedit.io/ "StackEdit").

src/components/NavigationBar.vue

@@ -2,7 +2,7 @@
   <nav class="navigation-bar" :class="{'navigation-bar--editor': styles.showEditor && !revisionContent, 'navigation-bar--light': light}">
     <!-- Explorer -->
     <div class="navigation-bar__inner navigation-bar__inner--left navigation-bar__inner--button">
-      <button class="navigation-bar__button button" v-if="light" @click="close()" v-title="'Close StackEdit'"><icon-close></icon-close></button>
+      <button class="navigation-bar__button button" v-if="light" @click="close()" v-title="'Close StackEdit'"><icon-close-circle></icon-close-circle></button>
       <button class="navigation-bar__button button" v-else tour-step-anchor="explorer" @click="toggleExplorer()" v-title="'Toggle explorer'"><icon-folder></icon-folder></button>
     </div>
     <!-- Side bar -->

src/components/Tour.vue

@@ -39,7 +39,7 @@
       </div>
       <div class="tour-step__inner" v-else-if="step === 'end'">
         <h2>Enjoy!</h2>
-        <p>If you like StackEdit, please rate 5 stars on the <a target="_blank" href="https://chrome.google.com/webstore/detail/stackedit/iiooodelglhkcpgbajoejffhijaclcdg/reviews">Chrome Web Store</a>.</p>
+        <p>If you like StackEdit, please rate 5 stars on the <a target="_blank" href="https://chrome.google.com/webstore/detail/iiooodelglhkcpgbajoejffhijaclcdg/reviews">Chrome Web Store</a>.</p>
         <p>You can also star the project on <a target="_blank" href="https://github.com/benweet/stackedit">GitHub</a> and join the <a target="_blank" href="https://community.stackedit.io/">community</a>.</p>
         <div class="tour-step__button-bar">
           <button class="button" @click="finish">Ok</button>

src/components/modals/AboutModal.vue

@@ -8,7 +8,7 @@
       <br>
       <a target="_blank" href="https://github.com/benweet/stackedit/issues">Issue tracker</a> — <a target="_blank" href="https://github.com/benweet/stackedit/blob/master/CHANGELOG.md">Changelog</a>
       <br>
-      <a target="_blank" href="https://chrome.google.com/webstore/detail/stackedit/iiooodelglhkcpgbajoejffhijaclcdg">Chrome app</a> — thanks for your review!
+      <a target="_blank" href="https://chrome.google.com/webstore/detail/iiooodelglhkcpgbajoejffhijaclcdg">Chrome app</a> — <a target="_blank" href="https://chrome.google.com/webstore/detail/ajehldoplanpchfokmeempkekhnhmoha">Chrome extension</a>
       <br>
       StackEdit on <a target="_blank" href="https://twitter.com/stackedit/">Twitter</a>
       <br>

src/icons/CloseCircle.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24">
+    <path d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z" />
+  </svg>
+</template>

src/icons/index.js

@@ -49,6 +49,7 @@ import History from './History';
 import Database from './Database';
 import Magnify from './Magnify';
 import FormatListChecks from './FormatListChecks';
+import CloseCircle from './CloseCircle';
 
 Vue.component('iconProvider', Provider);
 Vue.component('iconFormatBold', FormatBold);
@@ -100,3 +101,4 @@ Vue.component('iconHistory', History);
 Vue.component('iconDatabase', Database);
 Vue.component('iconMagnify', Magnify);
 Vue.component('iconFormatListChecks', FormatListChecks);
+Vue.component('iconCloseCircle', CloseCircle);

src/services/tempFileSvc.js

@@ -11,7 +11,8 @@ const contentProperties = utils.queryParams.contentProperties;
 export default {
   setReady() {
     if (origin && window.parent) {
-      window.parent.postMessage({ type: 'ready' }, origin);
+      // Wait for the editor to init
+      setTimeout(() => window.parent.postMessage({ type: 'ready' }, origin), 1);
     }
   },
   closed: false,