Tweak image styling

src/_locales/en/messages.json

@@ -113,7 +113,7 @@
     "description": "A step in the basic usage instructions"
   },
   "options_page__click_toggle": {
-    "message": "Right-click in the email and then click \"Markdown Toggle\". (Or click the <img src=\"images/icon16.png\"/> button on the toolbar.<span class=\"hotkey-display-wrapper\"> Or press <span class=\"hotkey-display\"><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>M</kbd></span></span>)",
+    "message": "Right-click in the email and then click \"Markdown Toggle\". (Or click the <img class=\"text-align\" src=\"images/icon32-button-monochrome.png\"/> button on the toolbar.<span class=\"hotkey-display-wrapper\"> Or press <span class=\"hotkey-display\"><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>M</kbd></span></span>)",
     "description": "A step in the basic usage instructions"
   },
   "options_page__pretty_cool": {

src/common/options.html

@@ -37,6 +37,18 @@
     line-height: 48px;
   }
 
+  img.text-align {
+    vertical-align: middle;
+  }
+
+  img[src^="images/icon32"] {
+    width: 16px;
+  }
+
+  img[src^="images/icon96"] {
+    width: 48px;
+  }
+
   textarea {
     font-size: 0.8em;
   }
@@ -315,7 +327,7 @@
 
   <header id="pagehead" class="pagehead">
     <h1>
-      <img style="width:48px" src="images/icon128.png"/>
+      <img class="text-align" src="images/icon96.png"/>
       <span data-i18n="page_title">Markdown Here Options</span>
     </h1>
   </header>
@@ -337,7 +349,7 @@ <h1>
             Type some Markdown into the email.<br/>Try this: <code>_Hello_ `Markdown` **Here**!</code>
           </li>
           <li data-i18n="click_toggle">
-            Right-click in the email and then click "Markdown Toggle". (Or click the <img style="width:16px" src="images/icon32-button-monochrome.png"/> button on the toolbar.<span class="hotkey-display-wrapper"> Or press <span class="hotkey-display"><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>M</kbd></span></span>)
+            Right-click in the email and then click "Markdown Toggle". (Or click the <img class="text-align" src="images/icon32-button-monochrome.png"/> button on the toolbar.<span class="hotkey-display-wrapper"> Or press <span class="hotkey-display"><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>M</kbd></span></span>)
           </li>
           <li data-i18n="pretty_cool">
             The message should now look pretty cool. Send it to your friends!

src/firefox/chrome/locale/en/strings.properties

@@ -18,7 +18,7 @@ options_page__advanced_title=Advanced and Miscellaneous
 options_page__advanced_usage=For lots more info and advanced usage, see the <a href=\"https://github.com/adam-p/markdown-here\" target=\"_blank\">Markdown Here project page</a>. You should also explore the options below.
 options_page__basic_usage=Basic Usage
 options_page__changes_saved=Changes saved
-options_page__click_toggle=Right-click in the email and then click \"Markdown Toggle\". (Or click the <img src=\"images/icon16.png\"/> button on the toolbar.<span class=\"hotkey-display-wrapper\"> Or press <span class=\"hotkey-display\"><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>M</kbd></span></span>)
+options_page__click_toggle=Right-click in the email and then click \"Markdown Toggle\". (Or click the <img class=\"text-align\" src=\"images/icon32-button-monochrome.png\"/> button on the toolbar.<span class=\"hotkey-display-wrapper\"> Or press <span class=\"hotkey-display\"><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>M</kbd></span></span>)
 options_page__contributing_1=<strong>If you have ever put a code block into an email, then you can help make Markdown Here better.</strong> <a href=\"https://github.com/adam-p/markdown-here/blob/master/CONTRIBUTING.md\" target=\"_blank\">CONTRIBUTING.md</a>
 options_page__contributing_2=Help make Markdown Here available in your language. <a href=\"https://github.com/adam-p/markdown-here/blob/master/CONTRIBUTING.md#translation\" target=\"_blank\">Translations are welcome.</a>
 options_page__contributing_title=Contributing
@@ -61,7 +61,7 @@ options_page__pretty_cool=The message should now look pretty cool. Send it to yo
 options_page__preview_markdown=```javascript<br>\nfunction syntaxHighlighting() {<br>\n&nbsp; var n = 33;<br>\n&nbsp; var s = \"hello, こんにちは\";<br>\n&nbsp; console.log(s);<br>\n}<br>\n```<br>\n<br>\n* plain<br>\n* *emphasis*<br>\n&nbsp; * **strong emphasis**<br>\n&nbsp; &nbsp; * ~~strikethrough~~<br>\n* `inline code`<br>\n<br>\n1. Numbered list<br>\n&nbsp;&nbsp;&nbsp;1. Numbered sub-list<br>\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1. Numbered sub-sub-list<br>\n2. [Link](https://www.google.com)<br>\n<br>\n<br>\nAn image: ![Markdown Here logo](http://adam-p.github.io/markdown-here/img/icon24.png)\n<br>\n<br>\n> Block quote.&nbsp; <br>\n> *With* **some** `markdown`.<br>\n<br>\nIf **TeX Math** support is enabled, this is the quadratic equation:&nbsp;<br>\n$-b \\pm \\sqrt{b^2 - 4ac} \\over 2a$<br>\n<br>\n# Header 1<br>\n## Header 2<br>\n### Header 3<br>\n#### Header 4<br>\n##### Header 5<br>\n###### Header 6<br>\n&nbsp; <br>\n| Tables        | Are           | Cool  |<br>\n| ------------- |:-------------:| -----:|<br>\n| column 3 is   | right-aligned | $1600 |<br>\n| column 2 is   | centered      |   $12 |<br>\n| zebra stripes | are neat      |    $1 |<br>\n<br>\nHere's a horizontal rule:<br>\n<br>\n---<br>\n<br>\n```<br>\ncode block<br>\nwith no highlighting<br>\n```<br>\n<br>\n
 options_page__preview_title=Preview
 options_page__primary_css_title=Primary Styling CSS
-options_page__reload_restart=Reload your email web page or restart your web browser.
+options_page__reload_restart=After installing or upgrading, reload your email web page or restart your web browser.
 options_page__reset_primary_css=Reset to Default
 options_page__resources_cheatsheet_link=If you're new to Markdown, the <a href=\"https://github.com/adam-p/markdown-here/wiki/Markdown-Here-Cheatsheet\" target=\"_blank\">Markdown Here Cheatsheet</a> will make you a prostar.
 options_page__resources_title=Resources and Links