From e1f88bfebe4ea0a09be6cfa001894780296c6e7b Mon Sep 17 00:00:00 2001
From: Ryan Lerch <rlerch@redhat.com>
Date: Aug 23 2018 11:55:12 +0000
Subject: [PATCH 1/2] re-do the user public profile page


This re-implements the user public profile page. It splits it
out into multiple tabs, so we can add more information in the
future as needed.

Fixes: 3544

---

diff --git a/pagure/static/pagure.css b/pagure/static/pagure.css
index 04fdfc7..025b390 100644
--- a/pagure/static/pagure.css
+++ b/pagure/static/pagure.css
@@ -334,10 +334,8 @@ th[data-sort] {
 .hljs {
   padding: 0!important;
   background: #fff;
-
-.userdash-tabs .nav-sidetabs{
-  background: #f3f3f3;
-  box-shadow: -2000px 0 0 2000px #f3f3f3;
-  position: relative;
-  z-index: 1;
 }
+
+.line-height-1{
+  line-height: 1em;
+}
\ No newline at end of file
diff --git a/pagure/templates/_render_repo.html b/pagure/templates/_render_repo.html
index c190572..a613446 100644
--- a/pagure/templates/_render_repo.html
+++ b/pagure/templates/_render_repo.html
@@ -291,7 +291,7 @@
         {% endif %}
 {% endmacro %}
 
-{% macro render_activity_graph(username) %}
+{% macro render_activity_graph(username, _class="") %}
 <script type="text/javascript"src="{{
   url_for('static', filename='vendor/jquery/jquery.min.js') }}"></script>
 <script type="text/javascript" src="{{
@@ -304,7 +304,7 @@
   url_for('static', filename='vendor/cal-heatmap/cal-heatmap.css') }}" />
 
 
-<div class="mb-2" id="user_graph">
+<div class="mb-2 {{_class}}" id="user_graph">
   <div class="p-0">
     <div id="cal-heatmap">
     </div>
diff --git a/pagure/templates/master.html b/pagure/templates/master.html
index 9866694..5ed2be1 100644
--- a/pagure/templates/master.html
+++ b/pagure/templates/master.html
@@ -83,11 +83,6 @@
                           url_for('ui_ns.view_user_requests', username=g.fas_user.username)
                           }}">My Pull Requests</a>
                         <div class="dropdown-divider"></div>
-                        <a class="dropdown-item" href="{{
-                          url_for('ui_ns.view_user_stars', username=g.fas_user.username)
-                          }}">My Stars</a>
-                        <div class="dropdown-divider"></div>
-
                         <a class="dropdown-item" href="{{ url_for('auth_logout')
                           }}?next={{ request.url }}">Log Out</a>
                       </div>
