Revert to blur-able button on web

1 files changed, 7 insertions, 106 deletions

diff --git a/app/assets/css/buttons.css b/app/assets/css/buttons.css
index 805d9e9a74..c745ff7d33 100644
--- a/app/assets/css/buttons.css
+++ b/app/assets/css/buttons.css
@@ -1,129 +1,30 @@
 .button {
   display: flex;
-  width: 100%;
-  padding: 7px 12px 9px;
+  padding: 9px 9px 9px;
   border-radius: 4px;
   border: 0;
-  font-family: DINPro;
-  font-size: 20px;
-  font-weight: 900;
-  line-height: 26px;
   justify-content: center;
   align-items: center;
   transition: 0.25s opacity;
-}
-
-.button:disabled {
-  opacity: 0.5;
-}
-
-.button-label {
-  margin: 0 auto;
-}
-
-/* make negative margin to center label within button */
-.button-label + .button-icon--16 {
-  margin-left: -16px;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  margin-right: 24px;
+  margin-left: 24px;
+  flex: 1;
+  flex-direction: column;
 }
 
 .button--blur {
   backdrop-filter: blur(4px);
 }
 
-.button--primary {
-  background-color: rgba(41,71,115,1);
-  color: rgba(255,255,255,0.8);
-}
-
-.button--primary .button-icon path {
-  fill: rgba(255,255,255,0.8);
-}
-
-.button--primary:not(:disabled):hover {
-  background-color: rgba(41,71,115,0.9);
-  color: rgba(255,255,255,1);
-}
-
-.button--primary:not(:disabled):hover .button-icon path {
-  fill: rgba(255,255,255,1);
-}
-
-.button--primary:active {
-  background-color: rgba(41,71,115,1);
-}
-
-.button--secondary {
-  background-color: rgba(41,71,115,0.4);
-  color: rgba(255,255,255,0.6);
-}
-
-.button--secondary:not(:disabled):hover {
-  background-color: rgba(41,71,115,0.5);
-  color: rgba(255,255,255,0.8);
-}
-
-.button--secondary:active {
-  background-color: rgba(41,71,115,0.4);
-}
-
-.button--negative {
-  background-color: rgba(208,2,27,1);
-  color: rgba(255,255,255,0.8);
-}
-
-.button--negative:not(:disabled):hover {
-  background-color: rgba(208,2,27,0.95);
-  color: rgba(255,255,255,1);
-}
-
-.button--negative:active {
-  background-color: rgba(208,2,27,1);
-}
-
-.button--negative-light {
-  background-color: rgba(208,2,27,0.4);
-  color: rgba(255,255,255,0.6);
-}
-
-.button--negative-light:not(:disabled):hover {
-  background-color: rgba(208,2,27,0.45);
-  color: rgba(255,255,255,0.8);
-}
-
-.button--negative-light:active {
-  background-color: rgba(208,2,27,0.4);
-}
-
-.button--positive {
-  background-color: rgba(63,173,77,1);
-  color: rgba(255,255,255,0.8);
-}
-
-.button--positive .button-icon path {
-  fill: rgba(255,255,255,0.8);
-}
-
-.button--positive:not(:disabled):hover {
-  background-color: rgba(63,173,77,0.9);
-  color: rgba(255,255,255,1);
-}
-
-.button--positive:not(:disabled):hover .button-icon path {
-  fill: rgba(255,255,255,1);
-}
-
-.button--positive:active {
-  background-color: rgba(63,173,77,1);
-}
 
 .button--neutral {
   background-color: rgba(255,255,255,0.2);
-  color: rgba(255,255,255,0.8);
 }
 
 .button--neutral:not(:disabled):hover {
   background-color: rgba(255,255,255,0.25);
-  color: rgba(255,255,255,1);
 }
 
 .button--neutral:active {