feat: Improve My MLH sign-in button

Author: sman591

app/assets/images/my-mlh.svg

@@ -1,13 +1,17 @@
+/*
+ * Regular button
+ */
+
 .button, input[type=submit]
   background: $button--background
   border: 1px solid $button--border
   cursor: pointer
   display: inline-block
-  padding: 0.6em 1.3em !important
+  padding: 0.6em 1.3em
   font-size: 15px
   text-transform: uppercase
   color: $button--text
-  font-weight: 600 !important
+  font-weight: 600
   text-align: center
   text-decoration: none
   -webkit-appearance: none
@@ -50,3 +54,49 @@
 
 .button-overlay
   margin-top: -100px
+
+/*
+ * My MLH CTA button
+ */
+.my-mlh-cta__button
+  display: flex
+  flex-flow: row nowrap
+  padding: 0px
+  height: 40px
+  align-items: center
+  justify-content: space-between
+  width: 267px
+  margin: 2em auto 2em
+  transition: transform color 0.1s ease-out
+  box-sizing: content-box
+
+  &:hover
+    transform: scale(1.04)
+    background: $button--background
+    @include box-shadow(0 4px 18px rgba($button--background, 0.35))
+
+.my-mlh-cta__text
+  flex: 1
+  text-align: center
+  padding-left: 2px
+
+.my-mlh-cta__image-wrapper
+  background: rgba(255, 255, 255, 0.95)
+  display: flex
+  align-items: center
+  flex-flow: row nowrap
+  color: $button--background
+  padding: 0px 9px
+  justify-content: center
+  border-radius: 0 2px 2px 0
+
+.my-mlh-cta__image
+  height: 40px
+  padding: 13px 0
+  width: 90px
+  margin-right: 6px
+
+.my-mlh-cta__icon
+  transition: transform 0.1s ease-out
+  .my-mlh-cta__button:hover &
+    transform: scale(1.02) translateX(1px)

app/assets/stylesheets/general/_button.sass

@@ -0,0 +1,5 @@
+%a.button.my-mlh-cta__button{href: user_mlh_omniauth_authorize_path}
+  %span.my-mlh-cta__text Continue with
+  %span.my-mlh-cta__image-wrapper
+    = image_tag 'my-mlh.svg', alt: 'My MLH', class: 'my-mlh-cta__image'
+    %span.fa.fa-chevron-right.my-mlh-cta__icon

app/views/application/_my_mlh_cta.html.haml

@@ -1,9 +1,9 @@
 = simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f|
   .form-actions
     .center
-      = btn_link_to "Continue with My MLH »".html_safe, user_mlh_omniauth_authorize_path
+      = render 'my_mlh_cta'
       %p
-        %em or create an account:
+        %em or continue manually:
   .form-inputs
     = f.input :email, required: true, autofocus: true
     = f.input :password, required: true

app/views/devise/registrations/_form.html.haml

@@ -1,10 +1,9 @@
 = simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
   .form-actions
     .center
+      = render 'my_mlh_cta'
       %p
-        = btn_link_to "Continue with My MLH »".html_safe, user_mlh_omniauth_authorize_path
-      %p
-        %em or use an account:
+        %em or use an email & password:
   .form-inputs
     = f.input :email, required: false, input_html: { autofocus: true }
     = f.input :password, required: false