update flat button active styles (#302)

GuyLivni · web-flow · commit 3b41f2792036 · 2018-10-23T15:12:43.000+02:00
diff --git a/src/components/Button/components/RegularButton/RegularButton.js b/src/components/Button/components/RegularButton/RegularButton.js
@@ -126,9 +126,7 @@ const flatStyles = ({ theme, flat, secondary, ...otherProps }) =>
       0 2px 2px 0 rgba(12, 15, 20, 0.06), 0 4px 4px 0 rgba(12, 15, 20, 0.06);
 
     &:active {
-      background-color: ${theme.colors.p900};
-      box-shadow: 0 0 0 1px rgba(12, 15, 20, 0.02),
-        0 0 1px 0 rgba(12, 15, 20, 0.06), 0 2px 2px 0 rgba(12, 15, 20, 0.06);
+      box-shadow: inset 0 4px 8px 0 rgba(12, 15, 20, 0.3);
     }
 
     &:hover {
diff --git a/src/components/Button/components/RegularButton/__snapshots__/RegularButton.spec.js.snap b/src/components/Button/components/RegularButton/__snapshots__/RegularButton.spec.js.snap
@@ -191,8 +191,7 @@ exports[`RegularButton should have flat button styles 1`] = `
 }
 
 .circuit-0:active {
-  background-color: #1641AC;
-  box-shadow: 0 0 0 1px rgba(12,15,20,0.02),0 0 1px 0 rgba(12,15,20,0.06),0 2px 2px 0 rgba(12,15,20,0.06);
+  box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3);
 }
 
 .circuit-0:hover {
@@ -279,8 +278,7 @@ exports[`RegularButton should have flat disabled button styles 1`] = `
 }
 
 .circuit-0:active {
-  background-color: #1641AC;
-  box-shadow: 0 0 0 1px rgba(12,15,20,0.02),0 0 1px 0 rgba(12,15,20,0.06),0 2px 2px 0 rgba(12,15,20,0.06);
+  box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3);
 }
 
 .circuit-0:hover {

Original file line number	Diff line number	Diff line change
`@@ -126,9 +126,7 @@ const flatStyles = ({ theme, flat, secondary, ...otherProps }) =>`
`126`	`126`	`0 2px 2px 0 rgba(12, 15, 20, 0.06), 0 4px 4px 0 rgba(12, 15, 20, 0.06);`
`127`	`127`
`128`	`128`	`&:active {`
`129`		`- background-color: ${theme.colors.p900};`
`130`		`- box-shadow: 0 0 0 1px rgba(12, 15, 20, 0.02),`
`131`		`- 0 0 1px 0 rgba(12, 15, 20, 0.06), 0 2px 2px 0 rgba(12, 15, 20, 0.06);`
	`129`	`+ box-shadow: inset 0 4px 8px 0 rgba(12, 15, 20, 0.3);`
`132`	`130`	`}`
`133`	`131`
`134`	`132`	`&:hover {`
Original file line number	Diff line number	Diff line change
@@ -191,8 +191,7 @@ exports[`RegularButton should have flat button styles 1`] = `
`191`	`191`	`}`
`192`	`192`
`193`	`193`	`.circuit-0:active {`
`194`		`- background-color: #1641AC;`
`195`		`- box-shadow: 0 0 0 1px rgba(12,15,20,0.02),0 0 1px 0 rgba(12,15,20,0.06),0 2px 2px 0 rgba(12,15,20,0.06);`
	`194`	`+ box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3);`
`196`	`195`	`}`
`197`	`196`
`198`	`197`	`.circuit-0:hover {`
@@ -279,8 +278,7 @@ exports[`RegularButton should have flat disabled button styles 1`] = `
`279`	`278`	`}`
`280`	`279`
`281`	`280`	`.circuit-0:active {`
`282`		`- background-color: #1641AC;`
`283`		`- box-shadow: 0 0 0 1px rgba(12,15,20,0.02),0 0 1px 0 rgba(12,15,20,0.06),0 2px 2px 0 rgba(12,15,20,0.06);`
	`281`	`+ box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3);`
`284`	`282`	`}`
`285`	`283`
`286`	`284`	`.circuit-0:hover {`