From 45cd77d82b8e9d2abbae4e2fab5966d5d3ae6f69 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 24 Jun 2022 19:39:40 +0900 Subject: [PATCH 1/6] Include in mx_IntegrationManager Signed-off-by: Suguru Hirahara --- res/css/views/settings/_IntegrationManager.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/res/css/views/settings/_IntegrationManager.scss b/res/css/views/settings/_IntegrationManager.scss index 043e7201caf..cf11b272a0e 100644 --- a/res/css/views/settings/_IntegrationManager.scss +++ b/res/css/views/settings/_IntegrationManager.scss @@ -14,7 +14,8 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_IntegrationManager .mx_Dialog { +.mx_IntegrationManager { +.mx_Dialog { width: 60%; height: 70%; overflow: hidden; @@ -23,7 +24,7 @@ limitations under the License. max-height: initial; } -.mx_IntegrationManager iframe { +iframe { background-color: #fff; border: 0px; width: 100%; @@ -42,3 +43,4 @@ limitations under the License. .mx_IntegrationManager_error h3 { color: $alert; } +} From 42b740ceafafadb8478995be49b27474133811e0 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 24 Jun 2022 19:39:59 +0900 Subject: [PATCH 2/6] yarn run lint:style --fix Signed-off-by: Suguru Hirahara --- .../views/settings/_IntegrationManager.scss | 56 +++++++++---------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/res/css/views/settings/_IntegrationManager.scss b/res/css/views/settings/_IntegrationManager.scss index cf11b272a0e..8c217b96b05 100644 --- a/res/css/views/settings/_IntegrationManager.scss +++ b/res/css/views/settings/_IntegrationManager.scss @@ -15,32 +15,32 @@ limitations under the License. */ .mx_IntegrationManager { -.mx_Dialog { - width: 60%; - height: 70%; - overflow: hidden; - padding: 0px; - max-width: initial; - max-height: initial; -} - -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_Dialog { + width: 60%; + height: 70%; + overflow: hidden; + padding: 0px; + max-width: initial; + max-height: initial; + } + + 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; + } } From 30463c39e555532a08fa228fedad6694b00f637c Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 24 Jun 2022 19:44:08 +0900 Subject: [PATCH 3/6] Apply text-align to both loading and error div Signed-off-by: Suguru Hirahara --- res/css/views/settings/_IntegrationManager.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/settings/_IntegrationManager.scss b/res/css/views/settings/_IntegrationManager.scss index 8c217b96b05..cc2f9f11a93 100644 --- a/res/css/views/settings/_IntegrationManager.scss +++ b/res/css/views/settings/_IntegrationManager.scss @@ -31,12 +31,12 @@ limitations under the License. height: 100%; } - .mx_IntegrationManager_loading h3 { + .mx_IntegrationManager_loading, + .mx_IntegrationManager_error { text-align: center; } .mx_IntegrationManager_error { - text-align: center; padding-top: 20px; } From 0abb1c2b9a594671ad4c91957078844363d138fb Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 24 Jun 2022 19:45:05 +0900 Subject: [PATCH 4/6] Nesting etc. Signed-off-by: Suguru Hirahara --- res/css/views/settings/_IntegrationManager.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/res/css/views/settings/_IntegrationManager.scss b/res/css/views/settings/_IntegrationManager.scss index cc2f9f11a93..401f30e87e5 100644 --- a/res/css/views/settings/_IntegrationManager.scss +++ b/res/css/views/settings/_IntegrationManager.scss @@ -19,14 +19,14 @@ limitations under the License. width: 60%; height: 70%; overflow: hidden; - padding: 0px; + padding: 0; max-width: initial; max-height: initial; } iframe { background-color: #fff; - border: 0px; + border: 0; width: 100%; height: 100%; } @@ -37,10 +37,10 @@ limitations under the License. } .mx_IntegrationManager_error { - padding-top: 20px; - } + padding-top: $spacing-20; - .mx_IntegrationManager_error h3 { - color: $alert; + h3 { + color: $alert; + } } } From c504376da548577e00eb898b940edd80b6f5af88 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 24 Jun 2022 19:47:29 +0900 Subject: [PATCH 5/6] Enable padding, keeping the dialog size with the box-sizing declaration Signed-off-by: Suguru Hirahara --- res/css/views/settings/_IntegrationManager.scss | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/res/css/views/settings/_IntegrationManager.scss b/res/css/views/settings/_IntegrationManager.scss index 401f30e87e5..78e7353327f 100644 --- a/res/css/views/settings/_IntegrationManager.scss +++ b/res/css/views/settings/_IntegrationManager.scss @@ -16,10 +16,10 @@ limitations under the License. .mx_IntegrationManager { .mx_Dialog { + box-sizing: border-box; width: 60%; height: 70%; overflow: hidden; - padding: 0; max-width: initial; max-height: initial; } @@ -36,11 +36,7 @@ limitations under the License. text-align: center; } - .mx_IntegrationManager_error { - padding-top: $spacing-20; - - h3 { - color: $alert; - } + .mx_IntegrationManager_error h3 { + color: $alert; } } From c9be1d7a1e7dc47346dc0118c762ff09cf2c840e Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 24 Jun 2022 21:31:55 +0900 Subject: [PATCH 6/6] Use Heading component Signed-off-by: Suguru Hirahara --- res/css/views/settings/_IntegrationManager.scss | 4 ++++ src/components/views/settings/IntegrationManager.tsx | 5 +++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/res/css/views/settings/_IntegrationManager.scss b/res/css/views/settings/_IntegrationManager.scss index 78e7353327f..f91d3fdd6c9 100644 --- a/res/css/views/settings/_IntegrationManager.scss +++ b/res/css/views/settings/_IntegrationManager.scss @@ -31,6 +31,10 @@ limitations under the License. height: 100%; } + h3 { + margin-block: $spacing-20; + } + .mx_IntegrationManager_loading, .mx_IntegrationManager_error { text-align: center; diff --git a/src/components/views/settings/IntegrationManager.tsx b/src/components/views/settings/IntegrationManager.tsx index d9a45860dca..fa889edbc0c 100644 --- 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 if (this.props.loading) { return (
-

{ _t("Connecting to integration manager...") }

+ { _t("Connecting to integration manager...") }
); @@ -97,7 +98,7 @@ export default class IntegrationManager extends React.Component if (!this.props.connected || this.state.errored) { return (
-

{ _t("Cannot connect to integration manager") }

+ { _t("Cannot connect to integration manager") }

{ _t("The integration manager is offline or it cannot reach your homeserver.") }

);