Improve follow button's appearance (#2052)

* Style fixes and fix for follow button on homepage * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Improved styling on the follow button in profile and on project cards and header * Fix styling on spotlight card follow button * Use macro for profile in header * Use title_inline for consistent appearance --------- Co-authored-by: Vidya Ramakrishnan <[email protected]> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Kiran Jonnalagadda <[email protected]>
hasgeek · May 31, 2024 · 9cf1258 · 9cf1258
1 parent 1bdd2c5
commit 9cf1258
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 13 deletions.
diff --git a/funnel/assets/sass/components/_button.scss b/funnel/assets/sass/components/_button.scss
@@ -100,6 +100,13 @@
   border: 1px solid $mui-text-danger;
 }
 
+.mui-btn__icon {
+  display: flex;
+  flex-direction: row;
+  gap: $mui-grid-padding/2;
+  align-items: center;
+}
+
 .mui-btn--accent.mui--is-disabled,
 .mui-btn--accent.mui--is-disabled:hover,
 .mui-btn--accent.mui--is-disabled:active,

diff --git a/funnel/assets/sass/components/_card.scss b/funnel/assets/sass/components/_card.scss
@@ -43,6 +43,8 @@
 
   .mui-btn + .mui-btn {
     margin-left: 0;
+    padding: 2px 10px;
+    border-radius: 4px;
   }
 }
 

diff --git a/funnel/assets/sass/pages/index.scss b/funnel/assets/sass/pages/index.scss
@@ -48,6 +48,11 @@
     .spotlight-container__details {
       margin-top: 40px;
     }
+    .mui-btn + .mui-btn {
+      margin-left: 0;
+      padding: 2px 10px;
+      border-radius: 4px;
+    }
   }
 }
 

diff --git a/funnel/assets/sass/pages/project.scss b/funnel/assets/sass/pages/project.scss
@@ -223,6 +223,14 @@
   }
 }
 
