imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve style of toasts to match Figma

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-05-21 16:32:19 +01:00
parent e7d37228f2
commit 7e7c48e046
2 changed files with 40 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

46
res/css/structures/_ToastContainer.scss
View file

@ -28,8 +28,8 @@ limitations under the License.
margin: 0 4px; margin: 0 4px;
grid-row: 2 / 4; grid-row: 2 / 4;
grid-column: 1; grid-column: 1;
background-color: white; background-color: $dark-panel-bg-color;
box-shadow: 0px 4px 12px $menu-box-shadow-color; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
border-radius: 8px; border-radius: 8px;
} }
@ -37,8 +37,8 @@ limitations under the License.
grid-row: 1 / 3; grid-row: 1 / 3;
grid-column: 1; grid-column: 1;
color: $primary-fg-color; color: $primary-fg-color;
background-color: $primary-bg-color; background-color: $dark-panel-bg-color;
box-shadow: 0px 4px 12px $menu-box-shadow-color; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
display: grid; display: grid;
@ -73,12 +73,23 @@ limitations under the License.
} }
} }
h2 { .mx_Toast_title {
grid-column: 1 / 3; h2 {
grid-row: 1; grid-column: 1 / 3;
margin: 0; grid-row: 1;
font-size: $font-15px; margin: 0;
font-weight: 600; font-size: $font-15px;
font-weight: 600;
display: inline;
width: auto;
}
span {
float: right;
font-size: $font-12px;
line-height: $font-21px;
color: $muted-fg-color;
}
} }
.mx_Toast_body { .mx_Toast_body {
@ -87,7 +98,13 @@ limitations under the License.
} }
.mx_Toast_buttons { .mx_Toast_buttons {
float: right;
display: flex; display: flex;
.mx_FormButton {
min-width: 96px;
box-sizing: border-box;
}
} }
.mx_Toast_description { .mx_Toast_description {
@ -96,6 +113,15 @@ limitations under the License.
text-overflow: ellipsis; text-overflow: ellipsis;
margin: 4px 0 11px 0; margin: 4px 0 11px 0;
font-size: $font-12px; font-size: $font-12px;
.mx_AccessibleButton_kind_link {
font-size: inherit;
padding: 0;
}
a {
text-decoration: none;
}
} }
.mx_Toast_deviceID { .mx_Toast_deviceID {

5
src/components/structures/ToastContainer.js
View file

@ -57,7 +57,10 @@ export default class ToastContainer extends React.Component {
toastKey: key, toastKey: key,
}); });
toast = (<div className={toastClasses}> toast = (<div className={toastClasses}>
<h2>{title}{countIndicator}</h2> <div className="mx_Toast_title">
<h2>{title}</h2>
<span>{countIndicator}</span>
</div>
<div className="mx_Toast_body">{React.createElement(component, toastProps)}</div> <div className="mx_Toast_body">{React.createElement(component, toastProps)}</div>
</div>); </div>);
} }