diff --git a/pagure/templates/user_stars.html b/pagure/templates/user_stars.html
deleted file mode 100644
index 6916948..0000000
--- a/pagure/templates/user_stars.html
+++ /dev/null
@@ -1,41 +0,0 @@
-{% extends "master.html" %}
-
-{% block title %}{{ username }}'s starred Projects{% endblock %}
-
-{% block content %}
-<div class="p-t-2">
-  <div class="container">
-    <h3 class="p-b-2">
-      {{ repos | length }} Projects Starred by {{ username }}
-    </h3>
-
-    <div class="card">
-      <div class="card-header">
-        <p>Starred Projects</p>
-      </div>
-      <div class="card-block p-a-0">
-        <div class="list-group">
-          {% for repo in repos %}
-            <a class="list-group-item" href="{{ url_for(
-                'ui_ns.view_repo',
-                repo=repo.name,
-                username=repo.user.user if repo.is_fork else None,
-                namespace=repo.namespace,
-                )}}">
-                {% if repo.avatar_email %}
-                <img src="{{ repo.avatar_email | avatar_url | safe }}" width=20 height=20 />
-                {% else %}
-                <span class="fa fa-calendar-o fa-rotate-270"></span>
-                {% endif %}
-                {{repo.fullname}}
-                <div class="pull-xs-right">
-                  {{ repo.description or '' }}
-                </div>
-            </a>
-          {% endfor %}
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-{% endblock %}
diff --git a/pagure/templates/userprofile_forks.html b/pagure/templates/userprofile_forks.html
new file mode 100644
index 0000000..e9196d9
--- /dev/null
+++ b/pagure/templates/userprofile_forks.html
@@ -0,0 +1,28 @@
+{% extends "userprofile_master.html" %}
+
+{% block title %}{{user.username}} - overview{% endblock %}
+
+{% from "_render_repo.html" import pagination_link %}
+{% from "userprofile_macros.html" import render_repo_listing %}
+
+
+{% block userprofile_content %}
+<div class="row mt-4">
+    <div class="col-12">
+        <div class="d-flex align-items-center mb-3">
+          <h4 class="font-weight-bold mb-0">Forks</h4>
+          <span class="btn btn-outline-secondary disabled opacity-100 border-0 ml-auto font-weight-bold">{{ forks_length }} projects</span>
+        </div>
+          {% if forks %}
+            {{ render_repo_listing(forks)}}
+            {% if total_page_forks and total_page_forks > 1 %}
+            {{ pagination_link('forkpage', forkpage, total_page_forks) }}
+            {% endif %}
+        {% else %}
+          <div class="alert alert-secondary text-center">
+            <p>No forks</p>
+          </div>
+        {% endif %}
+    </div>
+</div>
+{% endblock %}
diff --git a/pagure/templates/userprofile_groups.html b/pagure/templates/userprofile_groups.html
new file mode 100644
index 0000000..1ae0d09
--- /dev/null
+++ b/pagure/templates/userprofile_groups.html
@@ -0,0 +1,44 @@
+{% extends "userprofile_master.html" %}
+
+{% from "userprofile_macros.html" import render_repo_listing %}
+
+{% block title %}{{user.username}} - groups{% endblock %}
+
+{% block userprofile_content %}
+<div class="row mt-4">
+    <div class="col-12">
+        <div class="d-flex align-items-center mb-3">
+          <h4 class="font-weight-bold mb-0">Groups</h4>
+          <span class="btn btn-outline-secondary disabled opacity-100 border-0 ml-auto font-weight-bold">{{ user.groups | length }} groups</span>
+        </div>
+        <div class="list-group">
+        {% for group in groups %}
+            <div class="list-group-item">
+                <div class="media">
+                    <div class="align-self-center text-center pt-1" style="width:40px">
+                      <span class="fa fa-users fa-2x text-muted" ></span>
+                    </div>
+
+                  <div class="media-body align-self-center">
+                    <a class="font-weight-bold" href="{{ url_for('ui_ns.view_group', group=group.group_name)}}">{{ group.display_name }}</a>
+
+                    <div data-toggle="tooltip" class="line-height-1">
+                      <small>
+                        {% if group.description %}
+                          {{ group.description }}
+                        {% endif %}
+                      </small>
+                    </div>
+                  </div>
+                </div>
+              </div>
+        {% else %}
+            <div class="card-block">
+                <p>No group found</p>
+            </div>
+        {% endfor %}
+        </div>
+
+    </div>
+</div>
+{% endblock %}
diff --git a/pagure/templates/userprofile_macros.html b/pagure/templates/userprofile_macros.html
new file mode 100644
index 0000000..6da5c45
--- /dev/null
+++ b/pagure/templates/userprofile_macros.html
@@ -0,0 +1,40 @@
+{% macro render_repo_listing(repos) %}
+<div class="list-group">
+            {% for repo in repos %}
+              {% set url = url_for('ui_ns.view_repo',
+              repo=repo.name,
+              username=repo.user.username if repo.is_fork else None,
+              namespace=repo.namespace) %}
+              <div class="list-group-item">
+                <div class="media">
+                  {% if repo.avatar_email %}
+                    <img class="align-self-center text-center mr-3"
+                      src="{{ repo.avatar_email | avatar_url }}"
+                      width=40 height=40 />
+                  {% elif repo.is_fork %}
+                    <div class="align-self-center text-center pt-1" style="width:40px">
+                      <span class="fa fa-code-fork fa-2x text-muted" ></span>
+                    </div>
+                  {% else %}
+                    <div class="align-self-center text-center mr-3 pt-1" style="width:40px">
+                      <span class="fa fa-calendar-o fa-rotate-270 fa-2x text-muted" ></span>
+                    </div>
+                  {% endif %}
+                  <div class="media-body align-self-center">
+                    <a class="font-weight-bold" href="{{ url }}">{{ repo.fullname }}</a>
+
+                    <div data-toggle="tooltip" class="line-height-1">
+                      <small>
+                        {% if repo.description %}
+                          {{ repo.description }}
+                        {% else %}
+                          <span class="text-muted">no description<span>
+                        {% endif %}
+                      </small>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            {% endfor %}
+            </div>
+{% endmacro %}
\ No newline at end of file
diff --git a/pagure/templates/userprofile_master.html b/pagure/templates/userprofile_master.html
new file mode 100644
index 0000000..59a3475
--- /dev/null
+++ b/pagure/templates/userprofile_master.html
@@ -0,0 +1,106 @@
+{% extends "master.html" %}
+
+{% block title %}User {{username}}{% endblock %}
+
+{% block header %}
+  <link href="{{ url_for('static', filename='vendor/selectize/selectize.bootstrap3.css') }}"
+  rel="stylesheet" />
+{% endblock %}
+
+
+{% from "_render_repo.html" import render_repos_as_card, render_activity_graph %}
+
+
+{% block content %}
+<div class="bg-light border border-top-0 pt-2">
+    <div class="container">
+        <div class="media my-4">
+          {{ user.default_email | avatar(64, css_class="align-self-center mr-3") | safe }}
+          <div class="media-body align-self-center">
+            <h3 class="mb-0 font-weight-bold">{{ username }}</h3>
+            <div title="{{ user.created.strftime('%Y-%m-%d') }}">
+              {{user.fullname}} &bull; <span class="text-muted">Joined {{ user.created | humanize }}</span>
+            </div>
+          </div>
+        </div>
+    </div>
+  </div>
+<div class="container">
+    <div class="row">
+    <div class="col">
+        <ul class="nav nav-tabs nav-sidetabs flex-column">
+          <li class="nav-item text-dark">
+              <a class="nav-link d-flex align-items-center {{'active' if select=='overview'}}"
+                 href="{{ url_for('ui_ns.view_user', username=user.username) }}">
+                  <span>
+                      <i class="fa fa-fw text-muted fa-user"></i>
+                      <span class="d-none d-md-inline">Overview&nbsp;</span>
+                  </span>
+              </a>
+          </li>
+          <li class="nav-item text-dark">
+              <a class="nav-link d-flex align-items-center {{'active' if select=='projects'}}"
+                 href="{{ url_for('ui_ns.userprofile_projects', username=user.username) }}">
+                  <span>
+                      <i class="fa fa-fw text-muted fa-calendar-o fa-rotate-270"></i>
+                      <span class="d-none d-md-inline">Projects&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          {{ repos_length }}
+                      </span>
+                  </div>
+              </a>
+          </li>
+          <li class="nav-item text-dark">
+              <a class="nav-link d-flex align-items-center {{'active' if select=='forks'}}"
+                 href="{{ url_for('ui_ns.userprofile_forks', username=user.username) }}">
+                  <span>
+                      <i class="fa fa-fw text-muted fa-code-fork"></i>
+                      <span class="d-none d-md-inline">Forks&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          {{ forks_length }}
+                      </span>
+                  </div>
+              </a>
+          </li>
+          <li class="nav-item text-dark">
+              <a class="nav-link d-flex align-items-center {{'active' if select=='groups'}}"
+                 href="{{ url_for('ui_ns.userprofile_groups', username=user.username) }}">
+                  <span>
+                      <i class="fa fa-fw text-muted fa-users"></i>
+                      <span class="d-none d-md-inline">Groups&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          {{ user.groups | length }}
+                      </span>
+                  </div>
+              </a>
+          </li>
+          <li class="nav-item text-dark">
+              <a class="nav-link d-flex align-items-center {{'active' if select=='starred'}}"
+                 href="{{ url_for('ui_ns.userprofile_starred', username=user.username) }}">
+                  <span>
+                      <i class="fa fa-fw text-muted fa-star"></i>
+                      <span class="d-none d-md-inline">Starred&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          {{ user.stars | length }}
+                      </span>
+                  </div>
+              </a>
+          </li>
+        </ul>
+    </div>
+
+    <div class="col-9">
+    {% block userprofile_content %}
+    {% endblock %}
+    </div>
+    </div>
+</div>
+{% endblock %}
diff --git a/pagure/templates/userprofile_overview.html b/pagure/templates/userprofile_overview.html
new file mode 100644
index 0000000..69d5fa8
--- /dev/null
+++ b/pagure/templates/userprofile_overview.html
@@ -0,0 +1,51 @@
+{% extends "userprofile_master.html" %}
+
+{% block title %}{{user.username}} - overview{% endblock %}
+
+{% from "_render_repo.html" import render_activity_graph %}
+
+{% block userprofile_content %}
+<div class="row mt-4">
+        <div class="col-12">
+            {% if owned_repos %}
+            <h4><strong>Top Projects</strong></h4>
+            <div class="row">
+                {% for repo in owned_repos %}
+                <div class="col-4">
+                    <div class="border mt-3 p-3">
+                        {% if repo.avatar_email %}
+                        <img src="{{ repo.avatar_email | avatar_url }}" width=20 height=20 />&nbsp;
+                        {% else %}
+                        <span class="fa fa-fw fa-calendar-o fa-rotate-270 mr-1 text-semimuted"></span>
+                        {% endif %}
+                        <a href="{{url_for(
+                        'ui_ns.view_repo',
+                        repo=repo.name,
+                        username=repo.user.username if repo.is_fork else None,
+                        namespace=repo.namespace)}}">
+                        <strong>{{ repo.namespace + '/' if repo.namespace }}{{ repo.name }}</strong>
+                        </a>
+                        <div class="ellipsis">
+                            <small>{{repo.description}}</small>
+                        </div>
+                    </div>
+                </div>
+              {% endfor %}
+            </div>
+            <div class="row">
+                <div class="col align-self-end text-right">
+                    <a href="#">view all {{repos_length}} projects</a>
+                </div>
+            </div>
+            {% endif %}
+            <h4 class="mt-4"><strong>Activity</strong></h4>
+            <div class="row">
+                <div class="col-12">
+                    <div class="w-100 border py-4 pl-3">
+                {{ render_activity_graph(username, _class="mx-auto") }}
+                    </div>
+                </div>
+            </div>
+        </div>
+      </div>
+{% endblock %}
diff --git a/pagure/templates/userprofile_projects.html b/pagure/templates/userprofile_projects.html
new file mode 100644
index 0000000..bb3154a
--- /dev/null
+++ b/pagure/templates/userprofile_projects.html
@@ -0,0 +1,28 @@
+{% extends "userprofile_master.html" %}
+
+{% block title %}{{user.username}} - overview{% endblock %}
+
+{% from "_render_repo.html" import pagination_link %}
+{% from "userprofile_macros.html" import render_repo_listing %}
+
+
+{% block userprofile_content %}
+<div class="row mt-4">
+    <div class="col-12">
+        <div class="d-flex align-items-center mb-3">
+          <h4 class="font-weight-bold mb-0">Projects</h4>
+          <span class="btn btn-outline-secondary disabled opacity-100 border-0 ml-auto font-weight-bold">{{ repos_length }} projects</span>
+        </div>
+          {% if repos %}
+            {{ render_repo_listing(repos)}}
+            {% if total_page_repos and total_page_repos > 1 %}
+            {{ pagination_link('repopage', repopage, total_page_repos) }}
+            {% endif %}
+        {% else %}
+          <div class="alert alert-secondary text-center">
+            <p>No projects</p>
+          </div>
+        {% endif %}
+    </div>
+</div>
+{% endblock %}
diff --git a/pagure/templates/userprofile_starred.html b/pagure/templates/userprofile_starred.html
new file mode 100644
index 0000000..a1c99f0
--- /dev/null
+++ b/pagure/templates/userprofile_starred.html
@@ -0,0 +1,23 @@
+{% extends "userprofile_master.html" %}
+
+{% from "userprofile_macros.html" import render_repo_listing %}
+
+{% block title %}{{user.username}} - starred{% endblock %}
+
+{% block userprofile_content %}
+<div class="row mt-4">
+    <div class="col-12">
+        <div class="d-flex align-items-center mb-3">
+          <h4 class="font-weight-bold mb-0">Starred Projects</h4>
+          <span class="btn btn-outline-secondary disabled opacity-100 border-0 ml-auto font-weight-bold">{{ user.stars | length }} projects</span>
+        </div>
+          {% if repos %}
+            {{ render_repo_listing(repos)}}
+          {% else %}
+          <div class="alert alert-secondary text-center">
+            <p>No starred projects or forks</p>
+          </div>
+          {% endif %}
+    </div>
+</div>
+{% endblock %}
diff --git a/pagure/ui/app.py b/pagure/ui/app.py
index 80c7834..dcdd27a 100644
--- a/pagure/ui/app.py
+++ b/pagure/ui/app.py
@@ -624,6 +624,26 @@ def view_projects(pattern=None, namespace=None):
     )
 
 
