Fix visual bugs on AccessSecretStorageDialog (#8160)

* Remove duplicate mx_Dialog_buttons

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Group buttons on mx_Dialog with span

- Cancel default styling for elements inside .mx_AccessSecretStorageDialog_primaryContainer

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Move common rules of mx_Dialog_buttons_row to _common.scss

- Set 16px gap between buttons per https://github.com/vector-im/element-web/issues/19426#issuecomment-949778515

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Spacing variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Nesting - .mx_AccessSecretStorageDialog_reset

- Fix the reset link color
- Set $spacingStart variable

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove unnecessary rule

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

res/css/_common.scss

@@ -20,6 +20,7 @@ limitations under the License.
 @import "./_font-sizes.scss";
 @import "./_font-weights.scss";
 @import "./_animations.scss";
+@import "./_spacing.scss";
 @import url("maplibre-gl/dist/maplibre-gl.css");
 
 $hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
@@ -414,7 +415,8 @@ legend {
 }
 
 .mx_Dialog_buttons {
-    margin-top: 20px;
+    margin-top: $spacing-20;
+    margin-inline-start: auto;
     text-align: right;
 
     .mx_Dialog_buttons_additive {
@@ -423,6 +425,22 @@ legend {
     }
 }
 
+.mx_Dialog_buttons_row {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    text-align: initial;
+    margin-inline-start: auto;
+
+    // default gap among elements
+    column-gap: $spacing-8; // See margin-right below inside the button style
+    row-gap: 5px; // See margin-bottom below inside the button style
+
+    button {
+        margin: 0 !important; // override the margin settings
+    }
+}
+
 /* XXX: Our button style are a mess: buttons that happen to appear in dialogs get special styles applied
  * to them that no button anywhere else in the app gets by default. In practice, buttons in other places
  * in the app look the same by being AccessibleButtons, or possibly by having explict button classes.

res/css/views/dialogs/security/_AccessSecretStorageDialog.scss

@@ -14,38 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_AccessSecretStorageDialog_reset {
-    position: relative;
-    padding-left: 24px; // 16px icon + 8px padding
-    margin-top: 7px; // vertical alignment to buttons
-    margin-bottom: 7px; // space between the buttons and the text when float is activated
-    text-align: left;
-
-    &::before {
-        content: "";
-        display: inline-block;
-        position: absolute;
-        height: 16px;
-        width: 16px;
-        left: 0;
-        top: 2px; // alignment
-        background-image: url("$(res)/img/element-icons/warning-badge.svg");
-        background-size: contain;
-    }
-
-    .mx_AccessSecretStorageDialog_reset_link {
-        color: $alert;
-    }
-}
-
 .mx_AccessSecretStorageDialog_titleWithIcon::before {
     content: '';
     display: inline-block;
     width: 24px;
     height: 24px;
-    margin-right: 8px;
+    margin-inline-end: $spacing-8;
     position: relative;
-    top: 5px;
+    top: 5px; // TODO: spacing variable
     background-color: $primary-content;
 }
 
@@ -84,7 +60,7 @@ limitations under the License.
 }
 
 .mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
-    margin: 16px;
+    margin: $spacing-16;
 }
 
 .mx_AccessSecretStorageDialog_recoveryKeyFeedback {
@@ -97,7 +73,7 @@ limitations under the License.
         mask-repeat: no-repeat;
         mask-position: center;
         mask-size: 20px;
-        margin-right: 5px;
+        margin-inline-end: 5px; // TODO: spacing variable
     }
 }
 
@@ -120,3 +96,44 @@ limitations under the License.
 .mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput {
     display: none;
 }
+
+.mx_AccessSecretStorageDialog_primaryContainer {
+    .mx_Dialog_buttons {
+        $spacingStart: $spacing-24;  // 16px icon + 8px padding
+
+        text-align: initial;
+        display: flex;
+        flex-flow: column;
+        gap: 14px;  // TODO: spacing variable
+
+        .mx_Dialog_buttons_additive {
+            float: none;
+
+            .mx_AccessSecretStorageDialog_reset {
+                position: relative;
+                padding-inline-start: $spacingStart;
+
+                &::before {
+                    content: "";
+                    display: inline-block;
+                    position: absolute;
+                    height: 16px;
+                    width: 16px;
+                    left: 0;
+                    top: 2px; // alignment
+                    background-image: url("$(res)/img/element-icons/warning-badge.svg");
+                    background-size: contain;
+                }
+
+                .mx_AccessSecretStorageDialog_reset_link {
+                    color: $alert;
+                }
+            }
+        }
+
+        .mx_Dialog_buttons_row {
+            gap: $spacing-16; // TODO: needs normalization
+            padding-inline-start: $spacingStart;
+        }
+    }
+}

src/async-components/views/dialogs/security/CreateKeyBackupDialog.tsx

@@ -455,13 +455,12 @@ export default class CreateKeyBackupDialog extends React.PureComponent<IProps, I
         if (this.state.error) {
             content = <div>
                 <p>{ _t("Unable to create key backup") }</p>
-                <div className="mx_Dialog_buttons">
+                <DialogButtons
-                    <DialogButtons primaryButton={_t('Retry')}
+                    primaryButton={_t('Retry')}
                     onPrimaryButtonClick={this.createBackup}
                     hasCancel={true}
                     onCancel={this.onCancel}
                 />
-                </div>
             </div>;
         } else {
             switch (this.state.phase) {

src/components/views/elements/DialogButtons.tsx

@@ -100,6 +100,7 @@ export default class DialogButtons extends React.Component<IProps> {
         return (
             <div className="mx_Dialog_buttons">
                 { additive }
+                <span className="mx_Dialog_buttons_row">
                     { cancelButton }
                     { this.props.children }
                     <button type={this.props.primaryIsSubmit ? 'submit' : 'button'}
@@ -111,6 +112,7 @@ export default class DialogButtons extends React.Component<IProps> {
                     >
                         { this.props.primaryButton }
                     </button>
+                </span>
             </div>
         );
     }

test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap

@@ -244,6 +244,9 @@ Array [
               </div>
               <div
                 class="mx_Dialog_buttons"
+              >
+                <span
+                  class="mx_Dialog_buttons_row"
                 >
                   <button
                     data-test-id="dialog-cancel-button"
@@ -258,6 +261,7 @@ Array [
                   >
                     Export
                   </button>
+                </span>
               </div>
             </div>
           }
@@ -465,6 +469,9 @@ Array [
                 </div>
                 <div
                   class="mx_Dialog_buttons"
+                >
+                  <span
+                    class="mx_Dialog_buttons_row"
                   >
                     <button
                       data-test-id="dialog-cancel-button"
@@ -479,6 +486,7 @@ Array [
                     >
                       Export
                     </button>
+                  </span>
                 </div>
               </div>
             }
@@ -814,6 +822,9 @@ Array [
           >
             <div
               className="mx_Dialog_buttons"
+            >
+              <span
+                className="mx_Dialog_buttons_row"
               >
                 <button
                   data-test-id="dialog-cancel-button"
@@ -831,6 +842,7 @@ Array [
                 >
                   Export
                 </button>
+              </span>
             </div>
           </DialogButtons>
         </div>
@@ -1085,6 +1097,9 @@ Array [
             </div>
             <div
               class="mx_Dialog_buttons"
+            >
+              <span
+                class="mx_Dialog_buttons_row"
               >
                 <button
                   data-test-id="dialog-cancel-button"
@@ -1099,6 +1114,7 @@ Array [
                 >
                   Export
                 </button>
+              </span>
             </div>
           </div>
         }
@@ -1306,6 +1322,9 @@ Array [
               </div>
               <div
                 class="mx_Dialog_buttons"
+              >
+                <span
+                  class="mx_Dialog_buttons_row"
                 >
                   <button
                     data-test-id="dialog-cancel-button"
@@ -1320,6 +1339,7 @@ Array [
                   >
                     Export
                   </button>
+                </span>
               </div>
             </div>
           }
@@ -1655,6 +1675,9 @@ Array [
         >
           <div
             className="mx_Dialog_buttons"
+          >
+            <span
+              className="mx_Dialog_buttons_row"
             >
               <button
                 data-test-id="dialog-cancel-button"
@@ -1672,6 +1695,7 @@ Array [
               >
                 Export
               </button>
+            </span>
           </div>
         </DialogButtons>
       </div>
@@ -1913,6 +1937,9 @@ Array [
           </div>
           <div
             class="mx_Dialog_buttons"
+          >
+            <span
+              class="mx_Dialog_buttons_row"
             >
               <button
                 data-test-id="dialog-cancel-button"
@@ -1927,6 +1954,7 @@ Array [
               >
                 Export
               </button>
+            </span>
           </div>
         </div>
       }
@@ -2134,6 +2162,9 @@ Array [
             </div>
             <div
               class="mx_Dialog_buttons"
+            >
+              <span
+                class="mx_Dialog_buttons_row"
               >
                 <button
                   data-test-id="dialog-cancel-button"
@@ -2148,6 +2179,7 @@ Array [
                 >
                   Export
                 </button>
+              </span>
             </div>
           </div>
         }
@@ -2483,6 +2515,9 @@ Array [
       >
         <div
           className="mx_Dialog_buttons"
+        >
+          <span
+            className="mx_Dialog_buttons_row"
           >
             <button
               data-test-id="dialog-cancel-button"
@@ -2500,6 +2535,7 @@ Array [
             >
               Export
             </button>
+          </span>
         </div>
       </DialogButtons>
     </div>
@@ -2832,6 +2868,9 @@ Array [
     >
       <div
         className="mx_Dialog_buttons"
+      >
+        <span
+          className="mx_Dialog_buttons_row"
         >
           <button
             data-test-id="dialog-cancel-button"
@@ -2849,6 +2888,7 @@ Array [
           >
             Export
           </button>
+        </span>
       </div>
     </DialogButtons>
   </div>,