+.follow-form {
+  .mui-btn--accent {
+    margin-left: 0;
+    padding: 2px 10px;
+    border-radius: 4px;
+  }
+}
+
 @media (min-width: 768px) {
   .project-header {
     position: relative;
@@ -283,6 +291,12 @@
     .project-banner__profile-details__badge {
       margin-left: auto;
     }
+    .mui-btn + .mui-btn,
+    .mui-btn--accent {
+      margin-left: 0;
+      padding: 2px 10px;
+      border-radius: 4px;
+    }
   }
 
   .project-banner__profile-details--center {

diff --git a/funnel/templates/macros.html.jinja2 b/funnel/templates/macros.html.jinja2
@@ -180,8 +180,7 @@
             <h3 class="card__body__title mui--text-subhead {% if not project.start_at %} card__body__subtitle {% endif %}"><span class="text-bold">{{ project.title_inline }}</span> <span class="mui--text-light js-truncate" data-truncate-lines="2">{{ project.tagline }}</span></h3>
           {% endif %}
         {% elif include_details %}
-          <h3 class="card__body__subtitle mui--text-subhead text-bold">{{ project.title }}</h3>
-          <p class="mui--text-caption mui--text-light js-truncate" data-truncate-lines="2">{{ project.tagline }}</p>
+          <h3 class="card__body__title mui--text-subhead {% if not project.start_at %} card__body__subtitle {% endif %}"><span class="text-bold">{{ project.title_inline }}</span> <span class="mui--text-light js-truncate" data-truncate-lines="2">{{ project.tagline }}</span></h3>
           {% if project.cfp_state.OPEN and project.cfp_end_at_localized %}
             <hr class="separator" />
             <p class="mui--text-caption zero-bottom-margin secondary-color-txt">{% trans date=project.cfp_end_at_localized|datetime(format='dd MMM YYYY, hh:mm a') %}Accepting submissions till {{ date }}{% endtrans %}</p>

diff --git a/funnel/templates/profile.html.jinja2 b/funnel/templates/profile.html.jinja2
@@ -101,14 +101,7 @@
               <a class="card card--upcoming card--new clickable-card" href="{{ profile.url_for('new_project') }}" aria-label="{% trans %}Create a new project{% endtrans %}" data-cy="new-project" data-ga="Add new project">
                 <div class="flex-wrapper flex-wrapper--center flex-wrapper--space-between margin-top margin-bottom margin-right margin-left">
                   <div class="flex-wrapper flex-wrapper--center">
-                    <span class="profile-avatar margin-right">
-                      {%- if profile.logo_url.url %}
-                        <img src="{{ profile.logo_url.resize(img_size.profile_logo_small) }}" alt="{{ profile.title }}"/>
-                      {% else %}
-                        <img src="{{ url_for('static', filename='img/default-profile-logo.png') }}" alt="{{ profile.title }}"/>
-                      {% endif %}
-                    </span>
-                    <span class="profile-avatar-title mui--text-body2 text-bold mui--text-dark">{{ profile.title }}</span>
+                    {{ profileavatar(profile, add_profile_link=false, css_class='flex-item-align-end margin-right') }}
                   </div>
                 </div>
                 <div class="card__image-wrapper">

diff --git a/funnel/templates/profile_layout.html.jinja2 b/funnel/templates/profile_layout.html.jinja2
@@ -373,13 +373,13 @@
     {% endif %}
     <form id="follow-form-{{ profile.uuid_b58 }}" action="{{ profile.url_for('follow') }}" class="follow-form js-follow-form {% if css_class %}{{ css_class }}{% endif %}" data-account-id="{{ profile.uuid_b58 }}" method="post">
       {%- if current_auth.is_anonymous %}
-        <a class="mui-btn mui-btn--dark mui-btn--raised" href="{{ url_for('login', next=request.path) }}" data-ga="Login to follow account" aria-label="{% trans %}Login to follow this account{% endtrans %}">{% trans %}Follow{% endtrans %}</a>
+        <a class="mui-btn mui-btn--dark mui-btn__icon mui-btn--raised" href="{{ url_for('login', next=request.path) }}" data-ga="Login to follow account" aria-label="{% trans %}Login to follow this account{% endtrans %}">{% trans %}Follow{% endtrans %}</a>
       {%- elif profile != current_auth.user and not profile.features.is_private() %}
         <input type="hidden" name="follow" value=""/>
         {% if not hide_unfollow %}
-          <button type="submit" value="false" class="mui-btn mui-btn--danger zero-bottom-margin zero-top-margin {% if buttonclass %}{{ buttonclass }}{% endif %} js-unfollow-btn {% if not profile.current_roles.follower %}mui--hide{%- endif %}" href="{{ profile.url_for('follow') }}" onclick="this.form.follow.value=this.value">{{ faicon(icon='user-xmark', icon_size='caption') }} {% trans %}Unfollow{% endtrans %}</button>
+          <button type="submit" value="false" class="mui-btn mui-btn--danger mui-btn__icon zero-bottom-margin zero-top-margin {% if buttonclass %}{{ buttonclass }}{% endif %} js-unfollow-btn {% if not profile.current_roles.follower %}mui--hide{%- endif %}" href="{{ profile.url_for('follow') }}" onclick="this.form.follow.value=this.value">{{ faicon(icon='user-xmark', icon_size='subhead', baseline=false, css_class='icon_left') }} {% trans %}Unfollow{% endtrans %}</button>
         {% endif %}
-        <button type="submit" value="true" class="mui-btn mui-btn--primary mui-btn--raised zero-bottom-margin zero-top-margin {% if buttonclass %}{{ buttonclass }}{% endif %} zero-left-margin js-follow-btn {% if profile.current_roles.follower %}mui--hide{%- endif %}" href="{{ profile.url_for('follow') }}" onclick="this.form.follow.value=this.value">{{ faicon(icon='user-plus', icon_size='caption') }} {% trans %}Follow{% endtrans %}</button>
+        <button type="submit" value="true" class="mui-btn mui-btn--primary mui-btn--raised mui-btn__icon zero-bottom-margin zero-top-margin {% if buttonclass %}{{ buttonclass }}{% endif %} zero-left-margin js-follow-btn {% if profile.current_roles.follower %}mui--hide{%- endif %}" href="{{ profile.url_for('follow') }}" onclick="this.form.follow.value=this.value">{{ faicon(icon='user-plus', icon_size='subhead', baseline=false, css_class='icon-left') }} {% trans %}Follow{% endtrans %}</button>
       {%- endif %}
     </form>
   </div>