Social login UI polish (#9301)

1 files changed, 47 insertions, 6 deletions

diff --git a/synapse/res/templates/sso.css b/synapse/res/templates/sso.css
index 46b309ea4e..338214f5d0 100644
--- a/synapse/res/templates/sso.css
+++ b/synapse/res/templates/sso.css
@@ -1,16 +1,26 @@
-body {
+body, input, select, textarea {
   font-family: "Inter", "Helvetica", "Arial", sans-serif;
   font-size: 14px;
   color: #17191C;
 }
 
-header {
+header, footer {
   max-width: 480px;
   width: 100%;
   margin: 24px auto;
   text-align: center;
 }
 
+@media screen and (min-width: 800px) {
+  header {
+    margin-top: 90px;
+  }
+}
+
+header {
+  min-height: 60px;
+}
+
 header p {
   color: #737D8C;
   line-height: 24px;
@@ -20,6 +30,10 @@ h1 {
   font-size: 24px;
 }
 
+a {
+  color: #418DED;
+}
+
 .error_page h1 {
   color: #FE2928;
 }
@@ -47,6 +61,9 @@ main {
 
 .primary-button {
   border: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
   text-decoration: none;
   padding: 12px;
   color: white;
@@ -63,8 +80,17 @@ main {
 
 .profile {
   display: flex;
+  flex-direction: column;
+  align-items: center;
   justify-content: center;
-  margin: 24px 0;
+  margin: 24px;
+  padding: 13px;
+  border: 1px solid #E9ECF1;
+  border-radius: 4px;
+}
+
+.profile.with-avatar {
+  margin-top: 42px; /* (36px / 2) + 24px*/
 }
 
 .profile .avatar {
@@ -72,17 +98,32 @@ main {
   height: 36px;
   border-radius: 100%;
   display: block;
-  margin-right: 8px;
+  margin-top: -32px;
+  margin-bottom: 8px;
 }
 
 .profile .display-name {
   font-weight: bold;
   margin-bottom: 4px;
+  font-size: 15px;
+  line-height: 18px;
 }
 .profile .user-id {
   color: #737D8C;
+  font-size: 12px;
+  line-height: 12px;
 }
 
-.profile .display-name, .profile .user-id {
-  line-height: 18px;
+footer {
+  margin-top: 80px;
 }
+
+footer svg {
+  display: block;
+  width: 46px;
+  margin: 0px auto 12px auto;
+}
+
+footer p {
+  color: #737D8C;
+}
\ No newline at end of file