View Issue Detail

ID	Project	Category	Submitted / Last Updated
01351	UserSpice	Plugins	2021-10-15 19:12:51 / 2021-11-20 10:20:10
Reported	James Erikson	Assigned To	Unassigned
Priority	none	Reported	5.3.5
Status	addon	Resolution Version and Commit
Summary	Google Login Button is Huge
Description	I noticed when turning on Google Login, the button is huge and overlaps the container on mobile with no way to resize... I found the button code in: usersc/plugins/google_login/assets/ File is called: google_oauth_login.php file I was able to finally edit the size by adding this inside the <img> tag: width="whatever numerical amount you want here"

November 2021

Width="#here" is put inside the img tag, it got cut out lol
November 2021

:) I'll take a look at this. Legacy plugin.
December 2021

I replaced usersc/plugins/google_login/assets/google_oauth_login.php with this, and it looks OK: - <?php if(isset($authUrl)) { ?> <style> .login-with-google-btn { transition: background-color .3s, box-shadow .3s; padding: 12px 16px 12px 42px; border: none; border-radius: 3px; box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25); color: #757575; font-size: 14px; font-weight: 500; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=); background-color: white; background-repeat: no-repeat; background-position: 12px 11px; } .login-with-google-btn:hover { box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25); } .login-with-google-btn:active { background-color: #eeeeee; } .login-with-google-btn:focus { outline: none; box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25), 0 0 0 3px #c8dafc; } login-with-google-btn:disabled { filter: grayscale(100%); background-color: #ebebeb; box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25); cursor: not-allowed; } </style> <a class="float-right p-2" href="<?=$authUrl?>"> <button type="button" class="login-with-google-btn" >Sign in with Google </button>  </a> <?php } ?> Only issue is the hook seems different in login and join.... looks much better in "join", but on "login" creates it's own row and doesn't look great.
December 2021

FYI that code modified slightly from: https://codepen.io/mupkoo/pen/YgddgB
December 2021

Yeah tbh I gave up on userspice. I know it's a great asset for lotssss of people, but things were too controlling and hard to override for my usage case. But thanks for the update!