Updated name, screenshots in README; Tiny fixes in preferences page

README.md

@@ -1,35 +1,35 @@
-# Code2Image [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge)]() [![GitHub license](https://img.shields.io/github/license/cyberpirate92/code2img-chrome.svg?style=for-the-badge)](https://github.com/cyberpirate92/code2img-chrome/blob/master/LICENSE) [![Chrome Web Store](https://img.shields.io/chrome-web-store/v/abloihkaeipjifnhehnicpjfjoaclngo?style=for-the-badge)](https://chrome.google.com/webstore/detail/code2image/abloihkaeipjifnhehnicpjfjoaclngo)
+# Themeify 
 
-A Google Chrome browser extension to create pretty images of code snippets powered by the [code2img](https://github.com/cyberpirate92/code2img) REST API.
+[![Chrome Web Store](https://img.shields.io/chrome-web-store/v/abloihkaeipjifnhehnicpjfjoaclngo?style=for-the-badge)](https://chrome.google.com/webstore/detail/code2image/abloihkaeipjifnhehnicpjfjoaclngo) [![GitHub license](https://img.shields.io/github/license/cyberpirate92/code2img-chrome.svg?style=for-the-badge)](https://github.com/cyberpirate92/code2img-chrome/blob/master/LICENSE) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge)]()
 
-[![](https://developer.chrome.com/webstore/images/ChromeWebStore_Badge_v2_496x150.png)](https://chrome.google.com/webstore/detail/code2image/abloihkaeipjifnhehnicpjfjoaclngo)
+Themeify is a [Google Chrome extension](https://chrome.google.com/webstore/detail/code2image/abloihkaeipjifnhehnicpjfjoaclngo) for creating beautiful images of code snippets directly from webpages,  powered by the [code2img](https://github.com/cyberpirate92/code2img) REST API.
 
-![](./images/demo.gif)
+[![](./images/Store%20Assets/Marquee%20Promo%20Tile_v7.png)](https://chrome.google.com/webstore/detail/code2image/abloihkaeipjifnhehnicpjfjoaclngo)
 
-## Installing locally for Development
+## How to use Themeify
 
-1. Clone this repository `git clone https://github.com/cyberpirate92/code2img-chrome`.
-2. Open Google Chrome and open Extension Management page by navigating to `chrome://extensions`.
-3. Turn on **Developer Mode**.
-4. Click on the **LOAD UNPACKED** button and select the `src` directory from the project folder.
+1. Select the text (code snippet) on the page.
+2. Right click on the selected text and select Themeify from the context menu and the programming language in the submenu.
+3. In the language submenu, select the color theme of your choice.
 
-![](./images/load_extension.png)
+![](./images/context-menu-screenshot.png)
 
-5. The extension is now installed locally.
+4. A file save dialog will appear where you can rename the file 
+if required and save the image.
 
-## Usage 
+![](./images/download-dialog-screenshot.png)
 
-1. Select the text (code snippet) on the page that you want to include in the image.
-2. Right click and select Code2Image and in the submenu, select the language.
-3. In the language submenu, select a color theme.
+## Sample Image generated using Themeify
 
-![](./images/context-menu2-screenshot.png)
+![](./images/sample-output.png)
 
-4. A file save dialog will appear where you can rename the file 
-if required and save the image.
+## Installing locally for Development
 
-![](./images/download-dialog-screenshot.png)
+1. Clone this repository `git clone https://github.com/cyberpirate92/code2img-chrome`.
+2. Open Google Chrome and open Extension Management page by navigating to `chrome://extensions`.
+3. Turn on **Developer Mode**.
+4. Click on the **LOAD UNPACKED** button and select the `src` directory from the project folder.
 
-## Sample Image generated using Code2Image extension
+![](./images/load_extension.png)
 
-![](./images/sample-image.png)
+5. The extension is now installed locally.

src/js/preferences.js

@@ -52,7 +52,7 @@ function generatePreview(imageElement, spinnerElement, errorAlert, preferences)
 
         let queryParams = new URLSearchParams();
         queryParams.set('language', 'java');
-        queryParams.set('theme', 'xonokai');
+        queryParams.set('theme', 'pojoaque');
         queryParams.set('background-color', preferences.backgroundColor);
         queryParams.set('show-background', preferences.showBackground);
         queryParams.set('line-numbers', preferences.showLineNumbers);
@@ -192,6 +192,8 @@ function normalize(value, minValue, maxValue) {
                     backgroundImagePreview.parentElement.classList.remove('d-none');
                 }
             }
+
+            settingsPreviewSection.classList.add('d-none');
         });
     }
 
@@ -238,6 +240,9 @@ function normalize(value, minValue, maxValue) {
 
     previewButton.addEventListener('click', () => {
         settingsPreviewSection.classList.remove('d-none');
+        settingsPreviewSection.scrollIntoView({
+            behavior: "smooth",
+        });
         generatePreview(settingsPreviewImage, previewLoadingSpinner, document.querySelector('#previewErrorAlert'), getSettings());
     });
 
@@ -251,7 +256,7 @@ function normalize(value, minValue, maxValue) {
  * used for generating the preview
  */
 const previewCode = `/*
- * 🔥🔥 Generated with Themeify 🔥🔥
+ * 🔥🔥 This is a preview 🔥🔥
  */
 import java.util.*; 
 class FizzBuzz

src/preferences.html

@@ -12,7 +12,7 @@
 
 <body>
     <div class='container'>
-        <div class='row py-4 mt-4'>
+        <div class='row py-2 mt-4'>
             <div class="col-12 text-center">
                 <span class="h1">Themeify Preferences</span>
             </div>
@@ -21,7 +21,7 @@
             <div class="col-12">
                 <div class="card mt-4">
                     <div class="card-header prefs-subheader text-white bg-secondary">General Preferences</div>
-                    <div class="card-body bg-light">
+                    <div class="card-body">
                         <div class="form-check">
                             <input type="checkbox" class="form-check-input" id="showLineNumbers">
                             <label class="form-check-label">Show Line Numbers</label>
@@ -35,7 +35,7 @@
                 </div>
                 <div class="card mt-4" id="backgroundPrefsSection">
                     <div class="card-header prefs-subheader text-white bg-secondary">Background Preferences</div>
-                    <div class="card-body bg-light">
+                    <div class="card-body">
                         <div class="form-group">
                             <div class="input-group">
                                 <div class="input-group-prepend">
@@ -98,10 +98,10 @@
                     <i class="fas fa-check-circle"></i> Your preferences are saved.
                 </div>
                 <div class="form-group text-right mt-4">
-                    <button class="btn btn-info float-left" type="button" id="previewButton"><i class="fas fa-images"></i> Preview Settings</button>
-                    <button class="ml-2 btn btn-dark float-left" type="button" id="setDefaultsButton"><i class="fas fa-home"></i> Set Defaults</button>
-                    <button class="mr-2 btn btn-secondary" type="button" id="resetButton">Reset Changes <i class="fas fa-history"></i></button>
-                    <button class="btn btn-primary" type="button" id="saveButton">Save Changes <i class="fas fa-save"></i></button>
+                    <button class="btn btn-info float-left" type="button" id="previewButton" title="Generate an image with the current settings"><i class="fas fa-images"></i> Show Preview</button>
+                    <button class="ml-2 btn btn-dark float-left" type="button" id="setDefaultsButton" title="Reset settings to their default values"><i class="fas fa-home"></i> Set Defaults</button>
+                    <button class="mr-2 btn btn-secondary" type="button" id="resetButton" title="Undo all changes made in this session">Reset Changes <i class="fas fa-history"></i></button>
+                    <button class="btn btn-primary" type="button" id="saveButton" title="Save all changes">Save Changes <i class="fas fa-save"></i></button>
                 </div>
             </div>
         </div>