Merge pull request #40 from arturbien/hatched-background-on-active-buttons

finished

Author: arturbien

src/components/Button/Button.js

@@ -50,6 +50,12 @@ const StyledButton = styled.button`
           ${createBoxStyles()};
           ${({ active }) =>
             active ? createBorderStyles(true) : createBorderStyles(false)}
+          ${({ active, theme }) =>
+            active &&
+            `background-image: ${
+              theme.hatchedBackground
+            };`}
+          
           &:active {
             ${({ isDisabled }) => !isDisabled && createBorderStyles(true)}
           }

src/components/common/themes.js

@@ -1,6 +1,9 @@
 const themes = {};
 
 themes.default = {
+  hatchedBackground:
+    "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVQYV2P8////fwYGBgZGRkZGMI0hABIFAbgEugAAQFQP/QfjEPcAAAAASUVORK5CYII=)",
+
   canvas: "#ffffff",
   material: "#ced0cf",
   materialDark: "#9a9e9c",
@@ -38,6 +41,9 @@ themes.default = {
 };
 
 themes.water = {
+  hatchedBackground:
+    "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVQYV2P8////fwYGBgZGRkZGMI0hABIFAbgEugAAQFQP/QfjEPcAAAAASUVORK5CYII=)",
+
   canvas: "#ffffff",
   material: "#ced0cf",
   materialDark: "#9a9e9c",
@@ -75,6 +81,9 @@ themes.water = {
 };
 
 themes.coldGray = {
+  hatchedBackground:
+    "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVQYV2P8////fwYGBgZGRkZGMI0hABIFAbgEugAAQFQP/QfjEPcAAAAASUVORK5CYII=)",
+
   // background: "#CCF5AC",
   // background: "#416165",
   background: "#4C6663",
@@ -116,6 +125,9 @@ themes.coldGray = {
 };
 
 themes.lilacRoseDark = {
+  hatchedBackground:
+    "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVQYV2P8////fwYGBgZGRkZGMI0hABIFAbgEugAAQFQP/QfjEPcAAAAASUVORK5CYII=)",
+
   background: "#3B3B58",
 
   canvas: "#dab1c7",
@@ -155,6 +167,9 @@ themes.lilacRoseDark = {
 };
 
 themes.violetDark = {
+  hatchedBackground:
+    "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVQYV2P8////fwYGBgZGRkZGMI0hABIFAbgEugAAQFQP/QfjEPcAAAAASUVORK5CYII=)",
+
   canvas: "#c47bcc",
   material: "#652a6d",
   materialDark: "#210e23",