Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cosmetics to go with matrix-org/matrix-react-sdk#811 #3692

Merged
merged 3 commits into from Apr 21, 2017
Merged

Cosmetics to go with matrix-org/matrix-react-sdk#811 #3692

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1e139ef
Cosmetics to go with matrix-org/matrix-react-sdk#811
Apr 21, 2017
a2b465e
Remove old logo
Apr 21, 2017
f010afe
Add emojione PNGs to the COPY_LIST
Apr 21, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/components/views/login/VectorLoginHeader.js
View file
Open in desktop
Expand Up @@ -18,6 +18,9 @@ limitations under the License.

var React = require('react');

const i = [1, 2, 3, 4, 5][Math.floor(Math.random() * 5)];
const DEFAULT_LOGO_URI = "img/logos/riot-logo-" + i + ".svg";

module.exports = React.createClass({
displayName: 'VectorLoginHeader',
statics: {
Expand All @@ -30,7 +33,7 @@ module.exports = React.createClass({
render: function() {
return (
<div className="mx_Login_logo">
<img src={this.props.icon || "img/logo.png"} alt="Riot"/>
<img src={this.props.icon || DEFAULT_LOGO_URI} alt="Riot"/>
</div>
);
}
Expand Down
2 changes: 1 addition & 1 deletion src/skins/vector/css/_common.scss
View file
Open in desktop
Expand Up @@ -65,7 +65,7 @@ input[type=text].error, input[type=password].error {
border: 1px solid $warning-color;
}

input[type=text]:focus, textarea:focus {
input[type=text]:focus, input[type=password]:focus, textarea:focus {
border: 1px solid $accent-color;
outline: none;
box-shadow: none;
Expand Down
78 changes: 74 additions & 4 deletions src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
View file
Open in desktop
Expand Up @@ -66,10 +66,6 @@ limitations under the License.
margin-bottom: 14px;
}

.mx_Login_username {
margin-bottom: 0px;
}

.mx_Login_fieldLabel {
margin-top: -10px;
margin-left: 8px;
Expand Down Expand Up @@ -167,6 +163,66 @@ limitations under the License.
margin-bottom: 12px;
}

.mx_Login_type_container {
display: flex;
margin-bottom: 14px;
}

.mx_Login_type_label {
flex-grow: 1;
line-height: 35px;
}

.mx_Login_type_dropdown {
width: 125px;
align-self: flex-end;
}

.mx_Login_username_group {
display: flex;
}

.mx_Login_username_prefix {
height: 33px;
padding: 0px 5px;
line-height: 33px;

background-color: #eee;
border: 1px solid #c7c7c7;
border-right: 0px;
border-radius: 3px 0px 0px 3px;

text-align: center;
}

.mx_Login_username_suffix {
height: 33px;
padding: 0px 5px;
line-height: 33px;

background-color: #eee;
border: 1px solid #c7c7c7;
border-left: 0px;
border-radius: 0px 3px 3px 0px;

text-align: center;
flex-grow: 1;
}

.mx_Login_username {
flex-shrink: 1;
min-width: 0px;
border-radius: 3px;
/* The "@" is always prefixed, so no rounded corners */
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}

.mx_Login_field_has_suffix {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}

.mx_Login_phoneSection {
display: table;
}
Expand All @@ -176,6 +232,20 @@ limitations under the License.
width: 70px;
}

.mx_Login_phoneCountry .mx_Dropdown_option {
/*
To match height of mx_Login_field
33px + 2px border from mx_Dropdown_option = 35px
*/
height: 33px;
line-height: 33px;
}

.mx_Login_phoneCountry .mx_Dropdown_option img {
margin: 4px;
vertical-align: top;
}

.mx_Login_phoneNumberField {
width: 210px;
margin-left: 3px;
Expand Down
6 changes: 5 additions & 1 deletion src/skins/vector/css/matrix-react-sdk/views/elements/_Dropdown.scss
View file
Open in desktop
Expand Up @@ -27,6 +27,10 @@ limitations under the License.
user-select: none;
}

.mx_Dropdown_input:focus {
border-color: $accent-color;
}

.mx_Dropdown_arrow {
border-color: $primary-fg-color transparent transparent;
border-style: solid;
Expand Down Expand Up @@ -74,7 +78,7 @@ input.mx_Dropdown_option, input.mx_Dropdown_option:focus {
border: 1px solid $accent-color;
background-color: $primary-bg-color;
max-height: 200px;
overflow-y: scroll;
overflow-y: auto;
}

.mx_Dropdown_menu .mx_Dropdown_option_highlight {
Expand Down