Clean up style when both oAuth2 and account approval are enabled

Clean up style when both oAuth2 and account approval are enabled

diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index b012099..5c22ca1 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -238,6 +238,11 @@
       background: lighten($github, 20%);
     }
   }
+  &.oauth2_basic {
+    .d-icon {
+      display: none;
+    }
+  }
 }
 
 // Button Sizes
diff --git a/app/assets/stylesheets/desktop/login.scss b/app/assets/stylesheets/desktop/login.scss
index 0a74e64..0351114 100644
--- a/app/assets/stylesheets/desktop/login.scss
+++ b/app/assets/stylesheets/desktop/login.scss
@@ -8,8 +8,7 @@
     flex: 0;
     flex-direction: column;
     align-items: stretch;
-    min-height: 175px;
-    border-left: 1px solid $primary-low;
+    min-height: 75px;
     padding: s(0 6);
     order: 2;
 
@@ -21,6 +20,14 @@
       &:lang(zh_CN) {
         min-width: 200px;
       }
+      &:first-of-type:last-of-type {
+        &.oauth2_basic {
+          // Handles a strange fringe case where OAuth2 and account approval are enabled
+          margin-left: auto;
+          margin-right: auto;
+          justify-content: center;
+        }
+      }
     }
   }
 
@@ -50,6 +57,9 @@
     #login-buttons:not(.hidden) {
       justify-content: flex-start;
       padding-top: 2.7em;
+      + .login-form {
+        border-right: 1px solid $primary-low; // Only show border when login-form is present
+      }
     }
   }
 
@@ -57,6 +67,9 @@
     box-sizing: border-box;
     flex: 1 0 auto;
     padding: s(0 6);
+    + #login-buttons {
+      border-left: 1px solid $primary-low; // Only show border when login-form is present
+    }
   }
 
   tr:not(.instructions) {

GitHub sha: f177567c

Is this case specific to OAuth2_basic? Or does it apply to any single login provider?

Good question, I’ll try a few and see

1 Like

Note that I’ve now given plugins a default icon, so I think it should closely match other providers for styling now.

2 Likes