From 868a3df2d8af647ddcb6d0f29c6725a41fa3463c Mon Sep 17 00:00:00 2001
From: Joseph Schorr <joseph.schorr@coreos.com>
Date: Wed, 31 Jan 2018 11:05:42 -0500
Subject: [PATCH] Change positioning and sizing of external login buttons to be
 nicer looking, using flex box

Fixes https://jira.coreos.com/browse/QUAY-806
---
 .../directives/ui/external-login-button.css   |  9 ++++++-
 static/css/directives/ui/signin-form.css      | 25 ++++++++++---------
 static/directives/signin-form.html            |  2 +-
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/static/css/directives/ui/external-login-button.css b/static/css/directives/ui/external-login-button.css
index 8cf5ff69e..e71aff6fd 100644
--- a/static/css/directives/ui/external-login-button.css
+++ b/static/css/directives/ui/external-login-button.css
@@ -1,4 +1,11 @@
-.external-login-button i.fa,
+.external-login-button i.fa {
+  margin-right: 4px;
+  width: 24px;
+  font-size: 18px;
+  text-align: center;
+  vertical-align: middle;
+}
+
 .external-login-button img {
   margin-right: 4px;
   width: 24px;
diff --git a/static/css/directives/ui/signin-form.css b/static/css/directives/ui/signin-form.css
index 74a51675b..027cd3ec2 100644
--- a/static/css/directives/ui/signin-form.css
+++ b/static/css/directives/ui/signin-form.css
@@ -45,14 +45,18 @@
 }
 
 .signin-form-element .external-logins {
-    text-align: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-items: center;
 }
 
 .signin-form-element .external-login-button {
     display: inline-block;
+    text-align: center;
     padding: 6px;
-    margin-left: 15px;
-    margin-right: 15px;
+    margin-bottom: 10px;
+    max-width: 50%;
 }
 
 .signin-form-element .external-login-button a {
@@ -65,16 +69,13 @@
     font-size: 14px;
 }
 
-.signin-form-element .external-logins.smaller .external-login-button .login-text .prefix {
-    display: none;
-}
-
-.signin-form-element .external-logins.larger .external-login-button .login-text .suffix {
-    font-weight: 700;
-}
-
-
 .signin-form-element .external-login-button i.fa {
     font-size: 46px;
     width: auto !important;
 }
+
+.signin-form-element .external-login-button img {
+    width: 50% !important;
+    max-width: 80px;
+    margin-bottom: 6px;
+}
diff --git a/static/directives/signin-form.html b/static/directives/signin-form.html
index 455b9128f..6099fbb3f 100644
--- a/static/directives/signin-form.html
+++ b/static/directives/signin-form.html
@@ -5,7 +5,7 @@
       Login via service
     </h4>
 
-    <div class="external-logins" quay-show="EXTERNAL_LOGINS.length" ng-class="EXTERNAL_LOGINS.length > 2 ? 'smaller': 'larger'">
+    <div class="external-logins" quay-show="EXTERNAL_LOGINS.length">
       <div class="external-login-button" provider="provider" redirect-url="redirectUrl"
            sign-in-started="markStarted()" ng-repeat="provider in EXTERNAL_LOGINS" is-link="true"></div>
     </div>