Improve integration manager dialog style (#8888)

This commit is contained in:
Suguru Hirahara 2022-06-25 11:54:07 +00:00 committed by GitHub
parent 4b2a922e2e
commit e49aac7b3f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 25 deletions

View file

@ -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 {
.mx_Dialog {
box-sizing: border-box;
width: 60%;
height: 70%;
overflow: hidden;
max-width: initial;
max-height: initial;
}
.mx_IntegrationManager iframe {
background-color: #fff;
border: 0px;
width: 100%;
height: 100%;
}
iframe {
background-color: #fff;
border: 0;
width: 100%;
height: 100%;
}
.mx_IntegrationManager_loading h3 {
text-align: center;
}
h3 {
margin-block: $spacing-20;
}
.mx_IntegrationManager_error {
text-align: center;
padding-top: 20px;
}
.mx_IntegrationManager_loading,
.mx_IntegrationManager_error {
text-align: center;
}
.mx_IntegrationManager_error h3 {
color: $alert;
.mx_IntegrationManager_error h3 {
color: $alert;
}
}

View file

@ -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>
);