+def get_userprofile_common(user):
+    userprofile_counts = {}
+
+    userprofile_counts['repos_length'] = pagure.lib.search_projects(
+        flask.g.session,
+        username=user.username,
+        fork=False,
+        exclude_groups=None,
+        private=False,
+        count=True)
+
+    userprofile_counts['forks_length'] = pagure.lib.search_projects(
+        flask.g.session,
+        username=user.username,
+        fork=True,
+        private=False,
+        count=True)
+
+    return userprofile_counts
+
 @UI_NS.route('/user/<username>/')
 @UI_NS.route('/user/<username>')
 def view_user(username):
@@ -631,6 +651,127 @@ def view_user(username):
     """
     user = _get_user(username=username)
 
+    # public profile, so never show private repos,
+    # even if the user is viewing themself
+    private = False
+
+    owned_repos = pagure.lib.list_users_projects(
+        flask.g.session,
+        username=username,
+        exclude_groups=None,
+        fork=False,
+        private=private,
+        limit=6,
+        acls=["main admin"],
+    )
+
+    userprofile_common = get_userprofile_common(user)
+
+    return flask.render_template(
+        'userprofile_overview.html',
+        username=username,
+        user=user,
+        owned_repos=owned_repos,
+        repos_length=userprofile_common['repos_length'],
+        forks_length=userprofile_common['forks_length'],
+        select='overview',
+    )
+
+
+@UI_NS.route('/user/<username>/projects/')
+@UI_NS.route('/user/<username>/projects')
+def userprofile_projects(username):
+    """ Public Profile view of a user's projects.
+    """
+    user = _get_user(username=username)
+
+    repopage = flask.request.args.get('repopage', 1)
+    try:
+        repopage = int(repopage)
+        if repopage < 1:
+            repopage = 1
+    except ValueError:
+        repopage = 1
+
+    limit = pagure_config['ITEM_PER_PAGE']
+    repo_start = limit * (repopage - 1)
+
+    repos = pagure.lib.search_projects(
+        flask.g.session,
+        username=username,
+        fork=False,
+        exclude_groups=pagure_config.get('EXCLUDE_GROUP_INDEX'),
+        start=repo_start,
+        limit=limit,
+        private=False)
+
+    userprofile_common = get_userprofile_common(user)
+    total_page_repos = int(
+                    ceil(userprofile_common['repos_length'] / float(limit)))
+
+    return flask.render_template(
+        'userprofile_projects.html',
+        username=username,
+        user=user,
+        repos=repos,
+        total_page_repos=total_page_repos,
+        repopage=repopage,
+        repos_length=userprofile_common['repos_length'],
+        forks_length=userprofile_common['forks_length'],
+        select="projects",
+    )
+
+@UI_NS.route('/user/<username>/forks/')
+@UI_NS.route('/user/<username>/forks')
+def userprofile_forks(username):
+    """ Public Profile view of a user's forks.
+    """
+    user = _get_user(username=username)
+
+    forkpage = flask.request.args.get('forkpage', 1)
+    try:
+        forkpage = int(forkpage)
+        if forkpage < 1:
+            forkpage = 1
+    except ValueError:
+        forkpage = 1
+
+    limit = pagure_config['ITEM_PER_PAGE']
+    fork_start = limit * (forkpage - 1)
+
+    forks = pagure.lib.search_projects(
+        flask.g.session,
+        username=username,
+        fork=True,
+        start=fork_start,
+        limit=limit,
+        private=False)
+
+    userprofile_common = get_userprofile_common(user)
+    total_page_forks = int(
+                    ceil(userprofile_common['forks_length'] / float(limit)))
+
+    return flask.render_template(
+        'userprofile_forks.html',
+        username=username,
+        user=user,
+        forks=forks,
+        total_page_forks=total_page_forks,
+        forkpage=forkpage,
+        repos_length=userprofile_common['repos_length'],
+        forks_length=userprofile_common['forks_length'],
+        select="forks",
+    )
+
+
+# original view_user()
+@UI_NS.route('/user2/<username>/')
+@UI_NS.route('/user2/<username>')
+def view_user2(username):
+    """ Front page of a specific user.
+    """
+    user = _get_user(username=username)
+
     acl = flask.request.args.get('acl', '').strip().lower() or None
 
     repopage = flask.request.args.get('repopage', 1)
@@ -696,7 +837,7 @@ def view_user(username):
     total_page_forks = int(ceil(forks_length / float(limit)))
 
     return flask.render_template(
-        'user_info.html',
+        'userprofile_overview.html',
         username=username,
         user=user,
         repos=repos,
@@ -754,7 +895,7 @@ def view_user_issues(username):
 
 @UI_NS.route('/user/<username>/stars/')
 @UI_NS.route('/user/<username>/stars')
-def view_user_stars(username):
+def userprofile_starred(username):
     """
     Shows the starred projects of the specified user.
 
