Improve integration manager dialog style (#8888)

matrix-org · Jun 25, 2022 · e49aac7 · e49aac7
1 parent 4b2a922
commit e49aac7
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 29 deletions.
diff --git a/res/css/views/settings/_IntegrationManager.scss b/res/css/views/settings/_IntegrationManager.scss
@@ -14,31 +14,33 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_IntegrationManager .mx_Dialog {
-    width: 60%;
-    height: 70%;
-    overflow: hidden;
-    padding: 0px;
-    max-width: initial;
-    max-height: initial;
-}
-
-.mx_IntegrationManager iframe {
-    background-color: #fff;
-    border: 0px;
-    width: 100%;
-    height: 100%;
-}
-
-.mx_IntegrationManager_loading h3 {
-    text-align: center;
-}
-
-.mx_IntegrationManager_error {
-    text-align: center;
-    padding-top: 20px;
-}
-
-.mx_IntegrationManager_error h3 {
-    color: $alert;
+.mx_IntegrationManager {
+    .mx_Dialog {
+        box-sizing: border-box;
+        width: 60%;
+        height: 70%;
+        overflow: hidden;
+        max-width: initial;
+        max-height: initial;
+    }
+
+    iframe {
+        background-color: #fff;
+        border: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    h3 {
+        margin-block: $spacing-20;
+    }
+
+    .mx_IntegrationManager_loading,
+    .mx_IntegrationManager_error {
+        text-align: center;
+    }
+
+    .mx_IntegrationManager_error h3 {
+        color: $alert;
+    }
 }
diff --git a/src/components/views/settings/IntegrationManager.tsx b/src/components/views/settings/IntegrationManager.tsx
@@ -22,6 +22,7 @@ import { ActionPayload } from '../../../dispatcher/payloads';
 import Spinner from "../elements/Spinner";
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
+import Heading from '../typography/Heading';
 
 interface IProps {
     // false to display an error saying that we couldn't connect to the integration manager
@@ -88,7 +89,7 @@ export default class IntegrationManager extends React.Component<IProps, IState>
         if (this.props.loading) {
             return (
                 <div className='mx_IntegrationManager_loading'>
-                    <h3>{ _t("Connecting to integration manager...") }</h3>
+                    <Heading size="h3">{ _t("Connecting to integration manager...") }</Heading>
                     <Spinner />
                 </div>
             );
@@ -97,7 +98,7 @@ export default class IntegrationManager extends React.Component<IProps, IState>
         if (!this.props.connected || this.state.errored) {
             return (
                 <div className='mx_IntegrationManager_error'>
-                    <h3>{ _t("Cannot connect to integration manager") }</h3>
+                    <Heading size="h3">{ _t("Cannot connect to integration manager") }</Heading>
                     <p>{ _t("The integration manager is offline or it cannot reach your homeserver.") }</p>
                 </div>
             );