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>

src/components/views/elements/DialogButtons.tsx

@@ -100,17 +100,19 @@ export default class DialogButtons extends React.Component<IProps> {
         return (
             <div className="mx_Dialog_buttons">
                 { additive }
-                { cancelButton }
-                { this.props.children }
-                <button type={this.props.primaryIsSubmit ? 'submit' : 'button'}
-                    data-test-id="dialog-primary-button"
-                    className={primaryButtonClassName}
-                    onClick={this.props.onPrimaryButtonClick}
-                    autoFocus={this.props.focus}
-                    disabled={this.props.disabled || this.props.primaryDisabled}
-                >
-                    { this.props.primaryButton }
-                </button>
+                <span className="mx_Dialog_buttons_row">
+                    { cancelButton }
+                    { this.props.children }
+                    <button type={this.props.primaryIsSubmit ? 'submit' : 'button'}
+                        data-test-id="dialog-primary-button"
+                        className={primaryButtonClassName}
+                        onClick={this.props.onPrimaryButtonClick}
+                        autoFocus={this.props.focus}
+                        disabled={this.props.disabled || this.props.primaryDisabled}
+                    >
+                        { this.props.primaryButton }
+                    </button>
+                </span>
             </div>
         );
     }