Merge pull request #2763 from jryans/dark-theme-auth-r2

Tweak auth components when dark theme is default

res/css/views/auth/_AuthBody.scss

@@ -22,44 +22,71 @@ limitations under the License.
     box-sizing: border-box;
     font-size: 12px;
     color: $authpage-secondary-color;
-}
 
-.mx_AuthBody h2 {
+    h2 {
         font-size: 24px;
         font-weight: 600;
         margin-top: 8px;
         color: $authpage-primary-color;
-}
+    }
 
-.mx_AuthBody h3 {
+    h3 {
         font-size: 14px;
         font-weight: 600;
         color: $authpage-primary-color;
-}
+    }
 
-.mx_AuthBody input[type=text],
+    a:link,
-.mx_AuthBody input[type=password] {
+    a:hover,
+    a:visited {
+        color: $accent-color;
+        text-decoration: none;
+    }
+
+    input[type=text],
+    input[type=password] {
         color: $authpage-primary-color;
-}
+    }
 
-.mx_AuthBody .mx_Field input,
+    .mx_Field input,
-.mx_AuthBody .mx_Field select {
+    .mx_Field select {
         color: $authpage-primary-color;
         background-color: $authpage-body-bg-color;
-}
+    }
 
-.mx_AuthBody .mx_Field label {
+    .mx_Field label {
         color: $authpage-primary-color;
-}
+    }
 
-.mx_AuthBody .mx_Field input:focus + label,
+    .mx_Field input:focus + label,
-.mx_AuthBody .mx_Field input:not(:placeholder-shown) + label,
+    .mx_Field input:not(:placeholder-shown) + label,
-.mx_AuthBody .mx_Field select + label /* Always show a select's label on top to not collide with the value */ {
+    .mx_Field textarea:focus + label,
+    .mx_Field textarea:not(:placeholder-shown) + label,
+    .mx_Field select + label /* Always show a select's label on top to not collide with the value */,
+    .mx_Field_labelAlwaysTopLeft label {
         background-color: $authpage-body-bg-color;
-}
+    }
 
-.mx_AuthBody input.error {
+    input.error {
         color: $warning-color;
+    }
+
+    .mx_Field input {
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    .mx_Dropdown_arrow {
+        background: $authpage-primary-color;
+    }
+
+    .mx_Dropdown_menu {
+        background-color: $authpage-body-bg-color;
+
+        .mx_Dropdown_option_highlight {
+            background-color: $authpage-focus-bg-color;
+        }
+    }
 }
 
 .mx_AuthBody_editServerDetails {
@@ -68,11 +95,6 @@ limitations under the License.
     font-weight: normal;
 }
 
-.mx_AuthBody .mx_Field input {
-    width: 100%;
-    box-sizing: border-box;
-}
-
 .mx_AuthBody_fieldRow {
     display: flex;
     margin-bottom: 10px;
@@ -91,13 +113,6 @@ limitations under the License.
     margin-right: 0;
 }
 
-.mx_AuthBody a:link,
-.mx_AuthBody a:hover,
-.mx_AuthBody a:visited {
-    color: $accent-color;
-    text-decoration: none;
-}
-
 .mx_AuthBody_changeFlow {
     display: block;
     text-align: center;

res/themes/light/css/_light.scss

@@ -246,6 +246,7 @@ $memberstatus-placeholder-color: $roomtile-name-color;
 $authpage-bg-color: #2e3649;
 $authpage-modal-bg-color: rgba(255, 255, 255, 0.59);
 $authpage-body-bg-color: #ffffff;
+$authpage-focus-bg-color: #dddddd;
 $authpage-lang-color: #4e5054;
 $authpage-primary-color: #232f32;
 $authpage-secondary-color: #61708b;