OAuth form: revamp account header styles

2 files changed, 64 insertions, 47 deletions

diff --git a/lib/pleroma/web/templates/o_auth/o_auth/show.html.eex b/lib/pleroma/web/templates/o_auth/o_auth/show.html.eex
index d7efbf184..68b095c87 100644
--- a/lib/pleroma/web/templates/o_auth/o_auth/show.html.eex
+++ b/lib/pleroma/web/templates/o_auth/o_auth/show.html.eex
@@ -9,46 +9,47 @@
 
 <%= if @user do %>
   <div class="account-header">
-    <div class="avatar">
-      <img src="<%= Pleroma.User.avatar_url(@user) %>">
-    </div>
-    <div class="name">
-      Signed in as:
-      <div class="username">@<%= @user.nickname %></div>
+    <div class="account-header__banner" style="background-image: url('<%= Pleroma.User.banner_url(@user) %>')"></div>
+    <div class="account-header__avatar" style="background-image: url('<%= Pleroma.User.avatar_url(@user) %>')"></div>
+    <div class="account-header__meta">
+      <div class="account-header__display-name"><%= @user.name %></div>
+      <div class="account-header__nickname">@<%= @user.nickname %>@<%= Pleroma.User.get_domain(@user) %></div>
     </div>
   </div>
 <% end %>
 
-<%= if @app do %>
-  <p>Application <strong><%= @app.client_name %></strong> is requesting access to your account.</p>
-  <%= render @view_module, "_scopes.html", Map.merge(assigns, %{form: f}) %>
-<% end %>
+<div class="container__content">
+  <%= if @app do %>
+    <p>Application <strong><%= @app.client_name %></strong> is requesting access to your account.</p>
+    <%= render @view_module, "_scopes.html", Map.merge(assigns, %{form: f}) %>
+  <% end %>
 
-<%= if @user do %>
-  <%= submit "Authorize" %>
-<% else %>
-  <%= if @params["registration"] in ["true", true] do %>
-    <h3>This is the first time you visit! Please enter your Pleroma handle.</h3>
-    <p>Choose carefully! You won't be able to change this later. You will be able to change your display name, though.</p>
-    <div class="input">
-      <%= label f, :nickname, "Pleroma Handle" %>
-      <%= text_input f, :nickname, placeholder: "lain" %>
-    </div>
-    <%= hidden_input f, :name, value: @params["name"] %>
-    <%= hidden_input f, :password, value: @params["password"] %>
-    <br>
+  <%= if @user do %>
+    <%= submit "Authorize" %>
   <% else %>
-    <div class="input">
-      <%= label f, :name, "Username" %>
-      <%= text_input f, :name %>
-    </div>
-    <div class="input">
-      <%= label f, :password, "Password" %>
-      <%= password_input f, :password %>
-    </div>
-    <%= submit "Log In" %>
+    <%= if @params["registration"] in ["true", true] do %>
+      <h3>This is the first time you visit! Please enter your Pleroma handle.</h3>
+      <p>Choose carefully! You won't be able to change this later. You will be able to change your display name, though.</p>
+      <div class="input">
+        <%= label f, :nickname, "Pleroma Handle" %>
+        <%= text_input f, :nickname, placeholder: "lain" %>
+      </div>
+      <%= hidden_input f, :name, value: @params["name"] %>
+      <%= hidden_input f, :password, value: @params["password"] %>
+      <br>
+    <% else %>
+      <div class="input">
+        <%= label f, :name, "Username" %>
+        <%= text_input f, :name %>
+      </div>
+      <div class="input">
+        <%= label f, :password, "Password" %>
+        <%= password_input f, :password %>
+      </div>
+      <%= submit "Log In" %>
+    <% end %>
   <% end %>
-<% end %>
+</div>
 
 <%= hidden_input f, :client_id, value: @client_id %>
 <%= hidden_input f, :response_type, value: @response_type %>
diff --git a/priv/static/instance/static.css b/priv/static/instance/static.css
index ccc48c294..1531a759c 100644
--- a/priv/static/instance/static.css
+++ b/priv/static/instance/static.css
@@ -46,14 +46,18 @@ body {
 
 .container {
   max-width: 400px;
-  padding: 20px;
   background-color: var(--foreground-color);
   border-radius: 4px;
+  overflow: hidden;
   margin: auto;
   margin-top: 35px;
   box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.5);
 }
 
+.container__content {
+  padding: 0 20px;
+}
+
 h1 {
   margin: 0;
   font-size: 24px;
@@ -208,26 +212,38 @@ button:hover {
   font-size: 16px;
 }
 
-.account-header {
-  display: flex;
+.account-header__banner {
+  width: 100%;
+  height: 112px;
+  background-size: cover;
+  background-position: center;
 }
 
-.account-header .avatar {
-  display: flex;
-  max-width: 60px;
-  margin-right: 10px;
+.account-header__avatar {
+  width: 94px;
+  height: 94px;
+  background-size: cover;
+  background-position: center;
+  margin: -47px 10px 0;
+  border: 6px solid var(--foreground-color);
+  border-radius: 999px;
 }
 
-.account-header .avatar img {
-  width: 100%;
-  border-radius: 4px;
+.account-header__meta {
+  padding: 6px 20px 17px;
 }
 
-@media all and (max-width: 440px) {
-  .container {
-    margin-top: 0
-  }
+.account-header__display-name {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.account-header__nickname {
+  font-size: 14px;
+  color: var(--muted-text-color);
+}
 
+@media all and (max-width: 440px) {
   .scope {
     flex-basis: 0%;
   }