Issue #344 : Add image spriting using spritesmith

Gruntfile.js

@@ -236,6 +236,18 @@ module.exports = function(grunt) {
         },
         src: ['./dest/**/*', "./package.json", "!./dest/desktop/"]
       }
+    },
+    /**
+     *
+     * SPRITING
+     *
+     */
+    sprite:{
+      all : {
+        src: 'src/img/icons/**/*.png',
+        dest: 'src/img/icons.png',
+        destCss: 'src/css/icons.css'
+      }
     }
   });
 
@@ -254,7 +266,7 @@ module.exports = function(grunt) {
   grunt.registerTask('test', ['test-travis']);
   grunt.registerTask('precommit', ['test-local']);
 
-  grunt.registerTask('build',  ['concat:js', 'concat:css', 'uglify', 'replace:main', 'replace:editor', 'copy']);
+  grunt.registerTask('build',  ['sprite', 'concat:js', 'concat:css', 'uglify', 'replace:main', 'replace:editor', 'copy']);
 
   // Validate & Build
   grunt.registerTask('default', ['clean:before', 'lint', 'build']);

package.json

@@ -30,11 +30,12 @@
     "grunt-node-webkit-builder": "^1.0.2",
     "grunt-open": "0.2.3",
     "grunt-replace": "^0.8.0",
+    "grunt-spritesmith": "^6.1.0",
+    "jasmine-core": "^2.1.0",
     "karma": "0.12.31",
     "karma-chrome-launcher": "^0.1.4",
     "karma-jasmine": "^0.3.5",
     "karma-phantomjs-launcher": "^0.1.4",
-    "jasmine-core": "^2.1.0",
     "load-grunt-tasks": "^3.1.0"
   },
   "window": {

src/css/dialogs-cheatsheet.css

@@ -3,7 +3,6 @@
   bottom: 10px;
   left: 10px;
 
-  padding: 1px 0 0 45px;
   color : gold;
   font-weight: bold;
   font-size : 1.25em;
@@ -11,10 +10,6 @@
 
   cursor: pointer;
 
-  background-image:url('../img/keyboard.png');
-  background-size:35px 20px;
-  background-repeat:no-repeat;
-
   opacity: 0.5;
   z-index: 11000;
   transition : opacity 0.3s;
@@ -81,9 +76,7 @@
   height: 30px;
   width: 30px;
   margin: 0 10px 0 0;
-
-  background-size: 20px 20px;
-  background-position: 5px 5px;
+  background-size: 30px 30px;
 }
 
 .cheatsheet-description {
@@ -171,3 +164,64 @@
   bottom: 10px;
   right: 10px;
 }
+
+
+.cheatsheet-icon-tool-circle {
+  background-image: url(../img/icons/tools/tool-circle.png);
+}
+
+.cheatsheet-icon-tool-colorpicker {
+  background-image: url(../img/icons/tools/tool-colorpicker.png);
+}
+
+.cheatsheet-icon-tool-colorswap {
+  background-image: url(../img/icons/tools/tool-colorswap.png);
+}
+
+.cheatsheet-icon-tool-dithering {
+  background-image: url(../img/icons/tools/tool-dithering.png);
+}
+
+.cheatsheet-icon-tool-eraser {
+  background-image: url(../img/icons/tools/tool-eraser.png);
+}
+
+.cheatsheet-icon-tool-lasso-select {
+  background-image: url(../img/icons/tools/tool-lasso-select.png);
+}
+
+.cheatsheet-icon-tool-lighten {
+  background-image: url(../img/icons/tools/tool-lighten.png);
+}
+
+.cheatsheet-icon-tool-move {
+  background-image: url(../img/icons/tools/tool-move.png);
+}
+
+.cheatsheet-icon-tool-paint-bucket {
+  background-image: url(../img/icons/tools/tool-paint-bucket.png);
+}
+
+.cheatsheet-icon-tool-pen {
+  background-image: url(../img/icons/tools/tool-pen.png);
+}
+
+.cheatsheet-icon-tool-rectangle-select {
+  background-image: url(../img/icons/tools/tool-rectangle-select.png);
+}
+
+.cheatsheet-icon-tool-rectangle {
+  background-image: url(../img/icons/tools/tool-rectangle.png);
+}
+
+.cheatsheet-icon-tool-shape-select {
+  background-image: url(../img/icons/tools/tool-shape-select.png);
+}
+
+.cheatsheet-icon-tool-stroke {
+  background-image: url(../img/icons/tools/tool-stroke.png);
+}
+
+.cheatsheet-icon-tool-vertical-mirror-pen {
+  background-image: url(../img/icons/tools/tool-vertical-mirror-pen.png);
+}

