[7430] add project holi icon and styling for login button

adhocracy-plus/assets/scss/_variables.scss

@@ -122,7 +122,8 @@ $idea-remark-color: #999 !default;
 $facebook: #3b5999 !default;
 $google: #dd4b39 !default;
 $twitter: #1da1f2 !default;
-$github: #333;
+$github: #333 !default;
+$project-holi: #fdfd80 !default;
 
 // set bootstrap modal variables
 $modal-inner-padding: 1.5 * $spacer !default;

adhocracy-plus/assets/scss/components/_button.scss

@@ -68,6 +68,7 @@
 
 .btn.btn--primary {
     @include button($brand-primary, $brand-primary, $text-color, 47%);
+    min-width: 10 * $spacer;
 }
 
 .btn.btn--secondary {
@@ -248,8 +249,17 @@
     }
 }
 
+.btn--facebook,
+.btn--google,
+.btn--twitter,
+.btn--github,
+.btn--project-holi {
+    width: 100%;
+}
+
+
 .btn.btn--facebook {
-    @include button($facebook, $facebook, $print-black, 55%);
+    @include button($facebook, $facebook, $print-black, 50%);
 }
 
 .btn.btn--google {
@@ -264,6 +274,10 @@
     @include button($github, $github, $print-black, 70%);
 }
 
+.btn.btn--project-holi {
+    @include button($project-holi, $print-black, $print-black, 17%);
+}
+
 .checkbox-btn {
     display: inline-block;
     position: relative;

adhocracy-plus/assets/scss/icons/style.css

@@ -1,80 +1,95 @@
 @font-face {
-  font-family: 'icomoon';
-  src:  url('../fonts/icomoon.eot?jd0zuw');
-  src:  url('../fonts/icomoon.eot?jd0zuw#iefix') format('embedded-opentype'),
-    url('../fonts/icomoon.ttf?jd0zuw') format('truetype'),
-    url('../fonts/icomoon.woff?jd0zuw') format('woff'),
-    url('../fonts/icomoon.svg?jd0zuw#icomoon') format('svg');
-  font-weight: normal;
-  font-style: normal;
+    font-family: 'icomoon';
+    src:  url('../fonts/icomoon.eot?jd0zuw');
+    src:  url('../fonts/icomoon.eot?jd0zuw#iefix') format('embedded-opentype'),
+        url('../fonts/icomoon.ttf?jd0zuw') format('truetype'),
+        url('../fonts/icomoon.woff?jd0zuw') format('woff'),
+        url('../fonts/icomoon.svg?jd0zuw#icomoon') format('svg');
+    font-weight: normal;
+    font-style: normal;
 }
 
 [class^="icon-"], [class*=" icon-"] {
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: 'icomoon' !important;
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
+    /* use !important to prevent issues with browser extensions that change fonts */
+    font-family: 'icomoon' !important;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
 
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 .icon-answered:before {
-  content: "\e900";
-  font-size: 0.9rem;
+    content: "\e900";
+    font-size: 0.9rem;
 }
+
 /* not used */
 .icon-arrow-down:before {
-  content: "\e901";
+    content: "\e901";
 }
+
 /* not used */
 .icon-arrow-right:before {
-  content: "\e902";
+    content: "\e902";
 }
+
 /* not used */
 .icon-clear:before {
-  content: "\e903";
+    content: "\e903";
 }
+
 .icon-in-list:before {
-  content: "\e904";
-  font-size: 1.1rem;
-  vertical-align: bottom;
+    content: "\e904";
+    font-size: 1.1rem;
+    vertical-align: bottom;
 }
+
 .icon-like:before {
-  content: "\e905";
+    content: "\e905";
 }
+
 /* not used */
 .icon-list:before {
-  content: "\e906";
-  font-size: 1.1rem;
+    content: "\e906";
+    font-size: 1.1rem;
 }
+
 .icon-push-in-list:before {
-  content: "\e907";
-  font-size: 1.1rem;
-  vertical-align: bottom;
+    content: "\e907";
+    font-size: 1.1rem;
+    vertical-align: bottom;
 }
+
 /* not used */
 .icon-screen-view:before {
-  content: "\e908";
+    content: "\e908";
 }
+
 /* not used */
 .icon-sort-list:before {
-  content: "\e909";
+    content: "\e909";
 }
+
 /* not used */
 .icon-talking-desired:before {
-  content: "\e90a";
+    content: "\e90a";
 }
 
 .fa-stack {
-  font-size: 0.5rem;
+    font-size: 0.5rem;
 }
 
 .fa-eye {
-  font-size: 1.05rem;
+    font-size: 1.05rem;
+}
+
+.fa-project-holi {
+    content: url('../fonts/holi_logo.ico');
+    height: 1rem;
 }

adhocracy-plus/templates/socialaccount/connections.html

@@ -34,8 +34,6 @@ <h4>{% translate 'Remove existing connections' %}</h4>
     {% else %}
     <p>{% translate 'You currently have no social network accounts connected to this account.' %}</p>
     {% endif %}
-    <div class="col-md-8 ps-0">
-        {% include "socialaccount/snippets/provider_list.html" with process="connect" %}
-    </div>
+    {% include "socialaccount/snippets/provider_list.html" with process="connect" %}
 
 {% endblock %}

adhocracy-plus/templates/socialaccount/snippets/provider_list.html

@@ -5,24 +5,28 @@
 {% if socialaccount_providers %}
     <h4>{% translate "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 %}
-        <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>
+        <div class="col-xl-10">
+            <div class="row">
+                {% for provider in socialaccount_providers %}
+                {% if provider.id == "openid" %}
+                {% for brand in provider.get_brands %}
+                <div class="col-lg-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>
+                </div>
+                {% endfor %}
+                {% endif %}
+                <div class="col-lg-6 pb-3">
+                    <a title="{% translate 'Login with ' %} {{ provider.name }}"
+                       class="btn btn--light btn--{{ provider.id }} btn--small {{ provider.id }}"
+                       href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">
+                       {% translate 'Login with ' %} {{ provider.name|capfirst }} <i class="fab fa-{{ provider.id }}" aria-hidden="true"></i>
+                   </a>
+                </div>
+            {% endfor %}
+            </div>
         </div>
-        {% endfor %}
-        {% endif %}
-        <div class="col-md-6 pb-3">
-            <a title="{% translate 'Login with ' %} {{ provider.name }}"
-               class="btn btn--light btn--{{ provider.id }} btn--small {{ provider.id }}"
-               href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">
-               {% translate 'Login with ' %} {{ provider.name|capfirst }} <i class="fab fa-{{ provider.id }}" aria-hidden="true"></i>
-           </a>
-        </div>
-    {% endfor %}
     </div>
 {% endif %}

changelog/7430.md

@@ -0,0 +1,3 @@
+### Added
+
+- logo icon and styling for project-holi btn (!7430)