From 3dc9fc52a7c515fb4755e9883806e5c80e291e6a Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Thu, 17 Feb 2022 17:17:26 +0530
Subject: [PATCH] style: reviews empty state

---
 school/lms/widgets/Reviews.html | 28 +++++++++++++++++-----------
 school/public/css/style.css     | 20 ++++++++++++++++++++
 school/public/icons/comment.svg |  6 ++++++
 3 files changed, 43 insertions(+), 11 deletions(-)
 create mode 100644 school/public/icons/comment.svg

diff --git a/school/lms/widgets/Reviews.html b/school/lms/widgets/Reviews.html
index cad9f736..bc785845 100644
--- a/school/lms/widgets/Reviews.html
+++ b/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>
diff --git a/school/public/css/style.css b/school/public/css/style.css
index eb327077..6496c0c2 100644
--- a/school/public/css/style.css
+++ b/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;
diff --git a/school/public/icons/comment.svg b/school/public/icons/comment.svg
new file mode 100644
index 00000000..15db8abf
--- /dev/null
+++ b/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>