src/css/frames-list.css

@@ -55,24 +55,28 @@
 }
 
 .add-frame-action {
-  border: #888 solid 4px;
-  font-size: 13px;
-  color: #888;
-  cursor: pointer;
-  padding: 6px 0;
-  border-radius: 4px;
   margin-top: 8px;
-  background-image: url(../img/plus.png);
-  background-repeat: no-repeat;
-  background-position: 3px 7px;
-  background-size: 26px 26px;
-  text-indent: 18px;
+  padding: 6px 0;
+  overflow: hidden;
+  width: 96px;
+
+  border: #888 solid 3px;
+  border-radius: 4px;
+
+  color: #888;
   background-color: #222;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.add-frame-action-icon {
+  margin: 3px;
+  float: left;
 }
 
 .add-frame-action .label {
-  width: 80px;
-  margin: 0 auto;
+  overflow: hidden;
+  text-align: left;
 }
 
 .add-frame-action:hover {
@@ -129,15 +133,9 @@
 }
 
 .preview-tile .tile-overlay.delete-frame-action {
-   background-image: url(../img/garbage.png);
-   background-repeat: no-repeat;
    top: 0;
    right: 0;
    border-bottom-left-radius: 3px;
-   height: 30px;
-   width: 30px;
-   background-position: 5px 5px;
-   background-size: 20px;
    cursor: pointer;
 }
 
@@ -145,10 +143,6 @@
    bottom: 0;
    right: 0;
    border-bottom-left-radius: 3px;
-   background-image: url(../img/duplicate.png);
-   background-repeat: no-repeat;
-   background-position: 5px 5px;
-   background-size: 20px;
    cursor: pointer;
 }
 
@@ -156,10 +150,6 @@
    bottom: 0;
    left: 0;
    border-top-right-radius: 3px;
-   background-image: url(../img/dragndrop.png);
-   background-repeat: no-repeat;
-   background-position: 5px 5px;
-   background-size: 20px;
    cursor: move;
 }
 

src/css/icons.css

@@ -1,24 +1,197 @@
-.action-icon {
-  cursor: pointer;
-  height: 100%;
-  background-repeat: no-repeat;
-  background-position: 50%;
-}
+/*
+Icon classes can be used entirely standalone. They are named after their original file names.
 
-.edit-icon {
-  background-image: url('../img/tools/pen.png');
-  background-repeat: no-repeat;
-}
+```html
+<!-- `display: block` sprite -->
+<div class="icon-home"></div>
 
-.merge-icon {
-  background-image: url('../img/merge-icon.png');
-  background-repeat: no-repeat;
+<!-- `display: inline-block` sprite -->
+<img class="icon-home" />
+```
+*/
+.icon-common-keyboard-gold {
+  background-image: url(../img/icons.png);
+  background-position: -230px 0px;
+  width: 35px;
+  height: 20px;
 }
