Merge pull request #3692 from vector-im/luke/login-ui

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

scripts/copy-res.js

@@ -10,6 +10,7 @@ const COPY_LIST = [
     ["res/{media,vector-icons}/**", "webapp"],
     ["src/skins/vector/{fonts,img}/**", "webapp"],
     ["node_modules/emojione/assets/svg/*", "webapp/emojione/svg/"],
+    ["node_modules/emojione/assets/png/*", "webapp/emojione/png/"],
     ["./config.json", "webapp", {directwatch: 1}],
 ];
 

src/components/views/login/VectorLoginHeader.js

@@ -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: {
@@ -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>
         );
     }

src/skins/vector/css/_common.scss

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

src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss

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

src/skins/vector/css/matrix-react-sdk/views/elements/_Dropdown.scss

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