From 15a649b60bcb14333e831bf91d221b2f48b673e8 Mon Sep 17 00:00:00 2001
From: Eric Theise <erictheise@gmail.com>
Date: Tue, 28 Apr 2020 00:43:38 -0700
Subject: [PATCH] feat: #26, wraps social account login in button per design

---
 templates/account/login.html                  |  8 ++++--
 .../socialaccount/authentication_error.html   |  7 +++--
 .../socialaccount/snippets/provider_list.html | 28 ++++++++++++++++---
 3 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/templates/account/login.html b/templates/account/login.html
index fa4ac1f..75b3be5 100644
--- a/templates/account/login.html
+++ b/templates/account/login.html
@@ -28,9 +28,11 @@ <h1>{% trans "Sign In" %}</h1>
 {% get_providers as socialaccount_providers %}
 {% if socialaccount_providers %}
 <div class="spacer"></div>
-<div class="login-or">{% trans 'or' %}</div>
-<p>{% blocktrans with site.name as site_name %}sign in with one
-of your existing third party accounts. {% endblocktrans %}</p>
+<div class="login-or">
+  <p class="align-center">
+    {% trans 'OR' %}
+  </p>
+</div>
 
 <div class="socialaccount_ballot">
   <ul class="socialaccount_providers">
diff --git a/templates/socialaccount/authentication_error.html b/templates/socialaccount/authentication_error.html
index 0300295..95cd5c8 100644
--- a/templates/socialaccount/authentication_error.html
+++ b/templates/socialaccount/authentication_error.html
@@ -2,10 +2,13 @@
 
 {% load i18n %}
 
-{% block head_title %}{% trans "Social Network Login Failure" %}{% endblock %}
+{% block title %}{% trans "Social Network Login Failure" %}{% endblock %}
 
 {% block content %}
-<h1>{% trans "Social Network Login Failure" %}</h1>
+<div class="page-header">
+    <p><a class="link--inverse" href="{% url 'index' %}">Home</a></p>
+    <h1>{% trans "Social Network Login Failure" %}</h1>
+</div>
 
 <p>{% trans "An error occurred while attempting to login via your social network account." %}</p>
 {% endblock %}
diff --git a/templates/socialaccount/snippets/provider_list.html b/templates/socialaccount/snippets/provider_list.html
index e76a296..0b6041b 100644
--- a/templates/socialaccount/snippets/provider_list.html
+++ b/templates/socialaccount/snippets/provider_list.html
@@ -1,3 +1,4 @@
+{% load static %}
 {% load socialaccount %}
 
 {% get_providers as socialaccount_providers %}
@@ -6,15 +7,34 @@
 {% if provider.id == "openid" %}
 {% for brand in provider.get_brands %}
 <li>
-  <a title="{{brand.name}}" 
+  <a title="{{brand.name}}"
      class="socialaccount_provider {{provider.id}} {{brand.id}}" 
      href="{% provider_login_url provider.id openid=brand.openid_url process=process %}"
      >{{brand.name}}</a>
 </li>
 {% endfor %}
 {% endif %}
-<li>
-  <a title="{{provider.name}}" class="socialaccount_provider {{provider.id}}" 
-     href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">{{provider.name}}</a>
+<li class="no-bullet">
+  <a type="button" class="button" title="{{provider.name}}" class="socialaccount_provider {{provider.id}}"
+     href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">
+    {% if provider.name == 'Facebook' %}
+    <i class="fab fa-facebook-square"></i>
+    {% elif provider.name == 'GitHub' %}
+    <i class="fab fa-github-square"></i>
+    {% elif provider.name == 'Instagram' %}
+    <i class="fab fa-instagram-square"></i>
+    {% elif provider.name == 'LinkedIn' %}
+    <i class="fab fa-linkedin"></i>
+    {% elif provider.name == 'Medium' %}
+    <i class="fab fa-medium"></i>
+    {% elif provider.name == 'Reddit' %}
+    <i class="fab fa-reddit-square"></i>
+    {% elif provider.name == 'Stack Exchange' %}
+    <i class="fab fa-stack-overflow"></i>
+    {% elif provider.name == 'Twitter' %}
+    <i class="fab fa-twitter-square"></i>
+    {% endif %}
+    Log in with {{provider.name}}
+  </a>
 </li>
 {% endfor %}