-
-.plus-icon {
-  font-size:15px;
-  text-align:center;
+.icon-common-swapcolors-arrow-grey {
+  background-image: url(../img/icons.png);
+  background-position: -230px -46px;
+  width: 18px;
+  height: 18px;
 }
-
-.delete-icon {
+.icon-frame-dragndrop-white {
+  background-image: url(../img/icons.png);
+  background-position: -198px -184px;
+  width: 30px;
+  height: 30px;
+}
+.icon-frame-duplicate-white {
+  background-image: url(../img/icons.png);
+  background-position: -168px -184px;
+  width: 30px;
+  height: 30px;
+}
+.icon-frame-plus-white {
+  background-image: url(../img/icons.png);
+  background-position: -230px -20px;
+  width: 26px;
+  height: 26px;
+}
+.icon-frame-recyclebin-white {
+  background-image: url(../img/icons.png);
+  background-position: -138px -184px;
+  width: 30px;
+  height: 30px;
+}
+.icon-minimap-popup-preview-arrow-gold {
+  background-image: url(../img/icons.png);
+  background-position: -230px -82px;
+  width: 18px;
+  height: 18px;
+}
+.icon-minimap-popup-preview-arrow-white {
+  background-image: url(../img/icons.png);
+  background-position: -230px -64px;
+  width: 18px;
+  height: 18px;
+}
+.icon-settings-export-white {
+  background-image: url(../img/icons.png);
+  background-position: -92px -92px;
+  width: 46px;
+  height: 46px;
+}
+.icon-settings-gear-white {
+  background-image: url(../img/icons.png);
+  background-position: -138px 0px;
+  width: 46px;
+  height: 46px;
+}
+.icon-settings-open-folder-white {
+  background-image: url(../img/icons.png);
+  background-position: -138px -46px;
+  width: 46px;
+  height: 46px;
+}
+.icon-settings-resize-white {
+  background-image: url(../img/icons.png);
+  background-position: -138px -92px;
+  width: 46px;
+  height: 46px;
+}
+.icon-settings-save-white {
+  background-image: url(../img/icons.png);
+  background-position: 0px -138px;
+  width: 46px;
+  height: 46px;
+}
+.icon-tool-circle {
+  background-image: url(../img/icons.png);
+  background-position: -46px -138px;
+  width: 46px;
+  height: 46px;
+}
+.icon-tool-colorpicker {
+  background-image: url(../img/icons.png);
+  background-position: -92px -138px;
+  width: 46px;
+  height: 46px;
+}
+.icon-tool-colorswap {
+  background-image: url(../img/icons.png);
+  background-position: 0px 0px;
+  width: 46px;
+  height: 46px;
+}
+.icon-tool-dithering {
+  background-image: url(../img/icons.png);
+  background-position: -184px 0px;
+  width: 46px;
+  height: 46px;
+}
+.icon-tool-eraser {
+  background-image: url(../img/icons.png);
+  background-position: -184px -46px;
+  width: 46px;
+  height: 46px;
+}
+.icon-tool-lasso-select {
+  background-image: url(../img/icons.png);
+  background-position: -184px -92px;
+  width: 46px;
+  height: 46px;
+}
+.icon-tool-lighten {
+  background-image: url(../img/icons.png);
+  background-position: -184px -138px;
+  width: 46px;
+  height: 46px;
+}
+.icon-tool-move {
+  background-image: url(../img/icons.png);
+  background-position: 0px -184px;
+  width: 46px;
+  height: 46px;
+}
+.icon-tool-paint-bucket {
+  background-image: url(../img/icons.png);
+  background-position: -46px -184px;
+  width: 46px;
+  height: 46px;
+}
+.icon-tool-pen {
+  background-image: url(../img/icons.png);
+  background-position: -92px -184px;
+  width: 46px;
+  height: 46px;
+}
+.icon-tool-rectangle-select {
+  background-image: url(../img/icons.png);
+  background-position: -138px -138px;
+  width: 46px;
+  height: 46px;
+}
+.icon-tool-rectangle {
+  background-image: url(../img/icons.png);
+  background-position: -46px -92px;
+  width: 46px;
+  height: 46px;
+}
+.icon-tool-shape-select {
+  background-image: url(../img/icons.png);
+  background-position: 0px -92px;
+  width: 46px;
+  height: 46px;
+}
+.icon-tool-stroke {
+  background-image: url(../img/icons.png);
+  background-position: -92px -46px;
+  width: 46px;
+  height: 46px;
+}
+.icon-tool-vertical-mirror-pen {
+  background-image: url(../img/icons.png);
+  background-position: -92px 0px;
+  width: 46px;
+  height: 46px;
+}
+.icon-tool-clone {
+  background-image: url(../img/icons.png);
+  background-position: -46px -46px;
+  width: 46px;
+  height: 46px;
+}
+.icon-tool-flip {
+  background-image: url(../img/icons.png);
+  background-position: 0px -46px;
+  width: 46px;
+  height: 46px;
+}
+.icon-tool-rotate {
+  background-image: url(../img/icons.png);
+  background-position: -46px 0px;
+  width: 46px;
+  height: 46px;
 }

src/css/layout.css

@@ -103,22 +103,22 @@
 
 .light-picker-background,
 .light-canvas-background .canvas-background {
-  background: url(../img/canvas_background/light_canvas_background.png) repeat;
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABlBMVEXf39////8zI3BgAAAAHklEQVR4AWNghAIGCMDgjwgFCDDSw2M0PSCD0fQAACRcAgF4ciGUAAAAAElFTkSuQmCC') repeat;
 }
 
 .medium-picker-background,
 .medium-canvas-background .canvas-background {
-  background: url(../img/canvas_background/medium_canvas_background.png) repeat;
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABlBMVEW6urr///82MBGFAAAAHUlEQVR4AWOAAUYoQOePEAUj3v9oYDQ9gMBoegAAJFwCAbLaTIMAAAAASUVORK5CYII=') repeat;
 }
 
 .lowcont-medium-picker-background,
 .lowcont-medium-canvas-background .canvas-background {
-  background: url(../img/canvas_background/lowcont_medium_canvas_background.png) repeat;
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABlBMVEXV1dXb29tFGkCIAAAAHklEQVR4AWNghAIGCMDgjwgFCDDSw2M0PSCD0fQAACRcAgF4ciGUAAAAAElFTkSuQmCC') repeat;
 }
 
 .lowcont-dark-picker-background,
 .lowcont-dark-canvas-background .canvas-background {
-  background: url(../img/canvas_background/lowcont_dark_canvas_background.png) repeat;
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABlBMVEVMTExVVVUnhsEkAAAAHUlEQVR4AWOAAUYoQOePEAUj3v9oYDQ9gMBoegAAJFwCAbLaTIMAAAAASUVORK5CYII=') repeat;
 }
 
 .canvas.onion-skin-canvas {

src/css/settings.css

@@ -21,55 +21,6 @@
   margin-right: 0;
 }
 
-/********************************************************** *j* j** j*j j j j** *****************/
-/* Settings icons                                            I  I   I I I\I  \                  */
-/********************************************************** *** *** *** * * '** *****************/
-
-.tool-icon.gallery-icon {
-  background-image: url(../img/gallery.png);
-  background-position: 3px 3px;
-  background-size: 39px 39px;
-}
-
-.tool-icon.resize-icon {
-  background-image: url(../img/resize-icon.png);
-  background-position: 10px 10px;
-  background-size: 26px 26px;
-}
-
-.tool-icon.save-icon {
-  background-image: url(../img/save.png);
-  background-position: 6px 6px;
-  background-size: 36px 36px;
-}
-
-.tool-icon.gear-icon {
-  background-image: url(../img/gear.png);
-  background-position: 6px 7px;
-  background-size: 32px 32px;
-}
-
-.tool-icon.export-icon {
-  background-image: url(../img/export.png);
-  background-position: 7px 5px;
-  background-size: 36px 36px;
-  position: relative;
-}
-
-.tool-icon.local-storage-icon {
-  background-image: url(../img/local-storage-icon.png);
-  background-position: 10px 12px;
-  background-size: 30px;
-  position: relative;
-}
-
-.tool-icon.import-icon {
-  background-image: url(../img/import-icon.png);
-  background-position: 10px 5px;
-  background-size: 26px;
-  position: relative;
-}
-
 .tool-icon .label {
   position: absolute;
   left: 0;

src/css/sprites.css

@@ -0,0 +1,113 @@
+/*
+Icon classes can be used entirely standalone. They are named after their original file names.
+
+```html
+<!-- `display: block` sprite -->
+<div class="icon-home"></div>
+
+<!-- `display: inline-block` sprite -->
+<img class="icon-home" />
+```
+*/
+.icon-cloud_export {
+  background-image: url(../img/spritesheet.png);
+  background-position: -512px -276px;
+  width: 50px;
+  height: 47px;
+}
+.icon-dragndrop {
+  background-image: url(../img/spritesheet.png);
+  background-position: -564px -173px;
+  width: 48px;
+  height: 48px;
+}
+.icon-duplicate {
+  background-image: url(../img/spritesheet.png);
+  background-position: -512px -369px;
+  width: 16px;
+  height: 16px;
+}
+.icon-export {
+  background-image: url(../img/spritesheet.png);
+  background-position: -564px -225px;
+  width: 43px;
+  height: 42px;
+}
+.icon-favicon {
+  background-image: url(../img/spritesheet.png);
+  background-position: -582px -151px;
+  width: 16px;
+  height: 16px;
+}
+.icon-gallery {
+  background-image: url(../img/spritesheet.png);
+  background-position: -512px -225px;
+  width: 52px;
+  height: 51px;
+}
+.icon-garbage {
+  background-image: url(../img/spritesheet.png);
+  background-position: 0px 0px;
+  width: 512px;
+  height: 512px;
+}
+.icon-gear {
+  background-image: url(../img/spritesheet.png);
+  background-position: -563px -323px;
+  width: 38px;
+  height: 37px;
+}
+.icon-import-icon {
+  background-image: url(../img/spritesheet.png);
+  background-position: -576px -69px;
+  width: 28px;
+  height: 36px;
+}
+.icon-keyboard {
+  background-image: url(../img/spritesheet.png);
+  background-position: -512px -133px;
+  width: 70px;
+  height: 40px;
+}
+.icon-local-storage-icon {
+  background-image: url(../img/spritesheet.png);
+  background-position: -512px 0px;
+  width: 100px;
+  height: 69px;
+}
+.icon-merge-icon {
+  background-image: url(../img/spritesheet.png);
+  background-position: -512px -69px;
+  width: 64px;
+  height: 64px;
+}
+.icon-plus {
+  background-image: url(../img/spritesheet.png);
+  background-position: -512px -323px;
+  width: 51px;
+  height: 46px;
+}
+.icon-popup-preview-arrow-gold {
+  background-image: url(../img/spritesheet.png);
+  background-position: -576px -105px;
+  width: 24px;
+  height: 18px;
+}
+.icon-popup-preview-arrow-white {
+  background-image: url(../img/spritesheet.png);
+  background-position: -582px -133px;
+  width: 24px;
+  height: 18px;
+}
+.icon-resize-icon {
+  background-image: url(../img/spritesheet.png);
+  background-position: -512px -173px;
+  width: 52px;
+  height: 52px;
+}
+.icon-save {
+  background-image: url(../img/spritesheet.png);
+  background-position: -562px -276px;
+  width: 43px;
+  height: 42px;
+}

src/css/toolbox-animated-preview.css

@@ -121,15 +121,18 @@
 }
 
 .open-popup-preview-button {
-  width : 18px;
-  height: 18px;
-
   border : 2px solid white;
-  background-image: url(../img/popup-preview-arrow-white.png);
   background-color : rgba(0,0,0,0.3);
 }
 
 .open-popup-preview-button:hover {
   border-color: gold;
-  background-image: url(../img/popup-preview-arrow-gold.png);
+}
+
+/**
+ * The regular image is provided bby the sprite icons.png+icons.css
+ */
+.icon-minimap-popup-preview-arrow-white:hover {
+  background-image: url(../img/icons/minimap/minimap-popup-preview-arrow-gold.png);
+  background-position: 0 0;
 }

src/css/toolbox-layers-list.css

@@ -5,13 +5,6 @@
 .layers-list-container {
 }
 
-/*.layers-title {
-  background-image: url('../img/layers.svg');
-  background-size: 22px;
-  background-repeat: no-repeat;
-  background-position: 97%;
-}*/
-
 .layers-title {
   position: relative;
 }

src/css/toolbox-palettes-list.css

@@ -137,10 +137,6 @@
     outline: none;
 }
 
-.palettes-list-actions .edit-icon {
-    background-size: 15px;
-    background-position: 50%;
-}
 .palettes-list-no-colors {
     height: 42px;
     width: 100%;

src/css/tools.css

@@ -5,9 +5,6 @@
   height: 46px;
   margin: 1px;
   background-color: #3a3a3a;
-  background-repeat: no-repeat;
-  background-position: 12px 12px;
-  background-size: 24px 24px;
 }
 
 .tool-icon.selected {
@@ -22,145 +19,49 @@
   width : 100%;
   border: 3px solid gold;
   box-sizing: border-box;
-  -moz-box-sizing: border-box;
 }
 
 .tool-icon:hover {
   background-color: #444;
 }
 
-/*
- * Tool icons:
- */
-.tool-icon.tool-pen {
-  background-image: url(../img/tools/pen.png);
-}
-
-.tool-icon.tool-vertical-mirror-pen {
-  background-image: url(../img/tools/mirror.png);
-  background-position: 0px 10px;
-  background-size: 38px 27px;
-}
-
-.tool-icon.tool-paint-bucket {
-  background-image: url(../img/tools/paintbucket.png);
-}
-
-.tool-icon.tool-eraser {
-  background-image: url(../img/tools/eraser.png);
-}
-
-.tool-icon.tool-stroke {
-  background-image: url(../img/tools/stroke.png);
-}
-
-.tool-icon.tool-rectangle {
-  background-image: url(../img/tools/rectangle.png);
-  background-position: 12px 14px;
-  background-size: 24px 20px;
-}
-
-.tool-icon.tool-circle {
-  background-image: url(../img/tools/circle.png);
-}
-
-.tool-icon.tool-move {
-  background-image: url(../img/tools/hand.png);
-  background-size: 24px 24px;
-}
-
-.tool-icon.tool-rectangle-select {
-  background-image: url(../img/tools/rectangle_selection.png);
-  background-position: 12px 14px;
-  background-size: 24px 20px;
-}
-
-.tool-icon.tool-lasso-select {
-  background-image: url(../img/tools/lasso.png);
-}
-
-.tool-icon.tool-shape-select {
-  background-image: url(../img/tools/magicwand.png);
-}
-
-.tool-icon.tool-lighten {
-  background-image: url(../img/tools/lighten.png);
-  background-position: 8px 8px;
-  background-size: 30px 30px;
-}
-
-.tool-icon.tool-colorpicker {
-  background-image: url(../img/tools/eyedropper.png);
-  background-size: 23px 23px;
-}
-
-.tool-icon.tool-colorswap {
-  background-image: url(../img/tools/swap-colors.png);
-  background-position: 6px 6px;
-  background-size: 36px 36px;
-}
-
-.tool-icon.tool-flip {
-  background-image: url(../img/tools/flip.png);
-  background-position: 7px 11px;
-  background-size: 32px;
-}
-
-.tool-icon.tool-rotate {
-  background-image: url(../img/tools/rotate.png);
-  background-position: 10px 9px;
-  background-size: 26px;
-}
-
-.tool-icon.tool-clone {
-  background-image: url(../img/tools/clone.png);
-  background-position: 9px 15px;
-  background-size: 30px;
-}
-
-.tool-icon.tool-dithering {
-  background-image: url(../img/tools/dithering.png);
-  background-position: 8px 9px;
-  background-size: 30px;
-}
-
 /*
  * Tool cursors:
  */
 
 .tool-paint-bucket .drawing-canvas-container:hover,
 .tool-colorswap .drawing-canvas-container:hover {
-  cursor: url(../img/icons/paint-bucket.png) 12 12, pointer;
+  cursor: url(../img/cursors/paint-bucket.png) 12 12, pointer;
 }
 
 .tool-vertical-mirror-pen .drawing-canvas-container:hover {
-  cursor: url(../img/icons/vertical-mirror-pen.png) 5 15, pointer;
+  cursor: url(../img/cursors/vertical-mirror-pen.png) 5 15, pointer;
 }
 
 .tool-pen .drawing-canvas-container:hover,
 .tool-lighten .drawing-canvas-container:hover,
 .tool-dithering .drawing-canvas-container:hover {
-  cursor: url(../img/icons/pen.png) 0 15, pointer;
+  cursor: url(../img/cursors/pen.png) 0 15, pointer;
 }
 
 .tool-eraser .drawing-canvas-container:hover {
-  cursor: url(../img/icons/eraser.png) 0 15, pointer;
+  cursor: url(../img/cursors/eraser.png) 0 15, pointer;
 }
 
 .tool-stroke .drawing-canvas-container:hover {
-  cursor: url(../img/icons/pen.png) 0 15, pointer;
+  cursor: url(../img/cursors/pen.png) 0 15, pointer;
 }
 
 .tool-rectangle .drawing-canvas-container:hover {
-  cursor: url(../img/icons/rectangle.png) 0 15, pointer;
+  cursor: url(../img/cursors/rectangle.png) 0 15, pointer;
 }
 
 .tool-circle .drawing-canvas-container:hover {
-  cursor: url(../img/icons/circle.png) 2 15, pointer;
+  cursor: url(../img/cursors/circle.png) 2 15, pointer;
 }
 
 .tool-move .drawing-canvas-container:hover {
-  cursor: url(../img/icons/hand.png) 7 7, pointer;
+  cursor: url(../img/cursors/hand.png) 7 7, pointer;
 }
 
 .tool-rectangle-select .drawing-canvas-container:hover,
@@ -169,26 +70,26 @@
 }
 
 .tool-shape-select .drawing-canvas-container:hover {
-  cursor: url(../img/icons/wand.png) 15 15, pointer;
+  cursor: url(../img/cursors/wand.png) 15 15, pointer;
 }
 
 .tool-colorpicker .drawing-canvas-container:hover {
-  cursor: url(../img/icons/dropper.png) 0 15, pointer;
+  cursor: url(../img/cursors/dropper.png) 0 15, pointer;
 }
 
-.swap-colors-icon {
-  background-image: url(../img/tools/swap-arrow-square-small-grey.png);
+.swap-colors-button {
   position: relative;
   top: 50px;
   left: 6px;
   height: 18px;
   width: 18px;
-  background-size: 18px;
+
   opacity : 0.3;
+
   cursor : pointer;
 }
 
-.swap-colors-icon:hover {
+.swap-colors-button:hover {
   opacity : 1;
 }