Fix button border color of LeaveSpaceDialog (#8010)

Author: luixxiul

res/css/views/dialogs/_LeaveSpaceDialog.scss

@@ -19,58 +19,49 @@ limitations under the License.
         display: flex;
         flex-direction: column;
         padding: 24px 32px;
-    }
-}
 
-.mx_LeaveSpaceDialog {
-    width: 440px;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    height: 520px;
+        .mx_LeaveSpaceDialog {
+            width: 440px;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            height: 520px;
 
-    .mx_Dialog_content {
-        flex-grow: 1;
-        margin: 0;
-        overflow-y: auto;
+            .mx_Dialog_content {
+                flex-grow: 1;
+                margin: 0;
+                overflow-y: auto;
 
-        .mx_LeaveSpaceDialog_section_warning {
-            position: relative;
-            border-radius: 8px;
-            margin: 12px 0 0;
-            padding: 12px 8px 12px 42px;
-            background-color: $header-panel-bg-color;
+                .mx_LeaveSpaceDialog_section_warning {
+                    position: relative;
+                    border-radius: 8px;
+                    margin: 12px 0 0;
+                    padding: 12px 8px 12px 42px;
+                    background-color: $header-panel-bg-color;
 
-            font-size: $font-12px;
-            line-height: $font-15px;
-            color: $secondary-content;
+                    font-size: $font-12px;
+                    line-height: $font-15px;
+                    color: $secondary-content;
 
-            &::before {
-                content: '';
-                position: absolute;
-                left: 10px;
-                top: calc(50% - 8px); // vertical centering
-                height: 16px;
-                width: 16px;
-                background-color: $secondary-content;
-                mask-repeat: no-repeat;
-                mask-size: contain;
-                mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
-                mask-position: center;
-            }
-        }
+                    &::before {
+                        content: '';
+                        position: absolute;
+                        left: 10px;
+                        top: calc(50% - 8px); // vertical centering
+                        height: 16px;
+                        width: 16px;
+                        background-color: $secondary-content;
+                        mask-repeat: no-repeat;
+                        mask-size: contain;
+                        mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
+                        mask-position: center;
+                    }
+                }
 
-        > p {
-            color: $primary-content;
-        }
-    }
-
-    .mx_Dialog_buttons {
-        margin-top: 20px;
-
-        .mx_Dialog_primary {
-            background-color: $alert !important; // override default colour
-            border-color: $alert;
+                > p {
+                    color: $primary-content;
+                }
+            }
         }
     }
 }

src/components/views/dialogs/LeaveSpaceDialog.tsx

@@ -105,6 +105,7 @@ const LeaveSpaceDialog: React.FC<IProps> = ({ space, onFinished }) => {
         </div>
         <DialogButtons
             primaryButton={_t("Leave space")}
+            primaryButtonClass="danger"
             onPrimaryButtonClick={() => onFinished(true, roomsToLeave)}
             hasCancel={true}
             onCancel={() => onFinished(false)}