Customise / Optimise / Simplify Sign in with Google Button?

[nelsonic]

Context

I am in the process of updating the Docs for dwyl/elixir-auth-github#32
Part of that is selecting (or more likely creating) a button dwyl/elixir-auth-github#33 that will:
a) display the logo correctly
b) have a consistent layout (responsive), size and look-and-feel

The reason the button created for GitHub Auth is relevant to Google Auth
is that if we have both buttons on the same page, it will look amateur if they are inconsistent.

The sample "Sign in with GitHub" button is quite different from the Google one below ... 😕

The default "Sign in with Google" button:

At present our instructions advise people to use the Google supplied 2x button:

this is fine for us during MVP https://github.com/dwyl/app-mvp-phoenix because nobody using our app cares about the size of the button. But if we (or any other app) were to allow both types of auth, it wouldn't look great ...

This issue is for people who want finer control over the button.
They may want to apply some style to it or make it "flat".

Google provides the assets for buttons: developers.google.com/identity/images/signin-assets.zip

We are using the btn_google_signin_dark_normal_web@2x.png (2x 8kb) version for our MVP.

1x = 4kb

![btn_google_signin_dark_normal_web](https://i.imgur.com/IjVIMxf.png "Sign in with Google")

OR in an HTML/Elixir template:

  <a href="<%= @oauth_google_url %>">
    <img src="https://i.imgur.com/IjVIMxf.png" alt="Sign in with Google" />
  </a>

2x = 8kb

![btn_google_signin_dark_normal_web@2x](https://i.imgur.com/Kagbzkq.png "Sign in with Google")

  <a href="<%= @oauth_google_url %>">
    <img src="https://i.imgur.com/Kagbzkq.png" alt="Sign in with Google" />
  </a>

Q: Can we customise or simplify this button?

Google provides the following .png for use:

https://developers.google.com/identity/images/g-logo.png

but that g-logo.png file is 2kb:

Google does not make an .svg file available

Google Logos: https://commons.wikimedia.org/wiki/Category:Google_SVG_logos the one we want is:
commons.wikimedia.org/wiki/Category:Google_SVG_logos#/media/File:Google_%22G%22_Logo.svg
[ can't upload .svg files to Github 😞 so this is what the file looks like as a PNG: ]

Using the https://jakearchibald.github.io/svgomg/ reduce the .svg 1006 bytes → 413 bytes 41.05%

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 533.5 544.3">
  <path d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z" fill="#4285f4"/>
  <path d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z" fill="#34a853"/>
  <path d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z" fill="#fbbc04"/>
  <path d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z" fill="#ea4335"/>
</svg>

Font

If we want to implement our own <button> using HTML+CSS, we will also need to load the right font in order to comply with the Google brand guidelines

https://developers.google.com/identity/branding-guidelines#font

The Roboto font is available on Google Fonts:
https://fonts.google.com/specimen/Roboto?selection.family=Roboto

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

font-family: 'Roboto', sans-serif;

To avoid unncessary tracking, we could either download (and host the font ourselves)
or only load it on the page that will display the login buttons. (i.e. not in the "layout" template which would include the font on every page and thus send an HTTP request to Google for every page...!)

before we get too creative ... ⚠️

According to the guidelines, there are lot of wrong ways to create the button:
https://developers.google.com/identity/branding-guidelines#incorrect

So we basically can only re-implement the default button but keep it consistent with the GitHub one.

Todo

Similar to dwyl/elixir-auth-github#33 (do that one first and re-use the code!!)

• Create a button using CSS (the hard part) and SVG (see optimised .svg above)
• Background color: #4285F4 (dark blue)
• Font Color: #ffffff (white)
• Font: Roboto (see above)
• Call-to-action text "Sign in with Google"
  (having this as text will make it more accessible, translatable and A/B testable!)

[nelsonic]

The work for this button was done in dwyl/elixir-auth-github#33

Final code for consistently pixel-perfect scalable sign in buttons:

<div style="display:flex; flex-direction:column; width:180px; margin-left:20px">
  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
  <a href="#"
    style="display:inline-flex; align-items:center; min-height:30px;
      background-color:#24292e; font-family:'Roboto',sans-serif;
      font-size:14px; color:white; text-decoration:none;">
    <div style="margin: 1px; padding-top:5px; min-height:30px;">
    <svg height="18" viewBox="0 0 16 16" width="32px" style="fill:white;">
      <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38
      0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01
      1.08.58 1.23.82.72 1.21 1.87.87
      2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12
      0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08
      2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0
      .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
    </svg>
    </div>
    <div style="margin-left: 5px;">
      Sign in with GitHub
    </div>
  </a>

  <a href="#"
    style="display:inline-flex; align-items:center; min-height:30px;
      background-color:#4285F4; font-family:'Roboto',sans-serif;
      font-size:14px; color:white; text-decoration:none;
      margin-top: 12px">
      <div style="background-color: white; margin:1px; padding-top:5px;
       min-height:29px;">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 533.5 544.3"
        width="30px" height="18" style="display:inline-flex; align-items:center;" >
        <path d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z" fill="#4285f4"/>
        <path d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z" fill="#34a853"/>
        <path d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z" fill="#fbbc04"/>
        <path d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z" fill="#ea4335"/>
      </svg>
    </div>
    <div style="margin-left: 7px;">
      Sign in with Google
    </div>
  </a>
<div>

I'm no CSS/Flexbox layout so I encourage you to dissect and improve this!

[nelsonic]

https://github.com/dwyl/elixir-auth-github/tree/update-docs-issue%2332#optimised-svgcss-button

[nelsonic]

[nelsonic]

Vive la France! 🇫🇷 😉

[nelsonic]

PR: #29