Merge pull request #302 from pateljannat/reviews-empty-state

school/lms/widgets/Reviews.html

@@ -83,19 +83,25 @@
   </div>
 
   {% else %}
-  <div class="empty-state text-center">
-    <img class="icon icon-xl" src="/assets/frappe/icons/timeless/message.svg">
-    <div class="course-home-headings mt-4 mb-0" style="color: inherit;"> {{ _("Review the course") }} </div>
-    <div class="small mb-6"> {{ _("Help us improve our course material.") }} </div>
-    {% if is_eligible_to_review(course.name, membership) %}
-      <span class="review-link button is-secondary ml-auto mr-auto mt-3">
+  <div class="empty-state-new">
+    <div>
+      <img class="icon icon-xl" src="/assets/school/icons/comment.svg">
+    </div>
+    <div class="empty-state-text">
+      <div class="empty-state-heading">{{ _("Review the course") }}</div>
+      <div class="course-meta">{{ _("Help us improve our course material.") }}</div>
+    </div>
+    <div>
+      {% if is_eligible_to_review(course.name, membership) %}
+      <span class="review-link button is-secondary">
         {{ _("Write a review") }}
       </span>
-    {% elif frappe.session.user == "Guest" %}
-    <a class="button is-secondary dark-links ml-auto mr-auto mt-3" href="/login?redirect-to=/courses/{{ course.name }}"> {{ _("Login") }} </a>
-    {% elif not membership %}
-    <div class="button is-secondary join-batch ml-auto mr-auto mt-3" data-course="{{ course.name | urlencode }}"> {{ _("Start Learning") }} </div>
-    {% endif %}
+      {% elif frappe.session.user == "Guest" %}
+      <a class="button is-primary" href="/login?redirect-to=/courses/{{ course.name }}"> {{ _("Login") }} </a>
+      {% elif not membership %}
+      <div class="button is-primary join-batch" data-course="{{ course.name | urlencode }}"> {{ _("Start Learning") }} </div>
+      {% endif %}
+    </div>
   </div>
   {% endif %}
 </div>

school/public/css/style.css

@@ -1263,6 +1263,26 @@ pre {
   padding: 2.5rem;
 }
 
+.empty-state-new {
+  background: var(--gray-50);
+  border-radius: var(--border-radius-lg);
+  padding: 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.empty-state-text {
+  flex: 1;
+  margin-left: 1.25rem;
+}
+
+.empty-state-heading {
+  font-size: var(--text-xl);
+  color: var(--gray-900);
+  font-weight: 600;
+}
+
 .vertically-center {
   display: flex;
   align-items: center;

school/public/icons/comment.svg

@@ -0,0 +1,6 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M28.875 3.85022H6.875C5.78098 3.85022 4.73177 4.28482 3.95818 5.0584C3.1846 5.83199 2.75 6.8812 2.75 7.97522V21.7252C2.75 22.8192 3.1846 23.8684 3.95818 24.642C4.73177 25.4156 5.78098 25.8502 6.875 25.8502H11V34.1002L19.25 25.8502H28.875C29.969 25.8502 31.0182 25.4156 31.7918 24.642C32.5654 23.8684 33 22.8192 33 21.7252V7.97522C33 6.8812 32.5654 5.83199 31.7918 5.0584C31.0182 4.28482 29.969 3.85022 28.875 3.85022V3.85022Z" stroke="#687178" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M8.5249 10.7252H27.7749" stroke="#687178" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M8.5249 16.2252H19.5249" stroke="#687178" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M16.5 31.9003H24.75L33 40.1503V31.9003H37.125C38.219 31.9003 39.2682 31.4657 40.0418 30.6921C40.8154 29.9186 41.25 28.8693 41.25 27.7753V14.0253C41.25 12.9313 40.8154 11.8821 40.0418 11.1085C39.2682 10.3349 38.219 9.90033 37.125 9.90033H35.75" stroke="#687178" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>