Skip to content

Commit b05e5be

Browse files
t3chguyt3chguy
committed
Improve ErrorView to match design
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
1 parent ac78570 commit b05e5be

4 files changed

Lines changed: 611 additions & 355 deletions

File tree

‎res/css/structures/ErrorView.scss‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
/*
2+
Copyright 2020 New Vector Ltd
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_ErrorView {
18+
background: #c5e0f7;
19+
background: -moz-linear-gradient(top, #c5e0f7 0%, #ffffff 100%);
20+
background: -webkit-linear-gradient(top, #c5e0f7 0%, #ffffff 100%);
21+
background: linear-gradient(to bottom, #c5e0f7 0%, #ffffff 100%);
22+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5e0f7', endColorstr='#ffffff',GradientType=0 );
23+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
24+
width: 100%;
25+
height: 100%;
26+
color: #000;
27+
28+
.mx_ErrorView_container {
29+
max-width: 680px;
30+
margin: auto;
31+
}
32+
33+
.mx_Button {
34+
border: 0;
35+
border-radius: 4px;
36+
font-size: 18px;
37+
margin-left: 4px;
38+
margin-right: 4px;
39+
min-width: 80px;
40+
background-color: #03B381;
41+
color: #fff;
42+
cursor: pointer;
43+
padding: 12px 22px;
44+
word-break: break-word;
45+
text-decoration: none;
46+
}
47+
48+
.mx_Center {
49+
justify-content: center;
50+
}
51+
52+
.mx_HomePage_header {
53+
color: #2E2F32;
54+
display: flex;
55+
align-items: center;
56+
justify-content: center;
57+
}
58+
59+
font-size: 1.067rem; // 16px
60+
h1 {
61+
font-size: 2.133rem; // 32px
62+
}
63+
h2 {
64+
font-size: 1.600rem; // 24px
65+
color: #000;
66+
}
67+
68+
.mx_HomePage_col {
69+
display: flex;
70+
flex-direction: row;
71+
}
72+
73+
.mx_HomePage_row {
74+
flex: 1 1 0;
75+
display: flex;
76+
flex-direction: row;
77+
flex-wrap: wrap;
78+
}
79+
80+
.mx_HomePage_logo {
81+
margin: auto 20px auto 0;
82+
}
83+
84+
h1, h2 {
85+
font-weight: 600;
86+
margin-bottom: 32px;
87+
}
88+
89+
.mx_Spacer {
90+
margin-top: 24px;
91+
}
92+
93+
.mx_FooterLink {
94+
color: #368BD6;
95+
text-decoration: none;
96+
}
97+
}

‎src/components/structures/ErrorView.tsx‎

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,21 +17,41 @@ limitations under the License.
1717
import * as React from "react";
1818
import * as PropTypes from "prop-types";
1919

20-
import { _t } from "matrix-react-sdk/src/languageHandler";
20+
// directly import the style here as this layer does not support rethemedex at this time so no matrix-react-sdk
21+
// scss variables will be accessible.
22+
import "../../../res/css/structures/ErrorView.scss";
2123

2224
interface IProps {
25+
// both of these should already be internationalised
2326
title: string;
2427
messages?: string[];
2528
}
2629

2730
const ErrorView: React.FC<IProps> = ({title, messages}) => {
28-
return <div className="mx_GenericErrorPage">
29-
<div className="mx_GenericErrorPage_box">
30-
<h1>{title}</h1>
31-
<div>
32-
{messages && messages.map(msg => <p key={msg}>
33-
{ _t(msg) }
34-
</p>)}
31+
return <div className="mx_ErrorView">
32+
<div className="mx_ErrorView_container">
33+
<div className="mx_HomePage_header">
34+
<span className="mx_HomePage_logo">
35+
<img height="42" src={"themes/riot/img/logos/riot-logo.svg"} alt="Riot" />
36+
</span>
37+
<h1>Failed to start</h1>
38+
</div>
39+
<div className="mx_HomePage_col">
40+
<div className="mx_HomePage_row">
41+
<div>
42+
<h2 id="step1_heading">{ title }</h2>
43+
{messages && messages.map(msg => <p key={msg}>
44+
{ msg }
45+
</p>)}
46+
</div>
47+
</div>
48+
</div>
49+
<div className="mx_HomePage_row mx_Center mx_Spacer">
50+
<p className="mx_Spacer">
51+
<a href="https://riot.im" target="_blank" className="mx_FooterLink">
52+
Go to Riot.im
53+
</a>
54+
</p>
3555
</div>
3656
</div>
3757
</div>;

0 commit comments

Comments
 (0)