@@ -762,12 +903,41 @@ def view_user_stars(username):
     """
 
     user = _get_user(username=username)
+    userprofile_common = get_userprofile_common(user)
 
     return flask.render_template(
-        'user_stars.html',
+        'userprofile_starred.html',
         username=username,
         user=user,
         repos=[star.project for star in user.stars],
+        repos_length=userprofile_common['repos_length'],
+        forks_length=userprofile_common['forks_length'],
+        select="starred",
+    )
+
+@UI_NS.route('/user/<username>/groups/')
+@UI_NS.route('/user/<username>/groups')
+def userprofile_groups(username):
+    """
+    Shows the groups of a user
+    """
+
+    user = _get_user(username=username)
+    userprofile_common = get_userprofile_common(user)
+
+    groups = []
+    for groupname in user.groups:
+        groups.append(
+            pagure.lib.search_groups(flask.g.session, group_name=groupname))
+
+    return flask.render_template(
+        'userprofile_groups.html',
+        username=username,
+        user=user,
+        groups=groups,
+        repos_length=userprofile_common['repos_length'],
+        forks_length=userprofile_common['forks_length'],
+        select="groups",
     )
 
 

From f0babf164d96975972562e4b00483de9614852a3 Mon Sep 17 00:00:00 2001
From: Pierre-Yves Chibon <pingou@pingoured.fr>
Date: Aug 23 2018 11:55:12 +0000
Subject: [PATCH 2/2] Fix the unit-tests for the new user's public page


Signed-off-by: Pierre-Yves Chibon <pingou@pingoured.fr>

---

diff --git a/pagure/ui/app.py b/pagure/ui/app.py
index dcdd27a..a03a31d 100644
--- a/pagure/ui/app.py
+++ b/pagure/ui/app.py
@@ -644,6 +644,7 @@ def get_userprofile_common(user):
 
     return userprofile_counts
 
+
 @UI_NS.route('/user/<username>/')
 @UI_NS.route('/user/<username>')
 def view_user(username):
@@ -707,7 +708,7 @@ def userprofile_projects(username):
 
     userprofile_common = get_userprofile_common(user)
     total_page_repos = int(
-                    ceil(userprofile_common['repos_length'] / float(limit)))
+        ceil(userprofile_common['repos_length'] / float(limit)))
 
     return flask.render_template(
         'userprofile_projects.html',
@@ -721,6 +722,7 @@ def userprofile_projects(username):
         select="projects",
     )
 
+
 @UI_NS.route('/user/<username>/forks/')
 @UI_NS.route('/user/<username>/forks')
 def userprofile_forks(username):
@@ -749,7 +751,7 @@ def userprofile_forks(username):
 
     userprofile_common = get_userprofile_common(user)
     total_page_forks = int(
-                    ceil(userprofile_common['forks_length'] / float(limit)))
+        ceil(userprofile_common['forks_length'] / float(limit)))
 
     return flask.render_template(
         'userprofile_forks.html',
@@ -915,6 +917,7 @@ def userprofile_starred(username):
         select="starred",
     )
 
+
 @UI_NS.route('/user/<username>/groups/')
 @UI_NS.route('/user/<username>/groups')
 def userprofile_groups(username):
diff --git a/tests/test_pagure_flask_api_ui_private_repo.py b/tests/test_pagure_flask_api_ui_private_repo.py
index 18d513d..86c2f68 100644
--- a/tests/test_pagure_flask_api_ui_private_repo.py
+++ b/tests/test_pagure_flask_api_ui_private_repo.py
@@ -437,10 +437,26 @@ class PagurePrivateRepotest(tests.Modeltests):
         output = self.app.get('/user/foo?repopage=abc&forkpage=def')
         self.assertEqual(output.status_code, 200)
         self.assertIn(
-            'Projects <span class="badge badge-secondary">0</span>',
+            """<span>
+                      <i class="fa fa-fw text-muted fa-calendar-o fa-rotate-270"></i>
+                      <span class="d-none d-md-inline">Projects&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          0
+                      </span>
+                  </div>""",
             output.get_data(as_text=True))
         self.assertIn(
-            'Forks <span class="badge badge-secondary">0</span>',
+            """<span>
+                      <i class="fa fa-fw text-muted fa-code-fork"></i>
+                      <span class="d-none d-md-inline">Forks&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          0
+                      </span>
+                  </div>""",
             output.get_data(as_text=True))
 
         # Add a private project
@@ -471,40 +487,101 @@ class PagurePrivateRepotest(tests.Modeltests):
         output = self.app.get('/user/foo')
         self.assertEqual(output.status_code, 200)
         self.assertIn(
-            'Projects <span class="badge badge-secondary">1</span>',
+            """<span>
+                      <i class="fa fa-fw text-muted fa-calendar-o fa-rotate-270"></i>
+                      <span class="d-none d-md-inline">Projects&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          1
+                      </span>
+                  </div>""",
             output.get_data(as_text=True))
         self.assertIn(
-            'Forks <span class="badge badge-secondary">0</span>', output.get_data(as_text=True))
+            """<span>
+                      <i class="fa fa-fw text-muted fa-code-fork"></i>
+                      <span class="d-none d-md-inline">Forks&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          0
+                      </span>
+                  </div>""",
+            output.get_data(as_text=True))
 
         user = tests.FakeUser(username='foo')
         with tests.user_set(self.app.application, user):
             output = self.app.get('/user/foo')
             output_text = output.get_data(as_text=True)
             self.assertIn(
-                'Projects <span class="badge badge-secondary">2</span>',
+                """<span>
+                      <i class="fa fa-fw text-muted fa-calendar-o fa-rotate-270"></i>
+                      <span class="d-none d-md-inline">Projects&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          1
+                      </span>
+                  </div>""",
                 output_text)
             self.assertIn(
-                'Forks <span class="badge badge-secondary">0</span>',
+                """<span>
+                      <i class="fa fa-fw text-muted fa-code-fork"></i>
+                      <span class="d-none d-md-inline">Forks&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          0
+                      </span>
+                  </div>""",
                 output_text)
-            self.assertEqual(
-                output_text.count('<p>No group found</p>'), 1)
-            self.assertEqual(
-                output_text.count('<div class="card-header">'), 3)
+            self.assertIn(
+                """<span>
+                      <i class="fa fa-fw text-muted fa-users"></i>
+                      <span class="d-none d-md-inline">Groups&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          0
+                      </span>
+                  </div>""", output_text)
 
         user.username = 'pingou'
         with tests.user_set(self.app.application, user):
             output = self.app.get('/user/foo')
             output_text = output.get_data(as_text=True)
             self.assertIn(
-                'Projects <span class="badge badge-secondary">1</span>',
+                """<span>
+                      <i class="fa fa-fw text-muted fa-calendar-o fa-rotate-270"></i>
+                      <span class="d-none d-md-inline">Projects&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          1
+                      </span>
+                  </div>""",
                 output_text)
             self.assertIn(
-                'Forks <span class="badge badge-secondary">0</span>',
+                """<span>
+                      <i class="fa fa-fw text-muted fa-code-fork"></i>
+                      <span class="d-none d-md-inline">Forks&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          0
+                      </span>
+                  </div>""",
                 output_text)
-            self.assertEqual(
-                output_text.count('<p>No group found</p>'), 1)
-            self.assertEqual(
-                output_text.count('<div class="card-header">'), 3)
+            self.assertIn(
+                """<span>
+                      <i class="fa fa-fw text-muted fa-users"></i>
+                      <span class="d-none d-md-inline">Groups&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          0
+                      </span>
+                  </div>""", output_text)
 
         # Check pingou has 0 projects
         user.username = 'pingou'
@@ -751,16 +828,47 @@ class PagurePrivateRepotest(tests.Modeltests):
         if not os.path.exists(repo_path):
             os.makedirs(repo_path)
         pygit2.init_repository(repo_path, bare=True)
-        # Check repo was created
+        # Check repo was created - Doesn't show on the public page
         user = tests.FakeUser(username='pingou')
         with tests.user_set(self.app.application, user):
             output = self.app.get('/user/pingou/')
             self.assertEqual(output.status_code, 200)
             self.assertIn(
-                '<div class="card-header">\n            Projects <span '
-                'class="badge badge-secondary">1</span>', output.get_data(as_text=True))
+                """<span>
+                      <i class="fa fa-fw text-muted fa-calendar-o fa-rotate-270"></i>
+                      <span class="d-none d-md-inline">Projects&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          0
+                      </span>
+                  </div>""",
+                output.get_data(as_text=True))
+            self.assertIn(
+                """<span>
+                      <i class="fa fa-fw text-muted fa-code-fork"></i>
+                      <span class="d-none d-md-inline">Forks&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          0
+                      </span>
+                  </div>""",
+                output.get_data(as_text=True))
+
+            # Shows on the front page
+            output = self.app.get('/dashboard/projects')
+            self.assertEqual(output.status_code, 200)
             self.assertIn(
-                'Forks <span class="badge badge-secondary">0</span>',
+                """<span>
+                        <i class="fa fa-calendar-o fa-rotate-270 fa-fw text-muted"></i>
+                        <span class="d-none d-md-inline">Projects&nbsp;</span>
+                    </span>
+                    <div class="ml-auto">
+                        <span class="badge badge-secondary">
+                            1
+                        </span>
+                    </div>""",
                 output.get_data(as_text=True))
 
             self.set_up_git_repo(new_project=None, branch_from='feature')
diff --git a/tests/test_pagure_flask_ui_app.py b/tests/test_pagure_flask_ui_app.py
index fca5ba8..1745da9 100644
--- a/tests/test_pagure_flask_ui_app.py
+++ b/tests/test_pagure_flask_ui_app.py
@@ -83,13 +83,27 @@ class PagureFlaskApptests(tests.Modeltests):
         self.assertEqual(output.status_code, 200)
         output_text = output.get_data(as_text=True)
         self.assertIn(
-            'Projects <span class="badge badge-secondary">3</span>',
-            output_text)
-        self.assertIn(
-            '<a class="page-link" href="#" tabindex="-1">page 1 of 2</a>', output_text)
-        self.assertEqual(output_text.count('class="repo_descripton"'), 2)
+                """<span>
+                      <i class="fa fa-fw text-muted fa-calendar-o fa-rotate-270"></i>
+                      <span class="d-none d-md-inline">Projects&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          3
+                      </span>
+                  </div>""",
+                output_text)
         self.assertIn(
-            'Forks <span class="badge badge-secondary">0</span>', output_text)
+            """<span>
+                      <i class="fa fa-fw text-muted fa-code-fork"></i>
+                      <span class="d-none d-md-inline">Forks&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          0
+                      </span>
+                  </div>""",
+            output_text)
 
     def test_view_user(self):
         """ Test the view_user endpoint. """
@@ -98,10 +112,26 @@ class PagureFlaskApptests(tests.Modeltests):
         self.assertEqual(output.status_code, 200)
         output_text = output.get_data(as_text=True)
         self.assertIn(
-            'Projects <span class="badge badge-secondary">0</span>',
-            output_text)
+                """<span>
+                      <i class="fa fa-fw text-muted fa-calendar-o fa-rotate-270"></i>
+                      <span class="d-none d-md-inline">Projects&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          0
+                      </span>
+                  </div>""",
+                output_text)
         self.assertIn(
-            'Forks <span class="badge badge-secondary">0</span>',
+            """<span>
+                      <i class="fa fa-fw text-muted fa-code-fork"></i>
+                      <span class="d-none d-md-inline">Forks&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          0
+                      </span>
+                  </div>""",
             output_text)
 
         tests.create_projects(self.session)
@@ -112,13 +142,30 @@ class PagureFlaskApptests(tests.Modeltests):
         self.assertEqual(output.status_code, 200)
         output_text = output.get_data(as_text=True)
         self.assertIn(
-            'Projects <span class="badge badge-secondary">3</span>',
-            output_text)
+                """<span>
+                      <i class="fa fa-fw text-muted fa-calendar-o fa-rotate-270"></i>
+                      <span class="d-none d-md-inline">Projects&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          3
+                      </span>
+                  </div>""",
+                output_text)
         self.assertIn(
-            'Forks <span class="badge badge-secondary">0</span>', output_text)
+            """<span>
+                      <i class="fa fa-fw text-muted fa-code-fork"></i>
+                      <span class="d-none d-md-inline">Forks&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          0
+                      </span>
+                  </div>""",
+            output_text)
         self.assertNotIn(
-            '<a class="page-link" href="#" tabindex="-1">page 1 of 2</a>', output_text)
-        self.assertEqual(output_text.count('class="repo_descripton"'), 3)
+            '<a class="page-link" href="#" tabindex="-1">page 1 of 2</a>',
+            output_text)
 
     @patch.dict('pagure.config.config', {'ENABLE_UI_NEW_PROJECTS': False})
     def test_new_project_when_turned_off_in_the_ui(self):
diff --git a/tests/test_pagure_flask_ui_repo.py b/tests/test_pagure_flask_ui_repo.py
index 641288f..d1a5b47 100644
--- a/tests/test_pagure_flask_ui_repo.py
+++ b/tests/test_pagure_flask_ui_repo.py
@@ -3438,11 +3438,25 @@ index 0000000..fb7093d
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertIn(
-                '<div class="card-header">\n            Projects <span '
-                'class="badge badge-secondary">2</span>', output_text)
-            self.assertIn(
-                'Forks <span class="badge badge-secondary">0</span>',
-                output_text)
+                """<span>
+                      <i class="fa fa-fw text-muted fa-calendar-o fa-rotate-270"></i>
+                      <span class="d-none d-md-inline">Projects&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          2
+                      </span>
+                  </div>""", output_text)
+            self.assertIn(
+                """<span>
+                      <i class="fa fa-fw text-muted fa-code-fork"></i>
+                      <span class="d-none d-md-inline">Forks&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          0
+                      </span>
+                  </div>""", output_text)
 
             # Only git repo
             item = pagure.lib.model.Project(
@@ -3460,11 +3474,25 @@ index 0000000..fb7093d
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertIn(
-                '<div class="card-header">\n            Projects <span '
-                'class="badge badge-secondary">2</span>', output_text)
+                """<span>
+                      <i class="fa fa-fw text-muted fa-calendar-o fa-rotate-270"></i>
+                      <span class="d-none d-md-inline">Projects&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          2
+                      </span>
+                  </div>""", output_text)
             self.assertIn(
-                'Forks <span class="badge badge-secondary">0</span>',
-                output_text)
+                """<span>
+                      <i class="fa fa-fw text-muted fa-code-fork"></i>
+                      <span class="d-none d-md-inline">Forks&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          0
+                      </span>
+                  </div>""", output_text)
 
             # Only git and doc repo
             item = pagure.lib.model.Project(
@@ -3482,11 +3510,25 @@ index 0000000..fb7093d
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertIn(
-                '<div class="card-header">\n            Projects <span '
-                'class="badge badge-secondary">2</span>', output_text)
+                """<span>
+                      <i class="fa fa-fw text-muted fa-calendar-o fa-rotate-270"></i>
+                      <span class="d-none d-md-inline">Projects&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          2
+                      </span>
+                  </div>""", output_text)
             self.assertIn(
-                'Forks <span class="badge badge-secondary">0</span>',
-                output_text)
+                """<span>
+                      <i class="fa fa-fw text-muted fa-code-fork"></i>
+                      <span class="d-none d-md-inline">Forks&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          0
+                      </span>
+                  </div>""", output_text)
 
             # All repo there
             item = pagure.lib.model.Project(
@@ -3512,11 +3554,25 @@ index 0000000..fb7093d
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertIn(
-                '<span class="btn btn-outline-secondary disabled opacity-100 '
-                'border-0 ml-auto font-weight-bold">3 projects</span>', output_text)
+                """<span>
+                        <i class="fa fa-calendar-o fa-rotate-270 fa-fw text-muted"></i>
+                        <span class="d-none d-md-inline">Projects&nbsp;</span>
+                    </span>
+                    <div class="ml-auto">
+                        <span class="badge badge-secondary">
+                            3
+                        </span>
+                    </div>""", output_text)
             self.assertNotIn(
-                '<span class="d-none d-md-inline">Forks&nbsp;</span>',
-                output_text)
+                """<span>
+                        <i class="fa fa-fw text-muted fa-code-fork"></i>
+                        <span class="d-none d-md-inline">Forks&nbsp;</span>
+                    </span>
+                    <div class="ml-auto">
+                        <span class="badge badge-secondary">
+                            0
+                        </span>
+                    </div>""", output_text)
 
             # add issues
             repo = pagure.lib.get_authorized_project(self.session, 'test')
@@ -3605,21 +3661,49 @@ index 0000000..fb7093d
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertIn(
-                '<span class="btn btn-outline-secondary disabled opacity-100 '
-                'border-0 ml-auto font-weight-bold">3 projects</span>', output_text)
+                """<span>
+                        <i class="fa fa-calendar-o fa-rotate-270 fa-fw text-muted"></i>
+                        <span class="d-none d-md-inline">Projects&nbsp;</span>
+                    </span>
+                    <div class="ml-auto">
+                        <span class="badge badge-secondary">
+                            3
+                        </span>
+                    </div>""", output_text)
             self.assertNotIn(
-                '<span class="d-none d-md-inline">Forks&nbsp;</span>',
-                output_text)
+                """<span>
+                        <i class="fa fa-fw text-muted fa-code-fork"></i>
+                        <span class="d-none d-md-inline">Forks&nbsp;</span>
+                    </span>
+                    <div class="ml-auto">
+                        <span class="badge badge-secondary">
+                            0
+                        </span>
+                    </div>""", output_text)
 
             output = self.app.post('/test/delete', follow_redirects=True)
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertIn(
-                '<div class="card-header">\n            Projects <span '
-                'class="badge badge-secondary">2</span>', output_text)
+                """<span>
+                      <i class="fa fa-fw text-muted fa-calendar-o fa-rotate-270"></i>
+                      <span class="d-none d-md-inline">Projects&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          2
+                      </span>
+                  </div>""", output_text)
             self.assertIn(
-                'Forks <span class="badge badge-secondary">0</span>',
-                output_text)
+                """<span>
+                      <i class="fa fa-fw text-muted fa-code-fork"></i>
+                      <span class="d-none d-md-inline">Forks&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          0
+                      </span>
+                  </div>""", output_text)
 
             repo = pagure.lib.get_authorized_project(self.session, 'test')
             self.assertEqual(repo, None)
@@ -3651,26 +3735,50 @@ index 0000000..fb7093d
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertIn(
-                '<span class="btn btn-outline-secondary disabled opacity-100 '
-                'border-0 ml-auto font-weight-bold">2 projects</span>', output_text)
+                """<span>
+                        <i class="fa fa-calendar-o fa-rotate-270 fa-fw text-muted"></i>
+                        <span class="d-none d-md-inline">Projects&nbsp;</span>
+                    </span>
+                    <div class="ml-auto">
+                        <span class="badge badge-secondary">
+                            2
+                        </span>
+                    </div>""", output_text)
             self.assertIn(
-'                        <span class="d-none d-md-inline">Forks&nbsp;</span>\n'
-'                    </span>\n'
-'                    <div class="ml-auto">\n'
-'                        <span class="badge badge-secondary">\n'
-'                            1\n',
-                output_text)
+                """<span>
+                        <i class="fa fa-fw text-muted fa-code-fork"></i>
+                        <span class="d-none d-md-inline">Forks&nbsp;</span>
+                    </span>
+                    <div class="ml-auto">
+                        <span class="badge badge-secondary">
+                            1
+                        </span>
+                    </div>""", output_text)
 
             output = self.app.post(
                 '/fork/pingou/test3/delete', follow_redirects=True)
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertIn(
-                '<div class="card-header">\n            Projects <span '
-                'class="badge badge-secondary">2</span>', output_text)
+                """<span>
+                      <i class="fa fa-fw text-muted fa-calendar-o fa-rotate-270"></i>
+                      <span class="d-none d-md-inline">Projects&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          2
+                      </span>
+                  </div>""", output_text)
             self.assertIn(
-                'Forks <span class="badge badge-secondary">0</span>',
-                output_text)
+                """<span>
+                      <i class="fa fa-fw text-muted fa-code-fork"></i>
+                      <span class="d-none d-md-inline">Forks&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          0
+                      </span>
+                  </div>""", output_text)
 
     @patch.dict('pagure.config.config', {'TICKETS_FOLDER': None})
     @patch('pagure.lib.notify.send_email', MagicMock(return_value=True))
@@ -3695,11 +3803,25 @@ index 0000000..fb7093d
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertIn(
-                '<span class="btn btn-outline-secondary disabled opacity-100 '
-                'border-0 ml-auto font-weight-bold">3 projects</span>', output_text)
+                """<span>
+                        <i class="fa fa-calendar-o fa-rotate-270 fa-fw text-muted"></i>
+                        <span class="d-none d-md-inline">Projects&nbsp;</span>
+                    </span>
+                    <div class="ml-auto">
+                        <span class="badge badge-secondary">
+                            3
+                        </span>
+                    </div>""", output_text)
             self.assertNotIn(
-                '<span class="d-none d-md-inline">Forks&nbsp;</span>',
-                output_text)
+                """<span>
+                        <i class="fa fa-fw text-muted fa-code-fork"></i>
+                        <span class="d-none d-md-inline">Forks&nbsp;</span>
+                    </span>
+                    <div class="ml-auto">
+                        <span class="badge badge-secondary">
+                            0
+                        </span>
+                    </div>""", output_text)
 
             # Delete the project
             output = self.app.post('/test/delete', follow_redirects=True)
@@ -3708,11 +3830,25 @@ index 0000000..fb7093d
 
             # Check deletion worked
             self.assertIn(
-                '<div class="card-header">\n            Projects <span '
-                'class="badge badge-secondary">2</span>', output_text)
-            self.assertIn(
-                'Forks <span class="badge badge-secondary">0</span>',
-                output_text)
+                """<span>
+                      <i class="fa fa-fw text-muted fa-calendar-o fa-rotate-270"></i>
+                      <span class="d-none d-md-inline">Projects&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          2
+                      </span>
+                  </div>""", output_text)
+            self.assertIn(
+                """<span>
+                      <i class="fa fa-fw text-muted fa-code-fork"></i>
+                      <span class="d-none d-md-inline">Forks&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          0
+                      </span>
+                  </div>""", output_text)
 
     @patch('pagure.lib.notify.send_email')
     @patch('pagure.decorators.admin_session_timedout')
@@ -3793,11 +3929,25 @@ index 0000000..fb7093d
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertIn(
-                '<div class="card-header">\n            Projects <span '
-                'class="badge badge-secondary">0</span>', output_text)
+                """<span>
+                      <i class="fa fa-fw text-muted fa-calendar-o fa-rotate-270"></i>
+                      <span class="d-none d-md-inline">Projects&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          0
+                      </span>
+                  </div>""", output_text)
             self.assertIn(
-                'Forks <span class="badge badge-secondary">0</span>',
-                output_text)
+                """<span>
+                      <i class="fa fa-fw text-muted fa-code-fork"></i>
+                      <span class="d-none d-md-inline">Forks&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          0
+                      </span>
+                  </div>""", output_text)
 
             # Check after
             repo = pagure.lib.get_authorized_project(self.session, 'test')
@@ -3900,11 +4050,25 @@ index 0000000..fb7093d
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertIn(
-                '<div class="card-header">\n            Projects <span '
-                'class="badge badge-secondary">0</span>', output_text)
+                """<span>
+                      <i class="fa fa-fw text-muted fa-calendar-o fa-rotate-270"></i>
+                      <span class="d-none d-md-inline">Projects&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          0
+                      </span>
+                  </div>""", output_text)
             self.assertIn(
-                'Forks <span class="badge badge-secondary">0</span>',
-                output_text)
+                """<span>
+                      <i class="fa fa-fw text-muted fa-code-fork"></i>
+                      <span class="d-none d-md-inline">Forks&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          0
+                      </span>
+                  </div>""", output_text)
 
             # Check after
             repo = pagure.lib.get_authorized_project(self.session, 'test')
@@ -3996,11 +4160,25 @@ index 0000000..fb7093d
             self.assertEqual(output.status_code, 200)
             output_text = output.get_data(as_text=True)
             self.assertIn(
-                '<div class="card-header">\n            Projects <span '
-                'class="badge badge-secondary">0</span>', output_text)
-            self.assertIn(
-                'Forks <span class="badge badge-secondary">0</span>',
-                output_text)
+                """<span>
+                      <i class="fa fa-fw text-muted fa-calendar-o fa-rotate-270"></i>
+                      <span class="d-none d-md-inline">Projects&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          0
+                      </span>
+                  </div>""", output_text)
+            self.assertIn(
+                """<span>
+                      <i class="fa fa-fw text-muted fa-code-fork"></i>
+                      <span class="d-none d-md-inline">Forks&nbsp;</span>
+                  </span>
+                  <div class="ml-auto">
+                      <span class="badge badge-secondary">
+                          0
+                      </span>
+                  </div>""", output_text)
 
             # Check after
             repo = pagure.lib.get_authorized_project(self.session, 'test')
diff --git a/tests/test_pagure_flask_ui_star_project.py b/tests/test_pagure_flask_ui_star_project.py
index 476e9b3..668456a 100644
--- a/tests/test_pagure_flask_ui_star_project.py
+++ b/tests/test_pagure_flask_ui_star_project.py
@@ -193,6 +193,17 @@ class TestStarProjectUI(tests.SimplePagureTest):
     def test_user_stars(self):
         """ Test the user_stars endpoint of pagure.ui.app """
 
+        # Check pingou's stars before
+        output = self.app.get('/user/pingou/stars/')
+        output_text = output.get_data(as_text=True)
+        self.assertIn(
+            "<title>pingou - starred - Pagure</title>", output_text
+        )
+        self.assertIn(
+            '<span class="btn btn-outline-secondary disabled opacity-100 '
+            'border-0 ml-auto font-weight-bold">0 projects</span>',
+            output_text)
+
         # make pingou star the project
         # first create pingou
         user = tests.FakeUser()
@@ -214,17 +225,22 @@ class TestStarProjectUI(tests.SimplePagureTest):
             self._check_star_count(data=data, stars=1)
 
         # now, test if the project 'test' comes in pingou's stars
-        output = self.app.get(
-            '/user/pingou/stars'
-        )
+        output = self.app.get('/user/pingou/stars/')
+        output_text = output.get_data(as_text=True)
         self.assertIn(
-            "<title>pingou's starred Projects - Pagure</title>",
-            output.get_data(as_text=True)
+            "<title>pingou - starred - Pagure</title>", output_text
         )
         self.assertIn(
-            '<a class="list-group-item" href="/test">', output.get_data(as_text=True))
-        self.assertEqual(output.get_data(as_text=True).count('class="list-group-item"'), 1)
+            '<span class="btn btn-outline-secondary disabled opacity-100 '
+            'border-0 ml-auto font-weight-bold">1 projects</span>',
+            output_text)
+        self.assertEqual(
+            output_text.count('class="list-group-item"'), 1)
+        self.assertEqual(
+            output_text.count('<div class="media-body align-self-center">'), 2)
 
+        repo = pagure.lib.get_authorized_project(self.session, 'test')
+        self.assertEqual(len(repo.stargazers), 1)
 
         # make pingou unstar the project
         user = tests.FakeUser()
@@ -238,29 +254,30 @@ class TestStarProjectUI(tests.SimplePagureTest):
                 '/test/star/0', data=data, follow_redirects=True)
             self.assertEqual(output.status_code, 200)
             self.assertIn(
-                'You unstarred '
-                'this project',
+                'You unstarred this project',
                 output.get_data(as_text=True)
             )
             self._check_star_count(data=data, stars=0)
 
+        self.session = pagure.lib.create_session(self.dbpath)
+        repo = pagure.lib.get_authorized_project(self.session, 'test')
+        self.assertEqual(len(repo.stargazers), 0)
+
         # now, test if test's name comes in pingou's stars
         # it shouldn't because, he just unstarred
-        output = self.app.get(
-            '/user/pingou/stars/'
-        )
+        output = self.app.get('/user/pingou/stars/')
+        output_text = output.get_data(as_text=True)
         self.assertIn(
-            "<title>pingou's starred Projects - Pagure</title>",
-            output.get_data(as_text=True)
-        )
-        self.assertNotIn(
-            '<a class="list-group-item" href="/test">test</a>\n',
-            output.get_data(as_text=True)
+            "<title>pingou - starred - Pagure</title>", output_text
         )
+        self.assertIn(
+            '<span class="btn btn-outline-secondary disabled opacity-100 '
+            'border-0 ml-auto font-weight-bold">0 projects</span>',
+            output_text)
+        self.assertEqual(
+            output_text.count('class="list-group-item"'), 0)
         self.assertEqual(
-            output.get_data(as_text=True).count('<span class="oi" data-glyph="document"></span>'),
-            0)
-        self.assertEqual(output.get_data(as_text=True).count('class="list-group-item"'), 0)
+            output_text.count('<div class="media-body align-self-center">'), 1)
 
 
 if __name__ == '__main__':