finished

Mrpanquecas · May 23, 2019 · c5c26cd · c5c26cd
1 parent d652580
commit c5c26cd
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/src/components/Button/Button.js b/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)}
           }

diff --git a/src/components/common/themes.js b/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",