diff --git a/js/src/forum/extenders/extendLoginSignup.tsx b/js/src/forum/extenders/extendLoginSignup.tsx index 63a56af..3e52460 100644 --- a/js/src/forum/extenders/extendLoginSignup.tsx +++ b/js/src/forum/extenders/extendLoginSignup.tsx @@ -12,6 +12,12 @@ import { openOAuthPopup } from '../utils/popupUtils'; import type Mithril from 'mithril'; import type ItemList from 'flarum/common/utils/ItemList'; +export type OAuthProvider = { + name: string; + icon: string; + priority: number; +} | null; + export default function () { extend(LogInButton, 'initAttrs', function (_returnedValue, attrs) { attrs.onclick = function () { @@ -21,14 +27,13 @@ export default function () { extend(LogInButtons.prototype, 'items', function (items: ItemList) { const onlyIcons = !!app.forum.attribute('fof-oauth.only_icons'); - const buttons = app.forum.attribute('fof-oauth').filter(Boolean); - const googleButton = buttons.splice(buttons.indexOf(buttons.find((b) => b.name === 'google')), 1); + const enabledOAuthProviders = app.forum.attribute('fof-oauth').filter(Boolean); - buttons.concat(googleButton).forEach(({ name, icon, priority }) => { + enabledOAuthProviders.forEach(({ name, icon, priority }) => { let className = `Button FoFLogInButton LogInButton--${name}`; // Google branding does not allow inline icon, so we'll keep the full button - if (onlyIcons && name !== 'google') { + if (onlyIcons) { className += ' Button--icon'; } diff --git a/resources/less/forum.less b/resources/less/forum.less index b8d6371..a32d3fe 100644 --- a/resources/less/forum.less +++ b/resources/less/forum.less @@ -43,7 +43,6 @@ .Button--color(#fff, #2867b2); } - // Custom CSS that meets the bare minimum of https://developers.google.com/identity/branding-guidelines &.LogInButton--google { .Button--color(#757575, #fff); @@ -51,12 +50,12 @@ &::before { content: ""; display: inline-block; - width: 18px; // Same size as other icons, which happen to match Google minimums - height: 18px; + width: 30px; + height: 30px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAC3UExURUdwTP84AEyxTQ550wx40xp7zv9eAA1505SJXiV8zLiVIv88AP89AP85AE6xTF2yRWSyQf86AP5jAFKxSv89AFyxRlexSU6xTP83AP86AP/DAFCxSw150v/DAP84AP7AAP8/AP/CAAx40w950P89AFCxS1CxS//DAP/CAAt40/nCAhF50B6IsTKah//BAA140rm8G0qxTgl41P/DAP83AP+EAIu3MebBBj+maf9aAP+kAP+2AGS0Q8y4bCgAAAAxdFJOUwDp8hDyNCLTBBUKVobW4C8YvxN+bUdaz/Oo7bik2Ps2RVnEYDWap72m4YVG/f1tfvn45KBTAAAEEklEQVRo3t2a61biMBSF0wI10qb3q4VaEVAHFQt1xrm8/3NNuBdI2iQNzFqz1/If+HH2zjknFQFgU18b60biIKRgIeQkhp9rfSBPUMsNBylZWWb4Z6csRo6hywFBzU9QVlZ+e1WZ4vjjthxXT5SyThiuJLrWAqH5TlayCBmiGM1AJbMUIYzrcyDEMDBnNKqSToZ0riPgGkrJryxOOIrJnVJQSIeMVvlKKazYcNmsysoWylgs05KypZxxI8MpW8txL89Q9IZheHnGNeoAbnJ5BjQuzwB+xjSh4jjOhBl5U5/HCC92PR+Pc903EqQIMNz60Fdr1q3MJeiO/dOl2cioDwQZeJFDeL7+qwuhkVFrFvIp4whC13fYGTVmxfUbz93O7GYG/WRlKK/fEBCMHTaGRt3nLIPbNWIGBnj//NlmBfV1BoY2XP4iUWKfdZkyvOZ9uVz+/jzPg5XBtHCfliudFWNIZICH5Ua/fx4va1ciAz4vd6pahjSJjFXsex0si3OZjL1bG8s+LxFI1a2KZXLNOnLrkL8BLufWzjLJhYBvy3N9Si6k/0yA3N3XvKNzy64OXK86d0iAPNU8zXQGNxwaYPXA/R0B8l5XyM2CU4+E3Jvc4oYMiLkPXamQESDl/gylQm7AEwHyDUiFdMGQM3dpkAe5kAUJUnu4hCB3/w1k+I8gVwlePuQqzXiFsfJCHJBPsgfk+zVGPXFpPUiFzM9vRE2hdEZduoi5P4I+6Xh9WDWXwR5dM1KVLz3SlejH98ITu/rMSKWMOoTLHWYUkS104x2Qc8fX1JPkP/4UWKEIpNclX1bASSirMlYSKYVcyCoScNQpO0YhkgoxkcVgfVIrnbKxai3T4mXcjhY0t6p+fRQVpZyGwfmC7tb+fB2s2hrG96z12F3Q3do9Bv34c8woVK4TNnshz5RZ9RHl45SBKQHH6aVMtFUnbnR/d2rVNnxmSm9EvdEfnraIDExhdGxGm8yj28OLLJMMKVSP5cudx5dFcyEAeAVN08Z+sb036k7sVM+4HVEpZlhbDAzSovh6Jd8gZsevDVUqpUgDKgZak/UbyZTBSaf1p3RIoaYhsf37wWT/2V7pzc6Q/QYTeYF9/Llsy0ur5b8R1u6Z6gzbcKZeaFk2lmWF3iQ6ff1bg1lre72iWapqRpFpkj/PF7VFKvWnRUtV4z8PZBtLJI9CCoQlfCZtKd05vbOC9pRN/PO6XSSJUsvAQ6I95et13rBTYfv0GfYDtFqe5Ihp09kTtQUjZbxKwVA4GNVjvUhBYcuigOca1ffMS5ax737uZKYB/1/eYTDlwOC9JvYvRewYYcSmaTyG3jQnQct/jLLD8x14RJiGNpAgO/BS0jJUzdQL8eaX9U0LxKBJhYS38NQLLEaX/gIGHNymY/90kQAAAABJRU5ErkJggg=="); background-position: center; background-repeat: no-repeat; - background-size: 18px 18px; + background-size: 30px; margin-bottom: -2px; // -2 px is so the button still has the same height as the other ones } } @@ -74,7 +73,7 @@ flex-flow: row wrap; margin-bottom: 10px; - .FoFLogInButton:not(.LogInButton--google) { + .FoFLogInButton { width: 50px; height: 50px; padding: 0; @@ -90,15 +89,6 @@ height: 50px; margin-bottom: 0; } - - .LogInButtonContainer--google { - flex-basis: 100%; - - .FoFLogInButton { - width: min-content; - margin: 0 auto; - } - } } .SettingsPage {