From 6fb8899c56aae5042aba81a08691f648a0f16a48 Mon Sep 17 00:00:00 2001
From: Baptiste Lemoine <contact@cipherbliss.com>
Date: Sun, 15 Dec 2019 21:43:01 +0100
Subject: [PATCH] :art: bigger approval buttons

---
 app/javascript/styles/bliss.scss            |  1 +
 app/javascript/styles/bliss/components.scss | 56 +++++++++++++++------
 app/javascript/styles/custom.scss           |  1 +
 3 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/app/javascript/styles/bliss.scss b/app/javascript/styles/bliss.scss
index 64e125da3..2e45ff0c7 100644
--- a/app/javascript/styles/bliss.scss
+++ b/app/javascript/styles/bliss.scss
@@ -6,6 +6,7 @@
 @import 'fonts/montserrat';
 
 @import 'bliss/reset';
+@import 'bliss/messaging';
 @import 'bliss/basics';
 @import 'bliss/containers';
 @import 'bliss/lists';
diff --git a/app/javascript/styles/bliss/components.scss b/app/javascript/styles/bliss/components.scss
index 6264c3df8..e12d1f042 100644
--- a/app/javascript/styles/bliss/components.scss
+++ b/app/javascript/styles/bliss/components.scss
@@ -929,8 +929,12 @@
   }
 
   @keyframes fade {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
   }
 
   opacity: 1;
@@ -2103,7 +2107,7 @@ a.account__display-name {
   .scrollable {
     overflow: visible;
 
-    @supports(display: grid) {
+    @supports (display: grid) {
       contain: content;
     }
   }
@@ -2444,7 +2448,7 @@ a.account__display-name {
     overflow-y: auto;
   }
 
-  @supports(display: grid) { // hack to fix Chrome <57
+  @supports (display: grid) { // hack to fix Chrome <57
     contain: strict;
   }
 
@@ -2461,7 +2465,7 @@ a.account__display-name {
 }
 
 .scrollable.fullscreen {
-  @supports(display: grid) { // hack to fix Chrome <57
+  @supports (display: grid) { // hack to fix Chrome <57
     contain: none;
   }
 }
@@ -3348,9 +3352,15 @@ a.status-card.compact:hover {
 }
 
 @keyframes loader-label {
-  0% { opacity: 0.25; }
-  30% { opacity: 1; }
-  100% { opacity: 0.25; }
+  0% {
+    opacity: 0.25;
+  }
+  30% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.25;
+  }
 }
 
 .video-error-cover {
@@ -3463,6 +3473,16 @@ a.status-card.compact:hover {
   text-align: center;
 }
 
+.account-authorize__wrapper {
+
+  .account--panel__button {
+    .icon-button {
+      width: 100%;
+      display: block;
+    }
+  }
+}
+
 .column-settings__outer {
   background: lighten($ui-base-color, 8%);
   padding: 15px;
@@ -3607,7 +3627,7 @@ a.status-card.compact:hover {
   align-items: center;
   justify-content: center;
 
-  @supports(display: grid) { // hack to fix Chrome <57
+  @supports (display: grid) { // hack to fix Chrome <57
     contain: strict;
   }
 
@@ -4953,6 +4973,7 @@ a.status-card.compact:hover {
   overflow: hidden;
   position: absolute;
 }
+
 /* End Media Gallery */
 
 /* Status Video Player */
@@ -5333,6 +5354,7 @@ a.status-card.compact:hover {
   top: 50%;
   transform: translate(-50%, -50%);
 }
+
 /* End Video Player */
 
 .account-gallery__container {
@@ -5446,9 +5468,15 @@ noscript {
 }
 
 @keyframes flicker {
-  0% { opacity: 1; }
-  30% { opacity: 0.75; }
-  100% { opacity: 1; }
+  0% {
+    opacity: 1;
+  }
+  30% {
+    opacity: 0.75;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
 @media screen and (max-width: 630px) and (max-height: 400px) {
@@ -5481,13 +5509,13 @@ noscript {
       & > .icon-button.close {
         will-change: opacity transform;
         transition: opacity $duration * 0.5 $delay,
-                    transform $duration $delay;
+        transform $duration $delay;
       }
 
       & > .compose__action-bar .icon-button {
         will-change: opacity transform;
         transition: opacity $duration * 0.5 $delay + $duration * 0.5,
-                    transform $duration $delay;
+        transform $duration $delay;
       }
     }
   }
diff --git a/app/javascript/styles/custom.scss b/app/javascript/styles/custom.scss
index 0ae47d616..1dad3a2bc 100644
--- a/app/javascript/styles/custom.scss
+++ b/app/javascript/styles/custom.scss
@@ -27,3 +27,4 @@ $media-modal-media-max-height: 80%;
 
 // then we import the rest of the world
 @import 'application';
+@import 'bliss/messaging';