From da0e8dec840fcd6e051ac77c9352064f9cd74153 Mon Sep 17 00:00:00 2001
From: Smie <smie.grin@gmail.com>
Date: Mon, 28 Nov 2016 08:21:30 -0700
Subject: [PATCH] Stylistic changes to pixel and pen size code.

---
 src/css/pensize.css                           | 13 ++++++++-----
 src/js/utils/PixelUtils.js                    |  6 ++----
 src/templates/drawing-tools.html              |  2 +-
 test/js/service/pensize/PenSizeServiceTest.js |  4 ++--
 4 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/css/pensize.css b/src/css/pensize.css
index 94f40068..d00779e5 100644
--- a/src/css/pensize.css
+++ b/src/css/pensize.css
@@ -16,17 +16,17 @@
 }
 
 .pen-size-option[data-size='1'] {
-  padding: 6px;
-}
-.pen-size-option[data-size='2'] {
   padding: 5px;
 }
-.pen-size-option[data-size='3'] {
+.pen-size-option[data-size='2'] {
   padding: 4px;
 }
-.pen-size-option[data-size='4'] {
+.pen-size-option[data-size='3'] {
   padding: 3px;
 }
+.pen-size-option[data-size='4'] {
+  padding: 2px;
+}
 
 .pen-size-option:before {
   content: '';
@@ -34,6 +34,9 @@
   height: 100%;
   background-color: white;
   display: block;
+  text-align: center;
+  line-height: 12px;
+  font-size: 90%;
 }
 
 .pen-size-option:hover {
diff --git a/src/js/utils/PixelUtils.js b/src/js/utils/PixelUtils.js
index d95b0325..b6d2d3a0 100644
--- a/src/js/utils/PixelUtils.js
+++ b/src/js/utils/PixelUtils.js
@@ -81,11 +81,9 @@
      */
     resizePixel : function (col, row, size) {
       var pixels = [];
-      var i;
-      var j;
 
-      for (j = 0; j < size; j++) {
-        for (i = 0; i < size; i++) {
+      for (var j = 0; j < size; j++) {
+        for (var i = 0; i < size; i++) {
           pixels.push([col - Math.floor(size / 2) + i, row - Math.floor(size / 2) + j]);
         }
       }
diff --git a/src/templates/drawing-tools.html b/src/templates/drawing-tools.html
index 77be432f..62c174b8 100644
--- a/src/templates/drawing-tools.html
+++ b/src/templates/drawing-tools.html
@@ -5,7 +5,7 @@
         <div class="pen-size-option" data-size="1"></div>
         <div class="pen-size-option" data-size="2"></div>
         <div class="pen-size-option" data-size="3"></div>
-        <div class="pen-size-option" data-size="4" real-pen-size="6"></div>
+        <div class="pen-size-option" data-size="4"></div>
       </div>
       <ul id="tools-container" class="tools-wrapper">
         <!-- Drawing tools will be inserted here -->
diff --git a/test/js/service/pensize/PenSizeServiceTest.js b/test/js/service/pensize/PenSizeServiceTest.js
index a95daf30..b966c1bf 100644
--- a/test/js/service/pensize/PenSizeServiceTest.js
+++ b/test/js/service/pensize/PenSizeServiceTest.js
@@ -51,11 +51,11 @@ describe("PenSize test suite", function() {
   });
 
   it("skips invalid value (outside of [1, 4])", function() {
-    console.log('[PenSizeService] skips invalid value (outside of [1, 4])');
+    console.log('[PenSizeService] skips invalid value (outside of [1, 32])');
     userSettingsPenSize = 1;
 
     penSizeService.init();
-    // MAX_VALUE is 4
+    // MAX_VALUE is 32
     penSizeService.setPenSize(33);
     expect(penSizeService.getPenSize()).toBe(1);
     // MIN_VALUE is 1