Merge branch 'develop' into t3chguy/xsigning/fix_userinfo_e2eicon

res/css/views/right_panel/_UserInfo.scss

@@ -20,7 +20,7 @@ limitations under the License.
     flex-direction: column;
     flex: 1;
     overflow-y: auto;
-    font-size: 12px;
+    font-size: $font-12px;
 
     .mx_UserInfo_cancel {
         cursor: pointer;
@@ -43,7 +43,7 @@ limitations under the License.
     }
 
     h2 {
-        font-size: 18px;
+        font-size: $font-18px;
         font-weight: 600;
         margin: 18px 0 0 0;
     }
@@ -122,7 +122,7 @@ limitations under the License.
         text-transform: uppercase;
         color: $notice-secondary-color;
         font-weight: bold;
-        font-size: 12px;
+        font-size: $font-12px;
         margin: 4px 0;
     }
 
@@ -135,8 +135,8 @@ limitations under the License.
 
         h2 {
             display: flex;
-            font-size: 18px;
-            line-height: 25px;
+            font-size: $font-18px;
+            line-height: $font-25px;
             flex: 1;
             justify-content: center;
 
@@ -201,7 +201,7 @@ limitations under the License.
     .mx_UserInfo_field {
         cursor: pointer;
         color: $accent-color;
-        line-height: 16px;
+        line-height: $font-16px;
         margin: 8px 0;
 
         &.mx_UserInfo_destructive {
@@ -210,7 +210,7 @@ limitations under the License.
     }
 
     .mx_UserInfo_statusMessage {
-        font-size: 11px;
+        font-size: $font-11px;
         opacity: 0.5;
         overflow: hidden;
         white-space: nowrap;
@@ -270,12 +270,31 @@ limitations under the License.
         }
     }
 
+    .mx_AccessibleButton.mx_AccessibleButton_hasKind {
+        padding: 8px 18px;
+
+        &.mx_AccessibleButton_kind_primary {
+            color: $accent-color;
+            background-color: $accent-bg-color;
+        }
+
+        &.mx_AccessibleButton_kind_danger {
+            color: $notice-primary-color;
+            background-color: $notice-primary-bg-color;
+        }
+    }
+
+    .mx_VerificationShowSas .mx_AccessibleButton,
     .mx_UserInfo_wideButton {
         display: block;
-        margin: 16px 0;
+        margin: 16px 0 8px;
     }
-    button.mx_UserInfo_wideButton {
-        width: 100%; // FIXME get rid of this once we get rid of DialogButtons here
+
+
+    .mx_VerificationShowSas {
+        .mx_AccessibleButton + .mx_AccessibleButton {
+            margin: 8px 0; // space between buttons
+        }
     }
 }
 

res/css/views/right_panel/_VerificationPanel.scss

@@ -14,6 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_VerificationPanel_verified_section,
+.mx_VerificationPanel_reciprocate_section {
+    // center the big shield icon
+    .mx_E2EIcon {
+        // Override general user info margin
+        margin: 20px auto !important;
+    }
+}
+
+
 .mx_UserInfo {
     .mx_EncryptionPanel_cancel {
         mask: url('$(res)/img/feather-customised/cancel.svg');
@@ -30,11 +40,6 @@ limitations under the License.
         right: 14px;
     }
 
-    .mx_VerificationPanel_verified_section .mx_E2EIcon {
-        // Override general user info margin
-        margin: 0 auto !important;
-    }
-
     .mx_VerificationPanel_qrCode {
         padding: 4px 4px 0 4px;
         background: white;
@@ -51,6 +56,16 @@ limitations under the License.
             max-width: 240px;
         }
     }
+
+    .mx_VerificationPanel_reciprocate_section {
+        .mx_FormButton {
+            width: 100%;
+            box-sizing: border-box;
+            padding: 10px;
+            display: block;
+            margin: 10px 0;
+        }
+    }
 }
 
 // Special case styling for EncryptionPanel in a Modal dialog
@@ -60,6 +75,7 @@ limitations under the License.
         margin-top: 10px;
         margin-bottom: 10px;
         align-items: stretch;
+        justify-content: center;
 
         > .mx_VerificationPanel_QRPhase_betweenText {
             width: 50px;
@@ -75,10 +91,12 @@ limitations under the License.
             border-radius: 10px;
             flex: 1;
             display: flex;
-            padding: 10px;
+            padding: 20px;
             align-items: center;
             flex-direction: column;
             position: relative;
+            max-width: 310px;
+            justify-content: space-between;
 
             canvas, .mx_VerificationPanel_QRPhase_noQR {
                 width: 220px !important;
@@ -91,31 +109,36 @@ limitations under the License.
             }
 
             > p {
+                margin-top: 0;
                 font-weight: 700;
             }
 
             .mx_VerificationPanel_QRPhase_helpText {
-                font-size: 14px;
-                margin-top: 71px;
+                font-size: $font-14px;
+                margin: 30px 0;
                 text-align: center;
             }
-
-            .mx_AccessibleButton {
-                position: absolute;
-                bottom: 30px;
-            }
         }
     }
 
     // EncryptionPanel when verification is done
     .mx_VerificationPanel_verified_section {
-        // center the big shield icon
-        .mx_E2EIcon {
-            margin: 0 auto;
-        }
         // right align the "Got it" button
         .mx_AccessibleButton {
             float: right;
         }
     }
+
+    .mx_VerificationPanel_reciprocate_section {
+        .mx_AccessibleButton {
+            margin-left: 10px;
+            padding: 7px 40px;
+        }
+
+        .mx_VerificationPanel_reciprocateButtons {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-end;
+        }
+    }
 }