style: banner

school/public/css/style.css

@@ -681,6 +681,15 @@ input[type=checkbox] {
   margin: 0;
 }
 
+.avatar-square {
+  width: 130px;
+  height: 130px;
+}
+
+.avatar-square .avatar-frame {
+  border-radius: 20px;
+}
+
 .avatar-medium {
   width: 42px;
   height: 42px;
@@ -920,12 +929,12 @@ input[type=checkbox] {
 }
 
 .profile-page {
-  padding-top: 1rem;
+  padding-top: 0;
 }
 
 .profile-banner {
   height: 248px;
-  border-radius: 8px 8px 0px 0px;
+  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
   background-size: cover;
   background-position: center;
 }
@@ -971,16 +980,15 @@ input[type=checkbox] {
 }
 
 .profile-name {
-  color: var(--gray-800);
+  color: var(--gray-900);
   font-weight: 600;
-  font-size: 22px;
-  line-height: 156%;
-  letter-spacing: -0.0175em;
+  font-size: var(--text-3xl);
+  margin-left: 1.25rem;
 }
 
 @media (max-width: 375px) {
   .profile-name {
-    font-size: 16px;
+    font-size: var(--text-lg);
     padding: 5px;
   }
 }

school/www/profiles/profile.html

@@ -5,8 +5,8 @@
 {% endblock %}
 
 {% block content %}
-<div class="common-page-style">
-  <div class="container profile-page">
+<div class="common-page-style profile-page">
+  <div class="container">
     {% set read_only = member.name != frappe.session.user %}
     {{ ProfileBanner(member) }}
     {{ ProfileSections(member) }}
@@ -20,15 +20,20 @@
 
 {% macro ProfileBanner(member) %}
 {% set cover_image = member.cover_image if member.cover_image else "/assets/school/images/profile-banner.png" %}
+{% set enrollment = member.get_course_membership("Student") | length %}
+{% set enrollment_suffix = "Courses" if enrollment > 1 "Course" %}
 <div class="">
   <div class="profile-banner" style="background-image: url({{ cover_image }})">
     <div class="profile-avatar">
-      {{ widgets.Avatar(member=member, avatar_class="avatar-xl") }}
+      {{ widgets.Avatar(member=member, avatar_class="avatar-square") }}
     </div>
   </div>
   <div class="profile-info">
     <div class="profile-name-section">
       <div class="profile-name"> {{ member.full_name }} </div>
+      {% if enrollment %}
+      <div>{{ enrollment }}</div>
+      {% endif %}
       {% if get_authored_courses(member.name) | length %}
       <div class="creator-badge"> Creator </div>
       {% endif %}
@@ -69,7 +74,6 @@
 
 {% macro Overview(member) %}
 
-{% set enrollment = member.get_course_membership("Student") | length %}
 {% set mentorship = member.get_course_membership("Mentor") | length %}
 {% set reviews = member.get_user_reviews() | length %}