Merge 7943861 into d012989

liqd · Oct 2, 2019 · fb58fa7 · fb58fa7
2 parents d012989 + 7943861
commit fb58fa7
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 23 deletions.
diff --git a/apps/users/templates/a4_candy_users/user_detail.html b/apps/users/templates/a4_candy_users/user_detail.html
@@ -17,19 +17,19 @@ <h1 class="u-first-heading">{{ object.username }}</h1>
                 <ul class="u-list-reset">
                     {% if object.homepage %}
                         <li>
-                            <i class="fa fa-link" aria-label="{% trans 'Homepage' %}" title="{% trans 'Homepage' %}"></i>
+                            <i class="fas fa-link" aria-label="{% trans 'Homepage' %}" title="{% trans 'Homepage' %}"></i>
                             <a href="{{ object.homepage }}">{{ object.homepage }}</a>
                         </li>
                     {% endif %}
                     {% if object.facebook_handle %}
                         <li>
-                            <i class="fa fa-facebook-square" aria-label="{% trans 'Facebook' %}" title="{% trans 'Facebook' %}"></i>
+                            <i class="fab fa-facebook-square" aria-label="{% trans 'Facebook' %}" title="{% trans 'Facebook' %}"></i>
                             <a href="https://www.facebook.com/{{ object.facebook_handle }}">{{ object.facebook_handle }}</a>
                         </li>
                     {% endif %}
                     {% if object.twitter_handle %}
                         <li>
-                            <i class="fa fa-twitter" aria-label="{% trans 'Twitter' %}" title="{% trans 'Twitter' %}"></i>
+                            <i class="fab fa-twitter" aria-label="{% trans 'Twitter' %}" title="{% trans 'Twitter' %}"></i>
                             <a href="https://twitter.com/{{ object.twitter_handle }}">{{ object.twitter_handle }}</a>
                         </li>
                     {% endif %}

diff --git a/liqd_product/assets/scss/_variables.scss b/liqd_product/assets/scss/_variables.scss
@@ -110,7 +110,6 @@ $idea-remark-color: #999 !default;
 
 // extra
 $facebook: #3b5999 !default;
-$facebook-border: #344e87 !default;
 $google: #dd4b39 !default;
-$google-border: #d73925 !default;
 $twitter: #1da1f2 !default;
+$github: #333;
diff --git a/liqd_product/assets/scss/components/_button.scss b/liqd_product/assets/scss/components/_button.scss
@@ -252,16 +252,17 @@
 }
 
 .btn--facebook {
-    background-color: $facebook;
-    border-color: $facebook-border;
+    @include button-color--product($facebook);
 }
 
 .btn--google {
-    background-color: $google;
-    border-color: $google-border;
+    @include button-color--product($google);
 }
 
 .btn--twitter {
-    background-color: $twitter;
-    border-color: $twitter;
+    @include button-color--product($twitter);
+}
+
+.btn--github {
+    @include button-color--product($github);
 }
diff --git a/liqd_product/templates/socialaccount/connections.html b/liqd_product/templates/socialaccount/connections.html
@@ -6,7 +6,7 @@
 
 {% block dashboard_content %}
     <h1 class="u-first-heading">{% trans "Social Connections" %}</h1>
-    <h3 class="font-serif">{% trans 'Remove existing connections' %}</h3>
+    <h4>{% trans 'Remove existing connections' %}</h4>
     {% if form.accounts %}
     <p>{% blocktrans %}You can sign in to your account using any of the following third party
         accounts. To remove them mark the one you would like to remove and click the remove button{% endblocktrans %}</p>
@@ -34,9 +34,8 @@ <h3 class="font-serif">{% trans 'Remove existing connections' %}</h3>
     {% else %}
     <p>{% trans 'You currently have no social network accounts connected to this account.' %}</p>
     {% endif %}
-    <h3 class="font-serif">{% trans 'Add a 3rd Party Account' %}</h3>
-    <ul class="pl-0">
+    <div class="col-md-8 pl-0">
         {% include "socialaccount/snippets/provider_list.html" with process="connect" %}
-    </ul>
+    </div>
 
 {% endblock %}
diff --git a/liqd_product/templates/socialaccount/snippets/provider_list.html b/liqd_product/templates/socialaccount/snippets/provider_list.html
@@ -3,24 +3,26 @@
 {% get_providers as socialaccount_providers %}
 
 {% if socialaccount_providers %}
-    <h3 class="socialaccounts-heading">{% trans "or use your social media account" %}</h3>
-    <ul class="list-group">
+    <h4>{% trans "Login with social media account" %}</h4>
+    <div class="row pb-5">
     {% for provider in socialaccount_providers %}
         {% if provider.id == "openid" %}
         {% for brand in provider.get_brands %}
-        <li class="list-group-item border-0 pl-0">
+        <div class="col-md-6 pb-3">
             <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>
+        </div>
         {% endfor %}
         {% endif %}
-        <li class="list-group-item border-0 pl-0">
+        <div class="col-md-6 pb-3">
             <a title="{% trans 'Login with ' %} {{ provider.name }}"
                class="btn btn--{{ provider.id }} btn--small {{ provider.id }}"
-               href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">{% trans 'Login with ' %} {{ provider.id|capfirst }}</a>
-        </li>
+               href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">
+               {% trans 'Login with ' %} {{ provider.name|capfirst }} <i class="fab fa-{{ provider.id }}" aria-hidden="true"></i>
+           </a>
+        </div>
     {% endfor %}
-    </ul>
+    </div>
 {% endif %}