Sign in with GitHub Button

[nelsonic]

At present we do not have any recommendation for the look-and-feel of the Sign in with GitHub button which means it's left to the developer to implement their own ...

The @dwyl library app is using this Elixir package: https://dwyl-library.herokuapp.com

When any of the (three teal) Login buttons on the page is clicked the user is redirected to GitHub auth:

There is no indication on the home page of the library app that Login is going to GitHub ...

Yes, if one hovers over one of the buttons in a Desktop browser, the URL will be visible: But that is not very mobile-first ... 🙄

This is the button we have used in the past: https://github.com/dwyl/hapi-auth-github But it's quite different from the Google button ... https://github.com/dwyl/app/issues/249 If we want all our "Sign in with ..." buttons to have a consistent look-and-feel, we need to make some effort to (re)create the button from first principals.

Todo

• [x] Create a button using CSS and SVG that is responsive
  • [x] conforms to the Google (yes, Google) button spec so we have consistency:
  • [x] uses Roboto font (to be consistent with Google button)
• [x] Background Color #24292e (the super-dark grey of GitHub navbar)
• [x] Font color #fff (white)

The GitHub Logo optimised SVG is:

<svg height="32" viewBox="0 0 16 16" width="32">
  <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>

The work done for this issue will be re-useable for https://github.com/dwyl/elixir-auth-google/issues/25 ♻️

[nelsonic]

The Google Spec (above) for the "Sign in with Google" button specifies dimensions/widths in dp.

What's dp (density independent pixels) units with CSS? https://stackoverflow.com/questions/16390762/whats-dp-density-independent-pixels-units-with-css

"When writing CSS, use px wherever dp or sp is stated. Dp only needs to be used in developing for Android."

Futher background reading:

• Understanding layout: https://material.io/design/layout/understanding-layout.html#usage
• "Why UI designers are using “dp” instead of “pixel” as unit to design mobile apps?" https://medium.com/mockingbot/why-ui-designers-are-using-dp-instead-of-pixel-as-unit-to-design-mobile-app-2c080f90936b

---

Yes, I know there is a certain irony in me wasting time on pixel-perfect buttons in light of us switching to elm-ui but we need auth to be 100% server-side rendered for the foreseeable future (until we build a "native" app) and we don't want to impose the use of Tachyons on people consuming this Elixir package.

[nelsonic]

It's basically done, right? 😉

[nelsonic]

Apparently, display:flex has good browser support: https://caniuse.com/#feat=flexbox

So ... read this: https://css-tricks.com/snippets/css/a-guide-to-flexbox

[nelsonic]

This is what I wanted:

Code that works in all "modern" browsers (and is backwards compatible to IE 10!):

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
<a href="#"
  style="display:inline-flex; align-items:center; min-height:40px;
    background-color:#24292e; font-family:'Roboto',sans-serif;
    font-size:14px; color:white; text-decoration:none;
    padding:8px 12px 8px 0px;">
  <svg height="18" viewBox="0 0 16 16" width="40px" 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>
  Sign in with GitHub
</a>

Using http://bytesizematters.com we see that our SVG+CSS button is only 1kb:

That is an 87.5% bandwidth saving on the 8kb of the .png button. And what's more it reduces the number of HTTP requests which means the page loads even faster.

This is what I expect everyone @dwyl to be doing. Save everyone bandwidth (and time) by putting a little extra effort to optimise the little things.

[nelsonic]

Now I'm working on https://github.com/dwyl/elixir-auth-google/issues/25 with the stated objective of keeping the buttons consistent. So while trying to match the GitHub Button to the Google one ... this happened:

Gotta love doing layout manually ... 🤦‍♂

Obvs this is PEBKAC ... and I fixed it immediately. And after much pixel shifting, arrived at the desired result: (class="debug")

Consistent buttons compliant with Google Spec:

[nelsonic]

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 "expert" so I encourage you to dissect and improve this!

[nelsonic]

[nelsonic]

Implemented in #34 :shipit: